/* The Vitals — tokens.
   Mounted in the Desk, shell/public/shell/editorial.css owns every --desk-* token (its :root:root wins over the
   fallbacks below, which load first). At the bare origin (127.0.0.1:8794, no Desk shell) the same values apply
   from here, with a system font stack. Dark mode is the Desk mechanism: color-scheme + light-dark(), stamped by
   [data-theme] (desk:theme). No literal colours anywhere else in Vitals CSS.

   Chart tokens (spec §8.4): Desk blue for data; teal is retired; clay only for data trouble; never green. */

:root {
  color-scheme: light dark;
  --desk-header-height: 54px;
  --desk-sidebar-width: 200px;
  --desk-tabbar-height: 56px;
  --desk-gutter: 24px;
  --desk-title-size: 48px;
  --desk-figure-size: clamp(32px, 3.5vw, 44px);
  --desk-ground: light-dark(#e9dfc8, #25251f);
  --desk-paper: light-dark(#f8f0dc, #303129);
  --desk-raised: light-dark(#fff8e8, #393b32);
  --desk-ink: light-dark(#252a25, #f3eedc);
  --desk-muted: light-dark(#67624f, #bbbba8);
  --desk-rule: light-dark(#bdb69e, #5c6150);
  --desk-blue: light-dark(#304b9c, #abbaff);
  --desk-clay: light-dark(#b44e30, #eca085);
  --desk-yellow: light-dark(#efd64a, #736326);
  --desk-soft: light-dark(#e2e5cc, #414934);
  --desk-green: light-dark(#415c40, #b2c996);
  --desk-selection: light-dark(#eee1a2, #4b4c2e);
  --desk-shadow: light-dark(#24291b20, #00000040);
  /* Bare-origin fallback type: the Desk fonts load only through the shell. */
  --desk-font: "Desk Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --desk-display: "Desk Display", "Arial Black", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --desk-mono: "Desk Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hover: color-mix(in srgb, var(--desk-ink) 6%, transparent);
  --shadow: 3px 3px 0 var(--desk-shadow);
  --shadow-sm: 0 2px 0 var(--desk-shadow);
  --shadow-lg: 5px 6px 0 var(--desk-shadow);
  --radius: 2px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---- Vitals chart tokens (§8.4), defined from the Desk tokens --------------------------------------------- */
:root {
  --v-series: var(--desk-blue);                                    /* dots, lines, bars — 7.1:1 / 7.0:1 on paper */
  /* The usual band: a translucent blue tint of whatever the chart sits on (13% light, 18% dark). Its numbers are
     always printed in text, so it never carries meaning alone. */
  --v-band: light-dark(color-mix(in srgb, var(--desk-blue) 13%, transparent), color-mix(in srgb, var(--desk-blue) 18%, transparent));
  --v-ref: var(--desk-muted);                                      /* median, compare ghost, band ends (dashed 4/3) */
  --v-ink: var(--desk-ink);                                        /* crosshair, selection ring, workouts, events rail */
  /* Sleep shading, always labelled "asleep"; a quiet ground in dark mode, not an olive slab. */
  --v-sleep: light-dark(var(--desk-soft), color-mix(in srgb, var(--desk-soft) 45%, var(--desk-paper)));
  --v-mark: var(--desk-yellow);                                    /* the callout highlighter, with ▲/▼ and words */
  --v-select: var(--desk-selection);                               /* a selected life event's dates */
  --v-grid: var(--desk-rule);
  --v-trouble: var(--desk-clay);                                   /* ONLY data trouble */
  /* Clay as small TEXT (warnings, 12–13px): a quarter ink, so it reads ≥ 4.5:1 on the ground and paper in both
     themes (light 5.2 / 6.0, dark 8.5 / 7.3; plain clay is 3.9 on the light ground). Borders and glyphs stay
     --desk-clay. */
  --v-clay-text: color-mix(in srgb, var(--desk-clay) 75%, var(--desk-ink));
  --v-paper: var(--desk-paper);

  /* Migration (§8.4): the old chart and press-kit tokens map onto the Desk tokens until nothing reads them. */
  --trace: var(--v-series);
  --trace-band: var(--v-band);
  --trace-cmp: var(--v-ref);
  --coverage-ok: var(--v-band);
  --coverage-gap: color-mix(in srgb, var(--v-trouble) 30%, transparent);
  --grid: var(--v-grid);
  --epoch-line: var(--v-ref);
  --bg: var(--desk-ground); --surface: var(--desk-paper); --card: var(--desk-paper);
  --ink: var(--desk-ink); --mut: var(--desk-muted); --faint: var(--desk-muted);
  --bd: var(--desk-rule); --bd-strong: var(--desk-ink);
  --accent: var(--desk-blue); --accent-ink: var(--desk-paper);
  --over: var(--desk-clay); --warn: var(--desk-clay); --ok: var(--desk-green);
  --font: var(--desk-font); --display: var(--desk-display); --mono: var(--desk-mono);
}

@media (max-width: 900px) {
  :root { --desk-gutter: 16px; --desk-title-size: 40px; }
}