/* ==========================================================================
   CUSTOMMPC.COM — design tokens
   Load BEFORE site.css. Single source of truth, see DESIGN.md §2.
   ========================================================================== */

:root {
  /* ---- color: hardware casing (warm chassis — Jo 2026-08-20: cream/tan,
     not industrial gray; think aged MPC plastic + retrofuture cel paint) ---- */
  --steel-100: #F3EDDF;   /* cream casing / page ground */
  --steel-300: #DCCFB4;   /* tan casing / inset wells */
  --steel-500: #B3A488;   /* warm cel shadow block. DECORATION ONLY, never text */
  --ink:       #000000;   /* structural paneling, borders, text on light */
  --paper:     #FFFDF6;

  /* ---- color: hyper-saturated accents ---- */
  --lcd:        #00E5FF;  /* LCD cyan. Text only on ink (13.7:1) */
  --alert:      #FF003C;  /* alert red. On ink 5.3:1; large/bold on light only */
  --alert-deep: #C4002E;  /* red for small text on light (4.9:1 on steel-100) */
  --caution:    #FFD600;  /* caution yellow. Black text on it only (14.9:1) */
  --led-green:  #00C853;  /* status LED, on ink panels only */

  /* ---- color: text ---- */
  --text-body:  var(--ink);
  --text-muted: #5F574B;  /* warm taupe, ~5.9:1 on cream steel-100 */

  /* ---- type ---- */
  --font-display:  'Bungee', 'Archivo Black', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-display-shade: 'Bungee Shade', 'Bungee', 'Archivo Black', 'Arial Black', sans-serif;
  --font-pixel:    'DotGothic16', 'Space Mono', 'Courier New', monospace;
  --font-mono:     'Space Mono', 'Courier New', Courier, monospace;
  --font-mono-alt: 'JetBrains Mono', Consolas, 'Courier New', monospace;
  --font-jp:       'Noto Sans JP', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;

  --text-xs:   0.75rem;                            /* 12px legends, port labels */
  --text-sm:   0.875rem;                           /* 14px meta, chips */
  --text-base: 1rem;                               /* 16px body */
  --text-lg:   clamp(1.0625rem, 0.95rem + 0.5vw, 1.1875rem);  /* lede */
  --text-xl:   clamp(1.25rem, 1.05rem + 1vw, 1.625rem);       /* h3 / card titles */
  --text-2xl:  clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem);       /* h2 */
  --text-3xl:  clamp(2.125rem, 1.4rem + 3.6vw, 3.875rem);     /* h1 / hero */

  --leading-body: 1.65;
  --leading-tight: 1.05;
  --measure: 64ch;

  /* ---- spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --container: 1200px;
  --gutter: var(--s4);

  /* ---- lines / chamfers / shadows ---- */
  --line-w: 2px;
  --line: var(--line-w) solid var(--ink);
  --line-thin: 1px solid var(--ink);

  --cut-sm: 8px;
  --cut-md: 14px;
  --cut-lg: 22px;

  --shadow-1: 4px 4px 0 var(--ink);
  --shadow-2: 8px 8px 0 var(--ink);
  --shadow-lcd: 4px 4px 0 var(--lcd);
  --shadow-alert: 4px 4px 0 var(--alert);

  /* ---- motion ---- */
  --speed-tap: 70ms;
  --speed-ui: 160ms;
  --speed-seq: 480ms;

  /* ---- z ---- */
  --z-skip: 100;
  --z-nav: 50;
}

@media (min-width: 960px) {
  :root {
    --gutter: var(--s6);
    --shadow-1: 4px 4px 0 var(--ink);
    --shadow-2: 8px 8px 0 var(--ink);
  }
}