/* ==========================================================================
   ARCADE TSUNAMI — DESIGN TOKENS
   The single source of truth. Nothing below this file hardcodes a value.
   Maps 1:1 to the palette table in the design spec.
   ========================================================================== */

:root {

  /* --- SURFACES ---------------------------------------------------------
     Cabinet black. Not pure black: #0A0A0F carries a faint blue cast so the
     neon accents read as *lit* rather than merely bright.                  */
  --bg-void:        #0A0A0F;   /* page */
  --bg-cabinet:     #14141C;   /* panels, header, footer */
  --bg-raised:      #1D1D28;   /* cards, popovers */
  --bg-inset:       #08080C;   /* wells, bezel interiors, inputs */
  --line:           #2A2A38;   /* default border */
  --line-bright:    #3A3A4E;   /* emphasis border */

  /* --- INK --------------------------------------------------------------
     Contrast ratios measured against --bg-void.                            */
  --ink:            #EDEDF2;   /* body            17.0:1  AAA */
  --ink-dim:        #A0A0B4;   /* secondary        8.1:1  AAA */
  --ink-faint:      #6E6E85;   /* meta             4.6:1  AA large / UI only */

  /* --- NEON ACCENTS -----------------------------------------------------
     Arcade marquee CMY. See the magenta rule below.                        */
  --cyan:           #22D3EE;   /* links, focus     9.8:1 */
  --cyan-deep:      #0E7490;
  --magenta:        #F0179A;   /* brand, contests  5.1:1 */
  --magenta-deep:   #9D0E63;
  --amber:          #FFB020;   /* ratings, coin   10.3:1 */
  --green:          #3DDC84;   /* in stock        11.4:1 */
  --red:            #FF4757;   /* out of stock     5.9:1 */
  --violet:         #A855F7;   /* games namespace */

  /* MAGENTA RULE: headings, borders and UI accents only. At 5.1:1 it clears
     AA for large text and UI components but sits too close to the floor for
     sustained 17px reading. Body copy is always --ink.                     */

  /* --- GLOWS ------------------------------------------------------------
     Neon reads as light, not as a drop shadow. Always a colour-matched
     spread with no offset.                                                 */
  --glow-cyan:      0 0 14px rgba(34, 211, 238, 0.40);
  --glow-magenta:   0 0 14px rgba(240, 23, 154, 0.40);
  --glow-amber:     0 0 14px rgba(255, 176, 32, 0.35);
  --glow-soft:      0 8px 30px rgba(0, 0, 0, 0.55);
  --glow-lift:      0 12px 40px -8px rgba(0, 0, 0, 0.75);

  /* --- TYPE FACES -------------------------------------------------------
     Four faces, one job each. Every stack has a real fallback.             */
  --font-display: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
  --font-head:    'Chakra Petch', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* --- TYPE SCALE -------------------------------------------------------
     --fs-base is 17px, the hard floor for prose. The audience is 40+ and
     presbyopia is the governing design constraint, not a nicety.           */
  --fs-xs:    0.75rem;    /* 12px — mono labels, badge text ONLY */
  --fs-sm:    0.875rem;   /* 14px — UI chrome, table cells */
  --fs-base:  1.0625rem;  /* 17px — body floor */
  --fs-md:    1.1875rem;  /* 19px — lead paragraphs */
  --fs-lg:    clamp(1.375rem, 1.1rem + 0.9vw, 1.625rem);
  --fs-xl:    clamp(1.75rem,  1.4rem + 1.4vw, 2.25rem);
  --fs-2xl:   clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-hero:  clamp(2.375rem, 1.6rem + 3.6vw, 4rem);

  --lh-tight: 1.15;
  --lh-head:  1.25;
  --lh-body:  1.65;       /* generous — see presbyopia note */
  --measure:  68ch;       /* max prose width */

  /* --- SPACING — 4px base ----------------------------------------------- */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */

  /* --- RADII ------------------------------------------------------------
     Deliberately tight. Arcade hardware is boxy; soft pills read as SaaS.   */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* --- LAYOUT ----------------------------------------------------------- */
  --wrap:      1240px;
  --wrap-wide: 1480px;
  --wrap-prose: 760px;
  --tap:       44px;      /* minimum interactive target */

  /* --- MOTION ----------------------------------------------------------- */
  --t-fast: 120ms;
  --t-mid:  220ms;
  --t-slow: 400ms;
  --ease:   cubic-bezier(0.2, 0.6, 0.3, 1);

  --z-sticky: 100;
  --z-header: 200;
  --z-modal:  400;
}

/* Motion is decoration here, never information. Everything animated has a
   static resting state that communicates the same thing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}