/* ===========================================================================
   tokens.css — one design system, three trade identities.
   Each trade sets --brand-* and --font-* on :root; everything else derives.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Neutral ramp: warm gray, not blue-gray. Reads as paper, not screen. -- */
  --n-00: #ffffff;
  --n-05: #faf9f7;
  --n-10: #f2f1ed;
  --n-15: #e9e7e2;
  --n-20: #dedbd4;
  --n-30: #c6c2b8;
  --n-40: #a5a096;
  --n-50: #837e74;
  --n-60: #635f57;
  --n-70: #47443e;
  --n-80: #2e2c28;
  --n-90: #1c1b18;
  --n-95: #121110;

  /* --- Brand: overridden per trade. Defaults are the neutral product brand. - */
  --brand:        #2f6f5e;
  --brand-deep:   #1e4a3e;
  --brand-tint:   #e6efec;
  --brand-line:   #b9d2c9;
  --brand-on:     #ffffff;
  --brand-fg:     var(--brand-deep);   /* readable brand text on a brand tint */
  /* How far a stage colour is mixed toward the surface / text for chips. */
  --tone-tint-mix: 15%;
  --tone-ink-mix:  72%;
  --tone-line-mix: 38%;
  --accent:       #c8802a;
  --accent-tint:  #fbf0e1;

  /* --- Semantic status ------------------------------------------------------ */
  --ok:        #2d7a4f;  --ok-tint:   #e4f2e9;  --ok-line:   #a9d4ba;
  --warn:      #a86a12;  --warn-tint: #fbeedb;  --warn-line: #e6c489;
  --bad:       #b23b3b;  --bad-tint:  #fbe9e9;  --bad-line:  #eab4b4;
  --info:      #2a6099;  --info-tint: #e7f0fa;  --info-line: #a9c8e6;
  --idle:      #6a655c;  --idle-tint: #efedea;  --idle-line: #d4d0c8;

  /* --- Surfaces ------------------------------------------------------------- */
  --bg:          var(--n-10);
  --surface:     var(--n-00);
  --surface-2:   var(--n-05);
  --surface-3:   var(--n-10);
  --line:        var(--n-20);
  --line-soft:   var(--n-15);
  --line-strong: var(--n-30);
  --text:        var(--n-90);
  --text-2:      var(--n-60);
  --text-3:      var(--n-50);
  --text-on-dark:#f6f5f2;

  /* --- Type ----------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-11: 0.6875rem;  --t-12: 0.75rem;   --t-13: 0.8125rem;
  --t-14: 0.875rem;   --t-15: 0.9375rem; --t-16: 1rem;
  --t-18: 1.125rem;   --t-21: 1.3125rem; --t-26: 1.625rem;
  --t-32: 2rem;       --t-42: 2.625rem;  --t-56: 3.5rem;

  /* --- Space (4px base) ------------------------------------------------------ */
  --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;

  /* --- Radius & elevation ---------------------------------------------------- */
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(28,27,24,.06), 0 1px 1px rgba(28,27,24,.04);
  --sh-2: 0 2px 4px rgba(28,27,24,.05), 0 6px 14px rgba(28,27,24,.06);
  --sh-3: 0 8px 18px rgba(28,27,24,.08), 0 22px 48px rgba(28,27,24,.10);
  --sh-pop: 0 12px 28px rgba(28,27,24,.14), 0 38px 76px rgba(28,27,24,.16);

  /* --- Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --fast: 120ms; --mid: 220ms; --slow: 420ms;

  --rail-w: 272px;
  --rail-w-min: 68px;
  --topbar-h: 60px;
}

/* --- Dark theme ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--n-95);
    --surface:     #1a1916;
    --surface-2:   #222019;
    --surface-3:   #2a2822;
    --line:        #35322b;
    --line-soft:   #2a2822;
    --line-strong: #4a463d;
    --text:        #f3f1ec;
    --text-2:      #b3ada1;
    --text-3:      #8d887d;
    --brand-fg:    color-mix(in srgb, var(--brand) 42%, #ffffff);
    --tone-tint-mix: 28%; --tone-ink-mix: 40%; --tone-line-mix: 50%;
    --brand-tint:  color-mix(in srgb, var(--brand) 24%, #15140f);
    --brand-line:  color-mix(in srgb, var(--brand) 44%, #15140f);
    --accent-tint: color-mix(in srgb, var(--accent) 22%, #15140f);
    --ok-tint:   #17281d; --ok-line:   #2b4a36;
    --warn-tint: #2b2113; --warn-line: #4d3a1b;
    --bad-tint:  #2c1918; --bad-line:  #4d2a28;
    --info-tint: #16212e; --info-line: #27405c;
    --idle-tint: #232119; --idle-line: #3b382f;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.3);
    --sh-3: 0 10px 24px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.4);
    --sh-pop: 0 16px 40px rgba(0,0,0,.6), 0 44px 90px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --bg:          var(--n-95);
  --surface:     #1a1916;
  --surface-2:   #222019;
  --surface-3:   #2a2822;
  --line:        #35322b;
  --line-soft:   #2a2822;
  --line-strong: #4a463d;
  --text:        #f3f1ec;
  --text-2:      #b3ada1;
  --text-3:      #8d887d;
  --brand-fg:    color-mix(in srgb, var(--brand) 42%, #ffffff);
  --tone-tint-mix: 28%; --tone-ink-mix: 40%; --tone-line-mix: 50%;
  --brand-tint:  color-mix(in srgb, var(--brand) 24%, #15140f);
  --brand-line:  color-mix(in srgb, var(--brand) 44%, #15140f);
  --accent-tint: color-mix(in srgb, var(--accent) 22%, #15140f);
  --ok-tint:   #17281d; --ok-line:   #2b4a36;
  --warn-tint: #2b2113; --warn-line: #4d3a1b;
  --bad-tint:  #2c1918; --bad-line:  #4d2a28;
  --info-tint: #16212e; --info-line: #27405c;
  --idle-tint: #232119; --idle-line: #3b382f;
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.3);
  --sh-3: 0 10px 24px rgba(0,0,0,.5), 0 28px 60px rgba(0,0,0,.4);
  --sh-pop: 0 16px 40px rgba(0,0,0,.6), 0 44px 90px rgba(0,0,0,.5);
}

/* --- Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--t-14);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
html, body { overflow-x: clip; }   /* nothing in the app should scroll sideways */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; }
ul, ol { list-style: none; padding: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

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