/* ==========================================================================
   Design tokens — Tax and Finance Website Design System (version: alpha)

   Single source of truth. Every value below comes from the design spec; the
   dark block is the same roles re-derived, not a second palette invented from
   scratch.

   Two rules from the spec are encoded structurally rather than by convention:
     * status colours (ok / warning / error / neutral) exist ONLY as --ok,
       --warning, --error, --neutral. There is no --amber or --green alias, so a
       decorative use has nothing to reach for.
     * charts get their own triples (--chart-1/2/3) so a chart line can never
       impersonate a warning.

   DARK MODE — why the light values cannot simply be reused:
   contrast is relative luminance against the canvas, so flipping the canvas
   inverts every ratio. Measured against the dark canvas, the light ramp fails
   outright: --primary 1.46:1, --ok 3.41:1, --error 3.06:1, --body 2.96:1 — all
   below the 4.6:1 floor the spec sets for text. So dark keeps the same token
   NAMES and re-derives the values. Anything that reads a token gets both themes
   for free; nothing in the components needs a theme branch.

   Specificity note: `[data-theme="dark"]` is (0,1,0) and `:root` is (0,1,0), so
   source order decides — it still wins because it comes later. The explicit
   `html[data-theme="dark"]` selector below makes that unambiguous.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Colors ──────────────────────────────────────────────────────────── */
  --primary:        #1b2f6b;   /* the only brand colour. 12.6:1 on white */
  --primary-press:  #13224f;
  --on-primary:     #ffffff;

  --ink:            #0a0b0d;   /* headings and numbers */
  --body:           #5b616e;   /* copy */
  --mute:           #6a707a;   /* captions, data sources */

  --hairline:       #dee1e6;
  --hairline-soft:  #eef0f3;
  --canvas:         #ffffff;
  --surface-soft:   #f5f7fa;
  --label-bg:       #eef1f9;

  /* The footer is the one deliberately dark surface. It gets its own token
     rather than reusing --ink: in dark mode --ink is near-white text, so
     `background: var(--ink)` would invert the footer into the brightest block
     on the page and pull the eye to the least important content. */
  --footer-bg:      #0a0b0d;
  --on-ink:         #ffffff;   /* footer text */
  --ink-line:       #23262d;   /* footer divider */

  /* Status — a status always has a symbol AND a word, never colour alone. */
  --ok:             #047a4a;
  --ok-bg:          #e6f7ef;
  --warning:        #8a5a00;
  --warning-bg:     #fff3d6;
  --error:          #c0202d;
  --error-bg:       #fde9ea;
  --neutral:        #5b616e;
  --neutral-bg:     #eef0f3;

  /* Charts — deliberately distinct from statuses */
  --chart-1:        #2a78d6;
  --chart-2:        #eb6834;
  --chart-3:        #1baf7a;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display:     44px;  --fw-display: 600;  --lh-display: 1.1;   --ls-display: -1.2px;
  --fs-headline-lg: 32px;  --fw-headline-lg: 600; --lh-headline-lg: 1.15; --ls-headline-lg: -0.8px;
  --fs-headline-md: 20px;  --fw-headline-md: 600; --lh-headline-md: 1.3;
  --fs-lead:        20px;  --fw-lead: 400;      --lh-lead: 1.5;
  --fs-body-md:     16px;  --fw-body-md: 400;   --lh-body-md: 1.55;
  --fs-label-md:    15px;  --fw-label-md: 600;  --lh-label-md: 1.3;
  --fs-label-sm:    13px;  --fw-label-sm: 500;  --lh-label-sm: 1.4;
  --fs-number:      16px;  --fw-number: 600;    --lh-number: 1.3;
  --fs-stat:        26px;  --fw-stat: 600;      --lh-stat: 1.1;

  /* Inner tool pages use a smaller H1 than the hero so long titles stay on
     one or two lines. */
  --fs-h1-inner:    34px;

  /* Tabular figures: amounts, IDs, account numbers and years must line up in
     columns. Applied to every numeric surface via .ds-num / the number type. */
  --ff-tnum: tabular-nums;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-card:         16px;
  --r-button:       16px;
  --r-search:       16px;
  --r-button-inner: 10px;
  --r-input:        12px;
  --r-tab:          12px;
  --r-label:        8px;
  --r-badge:        999px;   /* reserved for labels — NEVER buttons */

  /* ── Spacing (8px grid) ──────────────────────────────────────────────── */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-xxl:  48px;
  --sp-hero: 72px;

  --max-width:   1240px;   /* page container */
  /* results and tables narrow to 1060px — see .ds-results */

  /* ── Elevation ───────────────────────────────────────────────────────── */
  /* Flat, with one exception: the search field floats. */
  --sh-search: 0 12px 32px -12px rgba(10, 11, 13, .18);
  --sh-card:   0 8px 28px rgba(10, 11, 13, .06);

  /* Canvas the charts draw on, for JS consumers (Chart.js, TradingView) that
     cannot read a CSS variable. Kept as a token so the two themes agree. */
  --chart-canvas:  #ffffff;
  --chart-grid:    rgba(10, 11, 13, .06);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --nav-h:      72px;
  --card-pad:   24px;
}

/* ==========================================================================
   DARK THEME
   Same roles, re-derived. Every pair below was measured against #12141a; the
   lowest text ratio in the set is --mute on --label-bg at 5.40:1, which clears
   the spec's 4.6:1 floor. Status foregrounds are tested twice: on their own
   tinted background (a pill) and on the canvas (bare text).

   The canvas is #12141a rather than pure black on purpose: a #000 canvas makes
   every hairline and every --surface-soft read as a seam, and it crushes the
   contrast range available for "quieter than body" text.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Brand: the navy is a dark colour, so on a dark canvas it inverts to a
     light periwinkle. Same hue family, 7.75:1 on the canvas. */
  --primary:        #8aa4ff;
  --primary-press:  #a8bcff;
  --on-primary:     #10131b;   /* text ON the brand fill — dark, not white */

  --ink:            #f2f4f8;
  --body:           #b9bfcb;
  --mute:           #8f97a6;

  --hairline:       #2b2f3a;
  --hairline-soft:  #212530;
  --canvas:         #12141a;
  --surface-soft:   #191c24;
  --label-bg:       #1d2230;

  /* Recessed one step below the canvas instead of inverting to bright. */
  --footer-bg:      #0b0d12;
  --on-ink:         #c9cfda;
  --ink-line:       #2b2f3a;

  /* Status: darker tints, brighter foregrounds. Each foreground clears 4.6:1
     both on its own tint and as bare text on the canvas. */
  --ok:             #3ddc97;
  --ok-bg:          #10291f;
  --warning:        #f0b23c;
  --warning-bg:     #2b2211;
  --error:          #ff7b72;
  --error-bg:       #2d1618;
  --neutral:        #9aa2b0;
  --neutral-bg:     #22262f;

  --chart-1:        #5b9dff;
  --chart-2:        #ff8a5c;
  --chart-3:        #3ddc97;

  /* Elevation reads as a light glow on dark, not a shadow. */
  --sh-search: 0 12px 32px -12px rgba(0, 0, 0, .7);
  --sh-card:   0 8px 28px rgba(0, 0, 0, .45);

  --chart-canvas:  #191c24;
  --chart-grid:    rgba(255, 255, 255, .06);
}