/* ============================================================================
   HALON — DESIGN SYSTEM TOKENS
   Precision audio-electronics. Bone paper + graphite ink + one signal accent.
   Every value here; components read tokens only (Phase 4 precision laws).
   ========================================================================== */
:root{
  /* --- neutral ramp (warm graphite, 9 steps) --- */
  --ink-900:#121317; --ink-800:#191b20; --ink-700:#24272e; --ink-600:#33373f;
  --ink-500:#565b66; --ink-400:#7c828e; --ink-300:#a7acb6; --ink-200:#d2d5db;
  --ink-100:#e7e5de; --ink-050:#f0eee7;
  --paper:#f3f1ea;            /* bone ground */
  --paper-raise:#faf8f2;      /* raised surface */

  /* --- signal accent (used with restraint: CTA / active / curve peak) --- */
  --signal:#ff4d2e;           /* vermilion */
  --signal-deep:#d43411;      /* AA-safe on paper for text */
  --signal-wash:rgba(255,77,46,.10);

  /* --- oscilloscope secondary (data lines only, never chrome) --- */
  --scope:#1f8f5f;            /* measurement green, curve baseline */

  /* --- semantic (light default) --- */
  --bg:var(--paper);
  --surface:var(--paper-raise);
  --surface-sunk:#eceae2;
  --text:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --border:rgba(18,19,23,.14);
  --border-strong:rgba(18,19,23,.30);
  --hairline:rgba(18,19,23,.08);
  --ok:#1f8f5f; --warn:#b4690e; --danger:#c0362c;
  --ring:color-mix(in srgb, var(--signal) 55%, transparent);
  --grid-line:rgba(18,19,23,.055);

  /* --- type --- */
  --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --font-text:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",ui-monospace,monospace;

  --step--2:clamp(.68rem,.66rem+.1vw,.74rem);
  --step--1:clamp(.78rem,.75rem+.18vw,.86rem);
  --step-0:clamp(.95rem,.92rem+.22vw,1.04rem);
  --step-1:clamp(1.12rem,1.05rem+.4vw,1.34rem);
  --step-2:clamp(1.45rem,1.3rem+.8vw,2rem);
  --step-3:clamp(2rem,1.6rem+1.9vw,3.1rem);
  --step-4:clamp(2.7rem,2rem+3.4vw,4.9rem);
  --step-5:clamp(3.4rem,2.2rem+5.6vw,7.4rem);

  /* --- space (4px base, one scale — no arbitrary values downstream) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  --s-24:96px; --s-32:128px;
  --rhythm:clamp(80px,12vh,140px);      /* the ONE vertical section rhythm */
  --gutter:clamp(20px,4vw,64px);
  --maxw:1240px;

  /* --- surface language (≤3 radii, ONE shadow voice, ONE border) --- */
  --r-1:3px; --r-2:8px; --r-3:16px;
  --shadow-1:0 1px 0 rgba(18,19,23,.05), 0 1px 2px rgba(18,19,23,.06);
  --shadow-2:0 10px 30px -14px rgba(18,19,23,.28);
  --shadow-3:0 30px 70px -30px rgba(18,19,23,.40);

  /* --- motion: the "damped settle" signature (precise/technical register) --- */
  --ease-settle:cubic-bezier(.22,1,.36,1);   /* measurement settling, near-zero overshoot */
  --ease-in:cubic-bezier(.6,0,.9,.2);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.3,1.3,.5,1);   /* tiny overshoot, steppers/toggles only */
  --t-micro:.13s; --t-ui:.24s; --t-content:.42s; --t-drama:.72s;
}

:root[data-theme="dark"]{
  --bg:#0d0e12;
  --surface:#15171d;
  --surface-sunk:#0a0b0e;
  --text:#eef0f4;
  --text-muted:#9aa1ad;
  --text-faint:#6b727e;
  --border:rgba(238,240,244,.14);
  --border-strong:rgba(238,240,244,.32);
  --hairline:rgba(238,240,244,.08);
  --signal-deep:#ff6b4d;      /* accent lifts on dark for AA */
  --grid-line:rgba(238,240,244,.06);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;
    animation-iteration-count:1!important;scroll-behavior:auto!important;}
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font:400 var(--step-0)/1.6 var(--font-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px;border-radius:var(--r-1)}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--surface-sunk)}
::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:20px;border:2px solid var(--surface-sunk)}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--ink-600)}