/*
  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);

  /* --- fluid type scale (360px → 860px) --- */
  --t0: clamp(.76rem, .72rem + .25vw, .84rem);
  --t1: clamp(.88rem, .84rem + .3vw, .97rem);
  --t2: clamp(1rem, .95rem + .4vw, 1.12rem);
  --t3: clamp(1.16rem, 1.05rem + .7vw, 1.4rem);
  --t4: clamp(1.35rem, 1.15rem + 1.2vw, 1.75rem);

  /* --- 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;
}

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

/* 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; }
}