/* ==========================================================================
   TOKENS — Pixel Brutalism design system
   All spacing is a multiple of 8px. All color/shadow/type values live here.
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------
     NOTE: spec called for --grey-mid: #7A7A7A, but that is 4.36:1 on white,
     which fails WCAG AA for text under 18.66px (used here at 14-16px).
     Corrected to #6E6E6E (5.13:1, AA pass). The original value is kept as
     --grey-placeholder for non-text decorative uses only. */
  --bg-primary: #FFFFFF;
  --bg-inverse: #0A0A0A;
  --ink: #0A0A0A;
  --ink-inverse: #FFFFFF;
  --grey-mid: #6E6E6E;
  /* --grey-mid only reaches 3.53:1 on --bg-inverse (black) — fails AA for
     text. Used wherever grey secondary text sits on a black background
     (contact section subhead/form placeholder/consent copy/mascot caption).
     #8C8C8C is 5.9:1 on --bg-inverse. */
  --grey-mid-inverse: #8C8C8C;
  --grey-placeholder: #7A7A7A;
  --grey-line: #D4D4D4;
  --accent: #FF3B30;

  /* ---- Type --------------------------------------------------------------
     REPLACE: self-host these two families for production; Google Fonts CDN
     is used here for speed of setup. */
  --font-display: 'Silkscreen', 'Courier New', monospace;
  --font-body: 'JetBrains Mono', 'Courier New', monospace;

  --fs-h1: 64px;
  --fs-h1-mobile: 34px;
  --fs-h2: 48px;
  --fs-h2-mobile: 32px;
  --fs-h3: 24px;
  --fs-h3-mobile: 20px;
  --fs-sub: 22px;
  --fs-sub-mobile: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;
  --fs-nano: 10px;

  --lh-heading: 1.1;
  --lh-body: 1.6;
  --ls-heading: 0.03em;

  /* ---- Spacing (8px grid) ------------------------------------------------ */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---- Structure ---------------------------------------------------------- */
  --maxw: 1440px;
  --gutter: 5vw;
  --gutter-mobile: 24px;
  --header-h: 72px;
  --header-h-compressed: 56px;

  /* ---- Borders / shadows (hard, zero blur) -------------------------------- */
  --border-w: 3px;
  --border-w-thin: 2px;
  --shadow-off: 6px;
  --shadow-hard: var(--shadow-off) var(--shadow-off) 0 0 var(--ink);
  --shadow-hard-inverse: var(--shadow-off) var(--shadow-off) 0 0 var(--ink-inverse);
  --shadow-hard-accent: var(--shadow-off) var(--shadow-off) 0 0 var(--accent);
  --shadow-collapse: 0 0 0 0 var(--ink);
  --shadow-collapse-inverse: 0 0 0 0 var(--ink-inverse);
  --shadow-collapse-accent: 0 0 0 0 var(--accent);

  /* ---- Motion -------------------------------------------------------------- */
  --dur-fast: 0.15s;
  --dur-med: 0.3s;

  /* ---- Z-index -------------------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 300;
  --z-progress: 400;
  --z-modal: 500;
  --z-cursor: 9999;
}