/* House design tokens. Source of truth: ../references/house-tokens.md (read it for the WHY and the rules).
   Drop into a page as-is, then specialize: swap --accent via data-accent, override fonts for a brand
   (TRACI frontend keeps Tire Rack brand type and color; spacing, radius, motion and the rules still apply).
   Dark is the default for Dylan's pages (dylan-artifacts); an app may lead light by setting data-theme="light".
   Every text pair here clears WCAG AA 4.5:1 on ground, surface and raise in both themes (measured 25 Sep 2026). */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  /* neutrals: faintly green-gray tinted, never #000 or #fff */
  --ground: #0f1211;      /* page */
  --surface: #161a19;     /* cards, lists, inputs */
  --raise: #1e2322;       /* hover fills, wells, chips */
  --ink: #e4e7e3;         /* primary text      15.1:1 on ground */
  --ink-2: #a6ada8;       /* secondary text     8.2:1 */
  --ink-3: #8a918c;       /* meta, timestamps   5.8:1 (4.9 on raise); the faintest TEXT allowed */
  --line: rgba(228, 231, 227, .10);        /* hairline borders, dividers */
  --line-strong: rgba(228, 231, 227, .18); /* input borders, hovered cards */
  /* status: only ever means status. No yellow, gold, amber or orange anywhere (Dylan, 24 Sep 2026) */
  --ok: #6fcf97; --warn: #e685c6; --bad: #f08080; --info: #8fb0f0;
  --shadow-pop: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 1px var(--line-strong); /* overlays only */
  --scrim: rgba(5, 7, 6, .6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #f4f4f0;
  --surface: #fbfbf9;
  --raise: #ebece7;
  --ink: #171a19;         /* 15.9:1 on ground */
  --ink-2: #4d5450;       /*  7.1:1 */
  --ink-3: #626965;       /*  5.1:1 (4.7 on raise) */
  --line: rgba(23, 26, 25, .10);
  --line-strong: rgba(23, 26, 25, .20);
  --ok: #1a7042; --warn: #a03379; --bad: #b33636; --info: #2f5fb3;
  --shadow-pop: 0 8px 20px rgba(20, 24, 22, .12), 0 0 0 1px var(--line);
  --scrim: rgba(20, 24, 22, .35);
}

/* one accent per page, swappable. teal is the default; blue, violet, magenta, green are the alternates */
:root, :root[data-accent="teal"]            { --accent: #6cc4b0; --on-accent: #07130f; }
:root[data-theme="light"],
:root[data-theme="light"][data-accent="teal"] { --accent: #1c6b5c; --on-accent: #ffffff; }
:root[data-accent="blue"]    { --accent: #86a8f5; --on-accent: #0b0f14; }
:root[data-theme="light"][data-accent="blue"]    { --accent: #2d5bc4; --on-accent: #ffffff; }
:root[data-accent="violet"]  { --accent: #b39af5; --on-accent: #0b0f14; }
:root[data-theme="light"][data-accent="violet"]  { --accent: #6440c9; --on-accent: #ffffff; }
:root[data-accent="magenta"] { --accent: #ec8cc8; --on-accent: #0b0f14; }
:root[data-theme="light"][data-accent="magenta"] { --accent: #a52f79; --on-accent: #ffffff; }
:root[data-accent="green"]   { --accent: #72cf8f; --on-accent: #0b0f14; }
:root[data-theme="light"][data-accent="green"]   { --accent: #1f7a45; --on-accent: #ffffff; }

:root {
  /* soft fills derived from the accent/status, so they follow the theme */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --ok-soft: color-mix(in srgb, var(--ok) 14%, var(--surface));
  --warn-soft: color-mix(in srgb, var(--warn) 14%, var(--surface));
  --bad-soft: color-mix(in srgb, var(--bad) 14%, var(--surface));
  --info-soft: color-mix(in srgb, var(--info) 14%, var(--surface));

  /* type. product pair: one sans + mono. editorial pair adds the serif for display only (never on dashboards) */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  /* scale: 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36, display 48 (phone 36) and 64 (phone 40) */
  --t-label: 600 12px/1.35 var(--font-sans);   /* eyebrow/tag; tracking +.06em, sentence case */
  --t-small: 400 13px/1.45 var(--font-sans);
  --t-ui: 500 14px/1.4 var(--font-sans);       /* buttons, nav, dense rows */
  --t-body: 400 16px/1.55 var(--font-sans);
  --t-lead: 400 18px/1.5 var(--font-sans);
  --t-h3: 600 22px/1.3 var(--font-sans);       /* tracking -.01em */
  --t-h2: 600 28px/1.2 var(--font-sans);       /* tracking -.015em */
  --t-h1: 650 36px/1.1 var(--font-sans);       /* tracking -.02em */
  --t-display: 500 clamp(36px, 6vw, 48px)/1.04 var(--font-display);
  --t-display-xl: 500 clamp(40px, 8vw, 64px)/1.0 var(--font-display);
  --track-tight: -.015em; --track-label: .06em;

  /* spacing: 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px;                 /* 16 phone, 24 tablet, 40 desktop (see media query) */
  --section: 40px;                /* top padding of a section; bottom is 0, the next top carries the rhythm */
  --w-wide: 1200px; --w-prose: 720px; --w-chat: 760px;

  /* radius: three steps plus full. outer radius = inner radius + the padding between them */
  --r1: 4px;   /* tags, chips, small controls, focus ring */
  --r2: 8px;   /* buttons, inputs, cards, list containers */
  --r3: 12px;  /* sheets, dialogs, the outermost panel */
  --r-full: 999px; /* avatars, dots, switches only */

  /* motion (short, property-specific, never `transition: all`) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* anything entering, opening, responding */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* something already on screen moving or morphing */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);   /* sheets and drawers */
  --d-press: 120ms; --d-hover: 160ms; --d-exit: 160ms; --d-enter: 220ms; --d-layout: 240ms; --d-drawer: 300ms;
  --stagger: 40ms; --shift: 6px; --press-scale: .97;

  --hit: 44px;       /* phone touch target; 40px ok for dense desktop rows; 24px is the absolute floor */
  --focus: 2px solid var(--accent);
}
@media (min-width: 720px)  { :root { --gutter: 24px; --section: 56px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --section: 64px; } }
@media (prefers-reduced-motion: reduce) {
  /* keep fades and color changes, drop movement */
  :root { --shift: 0px; --press-scale: 1; --d-enter: 120ms; --d-layout: 120ms; --d-drawer: 160ms; }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--t-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p, li { text-wrap: pretty; }
h1 { font: var(--t-h1); letter-spacing: -.02em; }
h2 { font: var(--t-h2); letter-spacing: var(--track-tight); }
h3 { font: var(--t-h3); letter-spacing: -.01em; }
.eyebrow { font: var(--t-label); letter-spacing: var(--track-label); color: var(--ink-2); }
.meta { font: var(--t-small); color: var(--ink-3); }
.num, time, code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--focus); outline-offset: 2px; border-radius: var(--r1); }
a { color: var(--accent); text-underline-offset: 2px; transition: color var(--d-hover) ease; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 36px; padding: 0 var(--s4);
  font: var(--t-ui); border-radius: var(--r2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background-color var(--d-hover) ease, border-color var(--d-hover) ease, transform var(--d-press) var(--ease-out); }
.btn:active { transform: scale(var(--press-scale)); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--raise); } .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); } }
@media (max-width: 719px) { .btn { min-height: var(--hit); } input, textarea, select { font-size: 16px; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s4); }
.tag { font: var(--t-label); letter-spacing: .02em; padding: 2px var(--s2); border-radius: var(--r1); background: var(--raise); color: var(--ink-2); }