MelodyMuse/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        color-scheme: dark;
    }

    html,
    body,
    #root {
        height: 100%;
    }

    body {
        @apply bg-bg text-fg antialiased font-sans;
        margin: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "cv11", "ss01", "ss03";
    }

    /* Subtle, modern focus ring — keyboard only */
    :focus-visible {
        outline: 2px solid theme("colors.accent.primary");
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Custom selection color */
    ::selection {
        background: rgba(124, 58, 237, 0.3);
        color: #f1f5f9;
    }
}

@layer components {
    .card {
        @apply bg-bg-card border border-border rounded-2xl;
    }

    .card-hover {
        @apply hover:bg-bg-hover transition-colors duration-150;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium text-white
           bg-accent-primary hover:bg-violet-500 active:bg-violet-700
           transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg font-medium
           bg-bg-card border border-border text-fg hover:bg-bg-hover
           transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm
           text-fg-muted hover:text-fg hover:bg-bg-hover
           transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .input {
        @apply w-full bg-bg-card border border-border rounded-lg px-3 py-2 text-[14px] text-fg
           placeholder-fg-muted/70
           focus:outline-none focus:border-accent-primary/60
           focus:ring-1 focus:ring-accent-primary/20
           transition-colors duration-150;
    }

    .textarea {
        @apply input resize-y;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border
           bg-bg-card text-sm font-medium text-fg hover:bg-bg-hover
           transition-colors duration-150;
    }

    .gradient-text {
        background: linear-gradient(135deg, #c4b5fd 0%, #67e8f9 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .gradient-bg {
        background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);
    }

    .gradient-bg-soft {
        background: linear-gradient(
            135deg,
            rgba(124, 58, 237, 0.18) 0%,
            rgba(6, 182, 212, 0.12) 50%,
            rgba(8, 8, 16, 0) 100%
        );
    }

    /* Stagger delays for the result cards' fade-up animation. */
    .stagger-0 {
        animation-delay: 0ms;
    }
    .stagger-1 {
        animation-delay: 80ms;
    }
    .stagger-2 {
        animation-delay: 160ms;
    }
    .stagger-3 {
        animation-delay: 240ms;
    }
    .stagger-4 {
        animation-delay: 320ms;
    }
}

@layer utilities {
    .scrollbar-thin {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
    }

    .scrollbar-thin::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
    }

    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
}