/* ═══ IndyxQuant design tokens (UI redesign Step 2, 2026-11-05) ═════════════════
   One set of role names for every page, light and dark. Shared components (Step 3
   on) read these; pages built before them keep their own variables until they are
   moved over, so loading this file changes nothing on screen by itself.

   How it reaches every page: src/server.ts __injectTheme adds it to the <head> of
   every rendered page, before css/ix-deep-dark.css. All names start --tk- (the
   --ix-surface / --ix-line names already mean different things on several pages).

   Values: the light palette and its dark mirror from css/ix-deep-dark.css
   (--ixdd-*). Where the two older sets disagreed on gain, loss and warn, the value
   that reads at WCAG AA (4.5:1) on every ground is used: canvas, surface, raised,
   chip and its own soft fill (test/unit/design-tokens.test.js checks each pair).

   Semantic colours: exactly four, each with a soft fill and a line:
     gain  rises, profits, healthy      loss  falls, losses, breaches
     warn  needs attention, stale        neutral  unchanged, no signal
   Colour is never the only signal: pair them with an arrow or a +/- sign.
   Settings > Display (display-prefs-boot): a custom gain/loss pair (body.ix-updown)
   and colour-blind mode (body.ix-cvd) override gain and loss only. */

/* Only --tk- names and the .num utility are defined: the file is injected after each page's
   own CSS, so it must not set anything a page already sets (color-scheme, fonts, colours). */
:root {
  /* Surfaces, back to front. */
  --tk-canvas: #fbfaf8;      /* page background */
  --tk-surface: #ffffff;     /* cards, menus, inputs, chart grounds */
  --tk-raised: #fdfcfa;      /* a card inside a card, sticky headers */
  --tk-chip: #f4f1ec;        /* chips, hover, segmented controls */
  --tk-line: #efece6;        /* hairline dividers and card borders */
  --tk-line-2: #e4e0d8;      /* stronger rules, input borders */
  --tk-grid: #f1eee8;        /* chart grid */

  /* Text. */
  --tk-ink-1: #1c1a17;       /* primary text and figures */
  --tk-ink-2: #5c5751;       /* secondary text, labels */
  --tk-muted: #6f6a62;       /* captions, table heads, as-of times */

  /* Brand accent (not a gain/loss signal). */
  --tk-accent: #d97757;      /* marks, focus, charts' house series */
  --tk-accent-ink: #a94e2c;  /* accent text and links */
  --tk-accent-soft: #fbeee7; /* selected-row and active-tab fills */
  --tk-accent-fill: #b0532f; /* solid buttons */
  --tk-on-accent: #ffffff;   /* text on --tk-accent-fill (5.1:1) */
  --tk-focus: #a94e2c;       /* focus ring */

  /* Semantic: gain, loss, warn, neutral (+ soft fill, + line). */
  --tk-gain: #2a7350;    --tk-gain-soft: #e9f2ec;    --tk-gain-line: #c6ddc9;
  --tk-loss: #b8433a;    --tk-loss-soft: #f8ebe9;    --tk-loss-line: #efd6d2;
  --tk-warn: #8a5a0c;    --tk-warn-soft: #fbf3e2;    --tk-warn-line: #e8d9a8;
  --tk-neutral: #6f6a62; --tk-neutral-soft: #f4f1ec; --tk-neutral-line: #e4e0d8;

  /* Type. Inter for text and figures (tabular digits), Source Serif 4 for page titles. */
  --tk-font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --tk-font-serif: 'Source Serif 4', Georgia, serif;
  --tk-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* 8-step scale, 12-36px. Nothing renders under 11px; 12px is the smallest step. */
  --tk-fs-xs: 12px;   /* captions, table heads, badges */
  --tk-fs-sm: 13px;   /* table cells, secondary text */
  --tk-fs-base: 14px; /* body */
  --tk-fs-md: 16px;   /* card titles */
  --tk-fs-lg: 18px;   /* section titles */
  --tk-fs-xl: 22px;   /* KPI figures */
  --tk-fs-2xl: 28px;  /* hero figure, page title on a phone */
  --tk-fs-3xl: 36px;  /* page title */
  --tk-fs-min: 11px;  /* floor for anything outside the scale */
  --tk-lh-tight: 1.2; --tk-lh-normal: 1.5;
  --tk-fw-regular: 400; --tk-fw-medium: 500; --tk-fw-semibold: 600;

  /* Spacing (4px base). */
  --tk-sp-1: 4px; --tk-sp-2: 8px; --tk-sp-3: 12px; --tk-sp-4: 16px;
  --tk-sp-5: 20px; --tk-sp-6: 24px; --tk-sp-7: 32px; --tk-sp-8: 48px;

  /* Radius. */
  --tk-r-sm: 6px;    /* chips, inputs, small buttons */
  --tk-r-md: 10px;   /* buttons, boxes inside a card */
  --tk-r-lg: 14px;   /* cards, modals */
  --tk-r-pill: 999px;

  /* Shadows: cards are flat (border only); only things that float get a shadow. */
  --tk-shadow-none: none;
  --tk-shadow-overlay: 0 1px 2px rgba(28, 26, 23, 0.06), 0 8px 24px -8px rgba(28, 26, 23, 0.18); /* menus, popovers, toasts */
  --tk-shadow-modal: 0 2px 6px rgba(28, 26, 23, 0.08), 0 24px 64px -16px rgba(28, 26, 23, 0.32); /* dialogs, drawers */

  /* Motion. */
  --tk-dur-fast: 120ms; --tk-dur: 180ms; --tk-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark: light mirrored (same hues, js/ix-color-mirror.js). Screen only; print stays on paper. */
@media screen {
  :root[data-theme="dark"] {
    --tk-canvas: #121110; --tk-surface: #1a1917; --tk-raised: #201e1c; --tk-chip: #24221f;
    --tk-line: #2b2926; --tk-line-2: #36332f; --tk-grid: #242220;
    --tk-ink-1: #ece9e3; --tk-ink-2: #b8b2a9; --tk-muted: #9a948a;
    --tk-accent: #d97757; --tk-accent-ink: #d87753; --tk-accent-soft: #2c190d;
    --tk-accent-fill: #d97757; --tk-on-accent: #121110; --tk-focus: #d87753;
    --tk-gain: #53a076;    --tk-gain-soft: #132219;    --tk-gain-line: #2b4b31;
    --tk-loss: #ea695c;    --tk-loss-soft: #2b1816;    --tk-loss-line: #583935;
    --tk-warn: #b9893a;    --tk-warn-soft: #281c00;    --tk-warn-line: #514100;
    --tk-neutral: #9a948a; --tk-neutral-soft: #24221f; --tk-neutral-line: #36332f;
    --tk-shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --tk-shadow-modal: 0 2px 8px rgba(0, 0, 0, 0.45), 0 32px 80px -20px rgba(0, 0, 0, 0.8);
  }
}

/* Settings > Display. A custom or preset gain/loss pair (display-prefs-boot sets
   --ix-up / --ix-down and body.ix-updown) replaces gain and loss only. */
body.ix-updown { --tk-gain: var(--ix-up); --tk-loss: var(--ix-down); }
/* Colour-blind mode: gain travels on blue, loss stays red; values chosen to read at AA. */
body.ix-cvd { --tk-gain: #1d61c4; --tk-gain-soft: #e8f1f9; --tk-gain-line: #c3d8f0; --tk-loss: #b8433a; }
@media screen {
  :root[data-theme="dark"] body.ix-cvd { --tk-gain: #4f9cf0; --tk-gain-soft: #11202c; --tk-gain-line: #1f3a52; --tk-loss: #ea695c; }
}
/* A chosen accent colour (Settings > Display) carries to the accent marks. */
body.ix-accent { --tk-accent: var(--ix-accent); }

/* Figures: aligned digits everywhere a number is marked up as one. */
.num, .tk-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { :root { --tk-dur-fast: 0ms; --tk-dur: 0ms; } }