/**
 * tokens.css — Kinetic Typography design token system
 * Philosophy: Typography IS the visual structure. Brutalist + kinetic poster.
 * Dark mode only. Acid yellow accents. Zero border-radius. Maximum contrast.
 */

:root {
    /* ── Colors: Core Palette ── */
    --color-background:        #09090B;   /* Rich Black */
    --color-foreground:        #FAFAFA;   /* Off-White */
    --color-muted:             #27272A;   /* Dark Gray — secondary surfaces */
    --color-muted-foreground:  #A1A1AA;   /* Zinc 400 — body text */
    --color-accent:            #DFE104;   /* Acid Yellow — hover, highlights */
    --color-accent-foreground: #000000;   /* Black on accent */
    --color-border:            #3F3F46;   /* Zinc 700 */
    --color-input-border:      #71717A;   /* Zinc 500 — 3:1+ contrast on bg and surface */

    /* ── Colors: Semantic ── */
    --color-error:             #EF4444;   /* Red */
    --color-success:           #22C55E;   /* Green */
    --color-surface:           #27272A;   /* Muted — card bg */
    --color-surface-raised:    #18181B;   /* Slightly lighter black */

    /* ── Typography ── */
    --font-body:    'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono:    'Courier New', Courier, monospace;

    /* ── Type Scale (aggressive) ── */
    --text-xs:   1rem;       /*  16px — minimum accessible size */
    --text-sm:   1rem;       /*  16px — minimum accessible size */
    --text-base: 1rem;       /*  16px */
    --text-lg:   1.125rem;   /*  18px */
    --text-xl:   1.25rem;    /*  20px */
    --text-2xl:  1.5rem;     /*  24px */
    --text-3xl:  1.875rem;   /*  30px */
    --text-4xl:  2.25rem;    /*  36px */
    --text-5xl:  3rem;       /*  48px */
    --text-6xl:  3.75rem;    /*  60px */
    --text-7xl:  4.5rem;     /*  72px */
    --text-8xl:  6rem;       /*  96px */
    --text-9xl:  8rem;       /* 128px */

    /* ── Type Weights ── */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;

    /* ── Spacing (4px base) ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Radius — ZERO everywhere (brutalist) ── */
    --radius: 0px;

    /* ── Borders ── */
    --border-width: 2px;
    --border: 2px solid var(--color-border);

    /* ── Transitions ── */
    --transition-fast: 200ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* ── Z-Index ── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:   10;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-noise:    9999;

    /* ── Layout ── */
    --container-max:  1400px;
    --nav-height:     4rem;
    --section-py:     var(--space-32);
}