@layer reset, tokens, base, components, surfaces, modes;

@layer reset {
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer tokens {
    :root {
        /* Fonts */
        --font-body:    'Inter', system-ui, sans-serif;
        --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;

        /* Type scale — 3 steps only. No --text-lg. Weight carries hierarchy above --text-base. */
        --text-xs:   11px;
        --text-sm:   12px;
        --text-base: 13px;

        /* Modal component scale — all modal text + spacing flows from here */
        --modal-title-size:    18px;
        --modal-subtitle-size: var(--text-base);
        --modal-note-size:     var(--text-sm);
        --modal-fine-size:     var(--text-xs);
        --modal-gap:           20px;

        /* Surfaces (raw H S% L% — use hsl(var()) in rules) */
        --surface:         222 47%  6%;
        --surface-raised:  222 44%  8%;
        --surface-overlay: 222 44% 10%;
        --surface-sunken:  222 30% 14%;
        --line:            222 30% 18%;

        /* Text (computed — use var() directly) */
        --text:       hsl(210 40% 96%);
        --text-muted: hsl(215 20% 65%);

        /* Semantic */
        --success:    142 71% 50%;
        --conf-medium:  45 90% 55%;
        --amber:        38 70% 38%;
        --amber-bg:     38 80% 95%;
        --amber-border: 38 70% 75%;
        --danger:       0 84% 60%;
        --white:        0  0% 100%;
        --user-bubble: 186 40% 22%;

        /* Mode: demo (cyan) — only these fork per mode */
        --accent:       186 100% 50%;
        --accent-hover: 186 100% 60%;
        --accent-weak:  hsl(var(--accent) / 0.18);
        --accent-line:  hsl(var(--accent) / 0.30);
        --glow:         hsl(var(--accent) / 0.14);

        /* CTA — fixed coral across all modes (primary action button) */
        --cta:       12 90% 60%;
        --cta-hover: 12 90% 70%;

        /* Shadows */
        --shadow-sm: 0 2px  8px hsl(var(--surface) / 0.3);
        --shadow-md: 0 8px 24px hsl(var(--surface) / 0.5);

        /* Radius */
        --radius-sm:   4px;
        --radius-md:   8px;
        --radius-lg:   10px;
        --radius-xl:   12px;
        --radius-pill: 9999px;

        /* Motion */
        --dur-fast: 0.15s;
        --dur-base: 0.20s;
        --dur-slow: 0.30s;
        --ease:     cubic-bezier(0.2, 0, 0, 1);

        /* Spacing */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 24px;
        --space-6: 32px;

        /* Rank */
        --rank-gold:   hsl(45  100% 60%);
        --rank-silver: hsl(220  20% 70%);
        --rank-bronze: hsl(25   70% 55%);

        /* Channel colors — DNA-aligned. Raw (H S% L%) + computed.
           Coral (12°) = organic social · Cyan (186°) = organic discovery · Gold (45°) = paid */
        --ch-instagram-n:  12  80% 68%; --ch-instagram: hsl( 12  80% 68%);  /* coral, light  */
        --ch-youtube-n:    12 100% 52%; --ch-youtube:   hsl( 12 100% 52%);  /* coral, bold   */
        --ch-seo-n:       186  70% 50%; --ch-seo:       hsl(186  70% 50%);  /* cyan, steady  */
        --ch-geo-n:       186 100% 58%; --ch-geo:       hsl(186 100% 58%);  /* cyan, vivid   */
        --ch-meta-n:       45 100% 65%; --ch-meta:      hsl( 45 100% 65%);  /* gold, bright  */
        --ch-google-n:     45  90% 52%; --ch-google:    hsl( 45  90% 52%);  /* gold, rich    */
        --ch-display-n:    45  70% 44%; --ch-display:   hsl( 45  70% 44%);  /* gold, deep    */
    }
}