/* ============================================================================
   ONYX KILN — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   A restrained, engineered design language for a regulated-buyer enterprise
   product. Ink-on-paper canvas, a single disciplined accent, the Onyx navy as
   the deep structural anchor. No gradients-as-decoration, no drop-shadow soup,
   no emoji. Typography and space carry the weight.

   Shared by index.html (wizard) + models.html (model guide).
   Reusable across the ACC-09 swarm board.
   Claim level: Exploring.
   ========================================================================== */

:root {
  /* ── Palette — ink, paper, one accent ───────────────────────────────────
     The Onyx brand elevated. Navy is the deep anchor (surfaces of intent);
     near-black ink carries text; a single teal accent does all the signalling.
     Amber is rationed to a true-warning role only. */

  --ink-900: #0B0F17;   /* near-black — primary text, deepest surfaces */
  --ink-800: #161C28;   /* navy-black — dark surface (panels, header) */
  --ink-700: #1B2A4A;   /* Onyx navy — brand anchor, deep fills */
  --ink-600: #2C3A57;   /* raised navy line on dark */
  --ink-500: #45526E;   /* secondary text on light */
  --ink-400: #636E81;   /* muted text, captions (AA on canvas) */
  --ink-300: #9AA3B2;   /* faint text on light, labels on dark */
  --ink-200: #C9CFD9;   /* hairlines on light, disabled */

  --paper-0:  #FFFFFF;  /* card surface */
  --paper-50: #FBFBFC;  /* page canvas (warm near-white) */
  --paper-100:#F4F5F7;  /* sunken / hover fill on light */
  --paper-150:#ECEEF1;  /* selected fill, table zebra */

  --line:        #E4E6EB;  /* default hairline */
  --line-strong: #D5D9E0;  /* emphasised hairline */
  --line-dark:   rgba(255,255,255,0.10); /* hairline on dark surfaces */

  --accent:      #0E7C94;  /* teal, recalibrated for AA on white (4.6:1) */
  --accent-600:  #0A6478;  /* pressed / text-on-light accent (6.3:1) */
  --accent-300:  #4FB8CE;  /* accent on dark surfaces */
  --accent-tint: #ECF6F9;  /* faint accent wash (selected radio, info) */
  --accent-line: #BFE0E8;  /* accent hairline */

  --warn:        #9A5B00;  /* amber, darkened for AA text on tint + white */
  --warn-300:    #E0B25A;  /* amber on dark */
  --warn-tint:   #FBF4E6;  /* faint amber wash */
  --warn-line:   #EAD7A8;

  --pos:   #1A7F4B;        /* confirmation green (used sparingly) */
  --neg:   #B23A2E;        /* error / blocking red */
  --neg-tint: #FBEEEC;

  /* ── Type scale — 1.25 minor-third modular scale, base 16px ──────────────
     Refined system stack (SF / Segoe UI Variable / Inter-class) — no web-font
     payload, no AI-tell display face. Numerals run tabular for engineered
     figures (see --font-mono / .tnum). */

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

  --t-2xs: 0.694rem;   /* 11.1px — micro-labels, legal */
  --t-xs:  0.8rem;     /* 12.8px — captions, hints */
  --t-sm:  0.875rem;   /* 14px   — secondary body */
  --t-base:1rem;       /* 16px   — body */
  --t-md:  1.25rem;    /* 20px   — sub-heads */
  --t-lg:  1.5rem;     /* 24px   — step titles */
  --t-xl:  1.953rem;   /* 31px   — page titles */
  --t-2xl: 2.441rem;   /* 39px   — hero numerals / display */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-tight: -0.018em;  /* display / large headings */
  --tracking-snug:  -0.008em;  /* sub-heads */
  --tracking-wide:   0.08em;   /* eyebrow / overline caps */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    680;

  /* ── Space — strict 8pt system (with a 4pt half-step) ───────────────────── */
  --s-1:  0.25rem;  /*  4 */
  --s-2:  0.5rem;   /*  8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  2.5rem;   /* 40 */
  --s-8:  3rem;     /* 48 */
  --s-9:  4rem;     /* 64 */
  --s-10: 6rem;     /* 96 */

  /* ── Radii — tight, intentional. Nothing pill-shaped by default ─────────── */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  /* ── Elevation — light, single-source. No coloured glows ────────────────── */
  --shadow-sm: 0 1px 2px rgba(11,15,23,0.05),
               0 1px 1px rgba(11,15,23,0.04);
  --shadow-md: 0 1px 3px rgba(11,15,23,0.06),
               0 8px 24px -12px rgba(11,15,23,0.18);
  --shadow-lg: 0 2px 6px rgba(11,15,23,0.07),
               0 24px 48px -20px rgba(11,15,23,0.24);
  --ring: 0 0 0 3px rgba(14,124,148,0.22);  /* focus ring */

  /* ── Motion — fast, eased, never bouncy ─────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;
  --dur-3: 240ms;

  --measure: 68ch;       /* readable line length */
  --container: 56rem;    /* 896px wizard column */
  --container-wide: 72rem;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink-900);
  background: var(--paper-50);
  min-height: 100vh;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular, engineered numerals — pricing, counts, dates */
.tnum, .num, .price-val, .price-figure, .rev-count, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

a { color: var(--accent-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Focus — visible, consistent, keyboard-first ────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Inline icon system — line icons, 1.5px stroke, currentColor ─────────── */
.ic {
  width: 1em; height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* eyebrow / overline */
.overline {
  font-size: var(--t-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-400);
}

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