/*
  00-tokens.css — v37 "Brass & Chart" design tokens.
  Loaded after styles.css (which is wrapped in @layer legacy), so everything
  here is unlayered and wins the cascade without !important.

  Legacy variable names (--paper, --gold2, --cyan, …) are kept as aliases so
  every rule inside @layer legacy keeps working while inheriting v37 colors.
*/

:root {
  /* v40.32: the app has one authored parchment theme. `only light` prevents
     Chrome/Samsung automatic dark-page conversion from recolouring the UI. */
  color-scheme: only light;

  /* --- v37 palette --- */
  --tar: #171210;            /* deepest chrome */
  --hull: #241811;           /* shell surfaces: helm bar, nav, sheets chrome */
  --deck: #3b2c1d;           /* flat app backdrop */
  --chart: #efe4c3;          /* content surface */
  --chart-2: #e2d2a8;        /* inset surface: stripes, wells, inputs */
  --brass: #c08a2e;          /* the accent */
  --brass-bright: #e8c069;   /* brass on dark chrome */
  --lagoon: #1e9e97;         /* signal / interactive */
  --lagoon-deep: #14615c;

  /* --- legacy aliases (repoint old names at v37 values) --- */
  --bg: var(--deck);
  --bg2: var(--deck);
  --wood: var(--hull);
  --wood2: #3a2817;
  --wood3: #5a4327;
  --paper: var(--chart);
  --paper2: var(--chart-2);
  --paper3: #cdb98b;
  --gold: var(--brass);
  --gold2: var(--brass-bright);
  --cyan: var(--lagoon);

  /* --- text --- */
  --ink: #1d1711;
  --ink-soft: #4a3b28;
  --muted: #6e5b40;
  --faint: #948160;
  --line: rgba(30, 20, 10, .18);
  --line-strong: rgba(30, 20, 10, .38);
  --text: var(--ink);

  /* semantic colors unchanged (already tuned) */
  --danger: #c23826; --danger-bg: rgba(194, 56, 38, .13);
  --ok: #24733a;     --ok-bg: rgba(36, 115, 58, .13);
  --warn: #bd741b;   --warn-bg: rgba(189, 116, 27, .16);
  --blue: #2e6f8f;

  /* --- elevation (one scale, replaces ad-hoc shadows) --- */
  --e1: 0 1px 2px rgba(18, 11, 4, .18);
  --e2: 0 4px 12px rgba(18, 11, 4, .22);
  --e3: 0 16px 44px rgba(10, 6, 2, .45);
  --shadow: var(--e1);

  /* --- shared readable type roles; viewport width changes layout --- */
  --t0: 14px;
  --t1: 16px;
  --t2: 16px;
  --t3: 20px;
  --t4: 24px;

  /* --- space scale --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --gap: clamp(8px, 2.2vw, 14px);

  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --radius: var(--r-m);
  --tap: 44px;
  --max: 860px;

  /* --- type roles ---
     v37.8 accessibility pass: one legible family everywhere. The app must work
     fully offline (service worker + IndexedDB), so a self-hosted webfont would
     need bundling we can't guarantee; instead we lean on each platform's most
     readable native UI face — San Francisco (iOS/Mac), Roboto (Android),
     Segoe UI (Windows). These are screen-optimised, render instantly with no
     flash, and stay identical across every screen. `--font-display` maps to the
     same stack so headings and body never diverge. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: var(--font-ui);
  font-family: var(--font-ui);
}

/* Base elements: flat deck, sans UI text. */
html, body { background: var(--deck); color: var(--ink); color-scheme: only light; }
body { background: var(--deck); font-family: var(--font-ui); }

/* v40.34 Android/Samsung night-mode defence. Some mobile browsers preserve
   the authored parchment backgrounds after `color-scheme: only light`, but
   still repaint native control text with their dark-mode white foreground.
   Every app control already has an authored CSS `color`; pinning WebKit's
   painted text fill to that colour prevents the half-converted white-on-paper
   result without changing the palette or disabling accessibility preferences. */
input, select, textarea, button, option {
  color-scheme: only light;
  -webkit-text-fill-color: currentColor;
}

/* v42.43: four weight roles, not twenty-seven numbers. The CSS held 400, 500,
   550, 600, 650, 700, 720, 740, 750, 760, 780, 800, 850, 900, 950 and 1000,
   with 800 and 900 used 203 times between them — which is why the app read as
   shouty rather than smooth. Everything now maps to one of these four, so
   emphasis is a decision made once, here.
     body     normal running text
     emph     a value, a name, a chip — "this matters in this line"
     head     section and card headings
     display  screen titles and the loudest numbers */
:root {
  --fw-body: 400;
  --fw-emph: 600;
  --fw-head: 700;
  --fw-display: 800;
}

/* Inline <b> and <strong> are written straight into the markup in 260 places,
   so browser-default bold made emphasis a per-sentence decision. Pinned to the
   emphasis role, they now match everything else until they can be replaced
   with semantic classes. */
b, strong { font-weight: var(--fw-emph); }

h1, h2, h3 { font-family: var(--font-ui); }
h1 { font-family: var(--font-display); font-weight: var(--fw-body); }

/* v37.8 accessibility: force the single UI family across the whole app. The
   legacy stylesheet (in @layer legacy) hard-codes Georgia/serif on many
   headings, buttons, titles and stat labels; because this rule sits in the
   default (unnamed) layer it outranks anything in @layer legacy, so one family
   now applies everywhere without hunting down every legacy declaration.
   Icon fonts and the monospace `.code` chip opt back out just below. */
body, body * {
  font-family: var(--font-ui);
}
.code, code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Numbers never jitter. */
.metric .value, .stat-score, .stat-mod, .row-value, .step-qty, .chip,
.summary-pill, .component-hp, .infamy-value, .lrow-end, .tile .value {
  font-variant-numeric: tabular-nums;
}

/* Focus visibility, one style everywhere. */
:focus-visible { outline: 2px solid var(--lagoon); outline-offset: 2px; border-radius: 4px; }

/* Scrollable rails: thin, quiet scrollbars. */
.helm-rail, .seg, .status-chips, .pane-chips, .duty-chips, .stat-strip, .combat-tab-bar {
  scrollbar-width: thin; scrollbar-color: rgba(232,192,105,.35) transparent;
}
.helm-rail::-webkit-scrollbar, .seg::-webkit-scrollbar, .status-chips::-webkit-scrollbar,
.pane-chips::-webkit-scrollbar, .duty-chips::-webkit-scrollbar { height: 4px; }
.helm-rail::-webkit-scrollbar-thumb, .seg::-webkit-scrollbar-thumb,
.status-chips::-webkit-scrollbar-thumb, .pane-chips::-webkit-scrollbar-thumb,
.duty-chips::-webkit-scrollbar-thumb { background: rgba(232,192,105,.3); border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}