/*
 * Design tokens — Keyser Soze
 * Canonical source: NEO-79 ux-spec §3 (palette, typography, grid) and §4 (motion).
 * All layers of the codebase read from var(--*) — never hard-code.
 * Accent Orange covers ~6–8% of visible surface max. No tint or shade variants.
 */

:root {
  /* ---------- 3.1 Color ---------- */
  --color-bg:          #050505;   /* Obsidian — page background */
  --color-bg-elev:     #1e1e2b;   /* Dark — section alternate (Round 7: raised again from #12121a per NEO-113 item 4 — board asked for ~30% more luminance to make the tier shift clearly discernible). */
  --color-surface:     #17171a;   /* Gray — card surfaces */
  --color-border:      #27272a;   /* Border, hairline dividers */
  --color-text-muted:  #a1a1aa;   /* Body copy, labels */
  --color-text:        #f4f4f5;   /* White — primary text */
  --color-accent:      #FF6B00;   /* Intervention signal — never decoration */
  --color-accent-soft: rgba(255, 107, 0, 0.12);
  --color-accent-line: rgba(255, 107, 0, 0.40);
  --color-danger:      #FF5E5E;

  /* Footer surfaces — nudged closer to white than --color-text-muted so the
     footer copy clears the dim/illegible threshold the board flagged. */
  --footer-text:       #f4f4f5;
  --footer-text-soft:  rgba(244, 244, 245, 0.82);

  /* Language-switcher inactive item — must hit WCAG AA (≥ 4.5:1) on
     --color-bg. The previous muted+0.4-opacity blend resolved to ~#434347
     (2.06:1). #8b8b8e clears 5.9:1 on #050505 while staying visibly dimmer
     than active `--color-text`. */
  --color-lang-inactive: #8b8b8e;

  /* Round 8 (NEO-115 item 2): input fill for form fields sitting on the
     near-black `--color-surface` card. Uses `color-mix` on --color-surface
     with 6% white so the rectangle pops as a discrete field without going
     so bright it competes with focused/accent states. */
  --color-input-bg:    color-mix(in srgb, var(--color-surface) 94%, #ffffff 6%);
  --color-input-border: rgba(255, 255, 255, 0.16);
  --color-input-border-focus: var(--color-accent);
  /* Hero → proof gap on the homepage. Desktop-only (see hub.css); the
     mobile/tablet scale-down lives in the component, not the token. */
  --hero-proof-gap: 120px;

  /* Surface compositions (used for borders/tints over the current bg) */
  --surface-card:        rgba(23, 23, 26, 0.5);
  --border-soft:         rgba(39, 39, 42, 0.5);
  --border-hairline:     1px solid var(--color-border);
  --border-hairline-soft: 1px solid var(--border-soft);

  /* ---------- 3.2 Typography ---------- */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Round 5: non-heading text +25% across the board (NEO-111 item 7).
     Headings (--text-display-*) stay untouched. */
  --text-mono-xs:    12px;                                /* micro labels */
  --text-mono-sm:    14px;                                /* form labels, footer */
  --text-body-sm:    16px;                                /* card body */
  --text-body:       18px;                                /* default */
  --text-body-lg:    20px;                                /* hero sub-line */
  --text-display-s:  clamp(1.75rem, 3vw, 2.25rem);        /* h3 */
  --text-display-m:  clamp(2rem, 4vw, 3rem);              /* h2 secondary */
  --text-display-l:  clamp(2.5rem, 5vw, 4.5rem);          /* h2 primary / service hero */
  --text-display-xl: clamp(2.5rem, 6vw, 6rem);            /* hub hero */

  --leading-tight:   0.95;                                /* display type */
  --leading-snug:    1.2;
  --leading-normal:  1.55;                                /* body copy */

  --tracking-display: -0.02em;
  --tracking-display-tight: -0.04em;
  --tracking-mono:   0.12em;
  --tracking-mono-wide: 0.2em;

  /* ---------- 3.3 Grid & layout ---------- */
  --container-max:   1600px;
  --gutter-mobile:   24px;
  --gutter-desktop:  48px;
  --grid-gap-mobile:   16px;
  --grid-gap-desktop:  32px;
  --nav-height:      80px;

  /* Spacing scale — used for padding/margins. Mobile-first, multiples of 4. */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---------- Radii ---------- */
  /* Cyber-brutalist register: sharp edges by default. Tokens available for deliberate use. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* ---------- 4. Motion ---------- */
  --motion-fast:    180ms;
  --motion-base:    300ms;
  --motion-slow:    600ms;
  --motion-xl:      800ms;
  --motion-marquee: 40s;

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-wipe:   cubic-bezier(0.19, 1, 0.22, 1);

  /* ---------- Focus ring ---------- */
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;
  --focus-ring-color:  var(--color-accent);

  /* ---------- Layering ---------- */
  --z-base:     0;
  --z-nav:     50;
  --z-cursor: 9999;
}