/* The mpriors tokens: colour, type, and the two font stacks, in light and
   dark — one file for the marketing site and the app, so the moment a
   visitor clicks "Open mpriors" they land on the same product.

   Served as /tokens.css to the site (packages/site, linked before
   site.css) and imported by the app's stylesheet (packages/app/src/
   styles.css), which bundles it. Change a value here and both follow.
   brand/guidelines.html describes the choices.

   Light is the base, so a browser that cannot report a preference gets it.
   Dark applies two ways: by system preference, unless the reader has forced
   light, or by explicit choice (data-theme on the root). The :not() guard
   is what lets "light" win over a dark system setting. */

/* Tokens from the basket implementation spec §08, light and dark.
   Palette B: gray band, blue segment, ink tick. Sign colours are text-only
   tokens contrast-matched to blue (VIEW-07). No orange, no flags in MVP.
   Contrast: every token that colours text (--ink, --muted, --blue, --up,
   --down, --warn) reads at 4.5:1 or better, the WCAG minimum for normal
   text, on --card, --desk and --row-plotted in its theme, with one known
   exception: the light --blue is the logo's blue (brand/logo) and reads
   4.4:1 on --card, 4.2:1 on --desk. The sign colours are also checked on
   their own pill (.pill.up, a 12% tint of themselves), where they are read
   most. Check a new value against every surface before changing one. */
:root {
  --desk: #faf9f5;
  --card: #ffffff;
  --ink: #0b0b0b;
  --muted: #6b6963;
  --blue: #2a78d6;
  /* Text or an icon drawn on a --blue fill: the avatar's initial, a step
     number. White on the light blue, the dark ground on the dark one. */
  --on-blue: #ffffff;
  /* The accent, muted: for structure that is blue by association — a
     selection ring, a hover border, a distribution band — never for the
     mark being read. One saturated blue per card is a signal; five is
     noise. Roughly --blue halfway to --hair2. */
  --blue-soft: #8fb0dc;
  --up: #167a55;
  --down: #b7433a;
  /* Something to look at, not a loss: the portfolio's warnings. */
  --warn: #805813;
  --band: #e4e3dc;
  --bandline: #c9c8bf;
  --hair: #e1e0d9;
  --hair2: #d7d6cf;
  --row-plotted: #f6f8fb;
  /* The session's open and close, ruled on an intraday chart: a marker,
     not a series, so a hue no palette slot owns — amber here, a light
     yellow in the dark theme, where anything muted vanishes. */
  --session: #8a6a4f;
  /* SERIES_PALETTE's first slot (lib/series.ts) — the mark a chart's first
     plotted name draws in. Never tied to --blue, though the two are close:
     a line needs only 3:1 against the card, text needs 4.5:1, so they were
     tuned separately (in dark mode they happen to be the same value). */
  --series-blue: #2a78d6;
  /* Slots two to eight. The same value in both themes today; a slot that
     reads flat on a dark card gets its own dark value here, as the blue
     did, and no code changes. */
  --series-violet: #8a63c9;
  --series-ochre: #b4842c;
  --series-teal: #3b9a8f;
  --series-plum: #c05f8e;
  --series-slate: #5c7ba1;
  --series-olive: #7d9440;
  --series-clay: #a1655a;
  /* The type scale: five sizes, named by role. Every font-size in this file
     is one of them; hierarchy inside a step comes from weight, case and
     colour, not from a half-pixel more or less (brand/guidelines.html §04).
       small  11  kickers, table headers, tags, legends, notes, provenance
       body   13  running text, table cells, values, controls
       title  15  a panel's or a card's title, a mid-size value
       read   18  a page title, a headline sentence, a standard card value
       number 26  the hero number
     Each is multiplied by --fs-scale, the reader's font-size preference
     (packages/app/src/fontSize.ts, FONT_SCALE; the values below are the
     only places it has to be kept in sync for CSS text). Chart/SVG text
     scales separately, in JS, from AXIS_FONT (11, the small step) in
     packages/charts; see the note next to FONT_SCALE for why. */
  --fs-scale: 1;
  --fs-small: calc(11px * var(--fs-scale));
  --fs-body: calc(13px * var(--fs-scale));
  --fs-title: calc(15px * var(--fs-scale));
  --fs-read: calc(18px * var(--fs-scale));
  --fs-number: calc(26px * var(--fs-scale));
}
:root[data-font-size='small'] { --fs-scale: 0.875; }
:root[data-font-size='large'] { --fs-scale: 1.25; }
/* Dark values apply two ways: system preference (unless the user forced
   light) or an explicit user choice. Both must work — a dark render under
   prefers-color-scheme with no data-theme override is a spec requirement. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --desk: #181817;
    --card: #2a2927;
    --ink: #ffffff;
    --muted: #a3a098;
    --blue: #5b9dff;
    --on-blue: #181817;
    --blue-soft: #4f79a8;
    --up: #2fb383;
    --down: #f47d73;
    --warn: #d9a441;
    --band: #343930;
    --bandline: #525242;
    --hair: #423f3a;
    --hair2: #5c5b4c;
    --row-plotted: #2c313a;
    --session: #b08f6e;
    --series-blue: #5b9dff;
    --series-violet: #8a63c9;
    --series-ochre: #b4842c;
    --series-teal: #3b9a8f;
    --series-plum: #c05f8e;
    --series-slate: #5c7ba1;
    --series-olive: #7d9440;
    --series-clay: #a1655a;
    --card-shine: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --desk: #181817;
  --card: #2a2927;
  --ink: #ffffff;
  --muted: #a3a098;
  --blue: #5b9dff;
  --on-blue: #181817;
  --blue-soft: #4f79a8;
  --up: #2fb383;
  --down: #f47d73;
  --warn: #d9a441;
  --band: #343930;
  --bandline: #525242;
  --hair: #423f3a;
  --hair2: #5c5b4c;
  --row-plotted: #2c313a;
  --session: #b08f6e;
  --series-blue: #5b9dff;
  --series-violet: #8a63c9;
  --series-ochre: #b4842c;
  --series-teal: #3b9a8f;
  --series-plum: #c05f8e;
  --series-slate: #5c7ba1;
  --series-olive: #7d9440;
  --series-clay: #a1655a;
  --card-shine: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* One type system: the system sans for everything, monospace only for
   code, formulas and URLs (brand/guidelines.html §04). Three corner radii:
   small for controls, tags and marks; medium for cards, panels and menus;
   the pill for pills and chips (a circle is 50%, not a fourth radius). */
:root {
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}