/* ═══ OFFLINE DYNAMICS — DESIGN TOKENS ═══════════════════════════════════
   One source of truth. Nothing below this file hardcodes a colour.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas ─────────────────────────────────────────── */
  --void:        #06070A;
  --ink-900:     #0A0C11;
  --ink-800:     #0F1218;
  --ink-700:     #161A22;
  --ink-600:     #1E242E;
  --ink-500:     #2A313D;
  --ink-400:     #3B4351;

  /* ── Type ───────────────────────────────────────────── */
  --bone:        #F5F4F0;
  --bone-dim:    #B9BCC4;
  --bone-faint:  #757A87;
  --bone-ghost:  #464C59;

  /* ── Signal accents ─────────────────────────────────── */
  --signal:      #CCFF00;   /* electric lime — primary  */
  --signal-deep: #8FB300;
  --signal-glow: rgba(204, 255, 0, 0.28);
  --pulse:       #FF2E6C;   /* hot magenta  — alerts    */
  --pulse-glow:  rgba(255, 46, 108, 0.30);
  --wire:        #00E5FF;   /* cyan         — data      */
  --wire-glow:   rgba(0, 229, 255, 0.26);
  --ember:       #FF9A3C;   /* amber        — warm      */

  /* ── Semantic ───────────────────────────────────────── */
  --live:        var(--signal);
  --dev:         var(--ember);
  --danger:      var(--pulse);

  /* ── Surfaces ───────────────────────────────────────── */
  --surface:     rgba(255, 255, 255, 0.026);
  --surface-2:   rgba(255, 255, 255, 0.05);
  --surface-3:   rgba(255, 255, 255, 0.082);
  --hairline:    rgba(255, 255, 255, 0.09);
  --hairline-2:  rgba(255, 255, 255, 0.16);

  /* ── Type scale (fluid) ─────────────────────────────── */
  --fs-mega:  clamp(2.6rem, 6.6vw, 6.2rem);
  --fs-h1:    clamp(2.6rem, 7.2vw, 6.2rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.9rem);
  --fs-h3:    clamp(1.35rem, 2.3vw, 2rem);
  --fs-lead:  clamp(1.02rem, 1.42vw, 1.28rem);
  --fs-body:  clamp(0.94rem, 1.05vw, 1.03rem);
  --fs-sm:    0.855rem;
  --fs-xs:    0.735rem;
  --fs-mono:  0.78rem;

  /* ── Families ───────────────────────────────────────── */
  --ff-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Rhythm ─────────────────────────────────────────── */
  --gutter:     clamp(1.15rem, 4.2vw, 4.5rem);
  --max:        1420px;
  --max-narrow: 940px;
  --section-y:  clamp(5rem, 12vh, 10rem);

  /* ── Radii ──────────────────────────────────────────── */
  --r-xs: 5px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Motion ─────────────────────────────────────────── */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.62, 0.44, 1);
  --e-snap:   cubic-bezier(0.2, 0.9, 0.2, 1.06);
  --t-fast:   140ms;
  --t-base:   280ms;
  --t-slow:   620ms;
  --t-lazy:   1100ms;

  /* ── Elevation ──────────────────────────────────────── */
  --sh-sm: 0 2px 10px rgba(0,0,0,.45);
  --sh-md: 0 12px 34px rgba(0,0,0,.5);
  --sh-lg: 0 30px 80px rgba(0,0,0,.62);
  --sh-in: inset 0 1px 0 rgba(255,255,255,.07);

  /* ── Chrome ─────────────────────────────────────────── */
  --nav-h: 62px;
  --z-bg: 0; --z-content: 10; --z-nav: 60; --z-cursor: 90; --z-boot: 100;
}

/* Rarity ladder — shared by every lab that rolls loot */
:root {
  --rar-common:    #8E9A97;
  --rar-uncommon:  #4EA3BF;
  --rar-rare:      #3E7FA6;
  --rar-epic:      #A855F7;
  --rar-legendary: #DDA82E;
  --rar-mythic:    #FF2E6C;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-lazy: 1ms; }
}