/* peapod design tokens.
 *
 * The five swatches come from design-refs/pallete.avif: forest #0E3B2E, moss #1F5D4A,
 * sage #A8C6B8, mist #E9F1EE, slate #2B2F33. Each appears here exactly once, in the role
 * it is actually good at; everything else is derived from a named swatch by a stated
 * shift, so any value can be checked back to its source.
 *
 * THE GROUND HAD TO BE THE SLATE. Green carries sign meaning in this product. On a green
 * page a positive figure loses the one channel that makes it readable at a glance, and
 * the two light greens are far too bright to sit under a dark layout. That leaves the
 * slate, which frees the two forest greens for fills — where they read by hue rather
 * than by brightness.
 *
 * EVERY PAIR WAS COMPUTED, NOT EYEBALLED. On --surface: text 11.74, body 9.83, muted
 * 5.39, up 6.01, down 4.68, warn 7.21. On --raised, where the labels are smallest:
 * muted 4.66. Accent ink on accent 6.71. Focus 7.34. All clear WCAG AA.
 *
 * The spacing below still comes from measured row pitch on the reference screenshots at
 * a known device pixel ratio.
 *
 * SIGN IS CARRIED TWICE, DELIBERATELY. Colour plus a signed number is two channels for
 * most readers but not for someone colourblind scanning quickly, and a minus sign is a few
 * pixels. Signed figures therefore carry a direction glyph as well, and a test asserts
 * both are present.
 */

:root {
  /* surfaces — the slate swatch and three steps derived from it.
     The greens cannot be the ground: green carries sign meaning here, and a green page
     costs a positive figure the one thing that makes it readable at a glance. */
  --bg: #232629;           /* page ground — slate -3.5% L */
  --surface: #2b2f33;      /* SWATCH — cards, table, modal */
  --raised: #34393e;       /* slate +4% L — pills, active tab, hover */
  --line: #3c4248;         /* slate +7.5% L — borders */
  --line-soft: #31353a;    /* slate +2.5% L — row dividers */

  /* text — the mist swatch, and the sage swatch dimmed for labels */
  --text: #e9f1ee;         /* SWATCH — headings, key figures */
  --text-body: #d5dedb;    /* mist -7.5% L -10% S — numbers and body */
  --text-muted: #99a7a1;   /* sage -9% L -13.5% S — labels, column headers */

  /* signed and status. The palette has no red, so the rose is kept at its own hue and
     lifted to clear AA on a ground that is lighter than the one it was tuned for. */
  --up: #45c19b;           /* moss +27% L — the swatch is too dark to be text */
  --down: #d5808b;         /* rose 352deg, +11% L from #c55564: 3.12 -> 4.68 on surface */
  --warn: #d6bc62;

  /* accent. The moss swatch is a FILL, not a foreground: at 1.3 against the ground it is
     invisible as text or as a hairline, and at 6.71 with mist on it, it is a strong chip.
     Marks that cannot be filled — an underline, the brand square — take the sage. */
  --accent: #1f5d4a;       /* SWATCH — rank 1 chip, active tab fill */
  --accent-ink: #e9f1ee;   /* SWATCH — text on the fill */
  --accent-soft: #a8c6b8;  /* SWATCH — underlines, marks, emphasis */

  /* chart fills. Forest sits BELOW the card in luminance, so it reads as a dark green
     well. Contrast ratio understates it: the difference is hue, and the reference's own
     fills are equally close in brightness. */
  --up-fill: #0e3b2e;      /* SWATCH */
  --down-fill: #3a1b21;

  --focus: #a8c6b8;        /* SWATCH */

  --sans: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* type: five sizes, three weights, measured from the screenshots at 2x */
  --t-micro: 11px;   /* column headers, uppercase, tracked */
  --t-small: 13px;   /* dense labels */
  --t-body: 14px;    /* tabs, filters, subtitle */
  --t-num: 15px;     /* table numbers */
  --t-lead: 20px;    /* podium figures */
  --t-head: 28px;    /* page heading */

  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;

  /* spacing: measured section rhythm 37 / 57 / 39 / 31 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;

  --row-h: 44px;           /* measured table row pitch */
  --card-h: 223px;         /* measured podium card height */
  --page: 1333px;          /* the viewport the screenshots were taken at */

  color-scheme: dark;
}

/* New component dimensions; existing product tokens remain authoritative. */
:root {
  --brand: #ccff00;
  --brand-ink: #110e08;
  --brand-ink-soft: #516005;
  --scrim: #000000e6;
  --rank-1: #ffffff;
  --rank-2: #c3cbd0;
  --rank-3: #7c868c;
  --r-pill: 36px;
  --r-card: 6px;
  --r-control: 6px;
  --display: 'Newsreader', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --t-display: 72px;
  --ls-display: -1px;
  --lh-display: 1.08;
  --ls-head: -1px;
  --lh-head: 1.2;
  --ls-lead: -0.5px;
  --lh-lead: 1.25;
  --ls-num: -0.4px;
  --lh-num: 1.3;
  --ls-body: -0.25px;
  --lh-body: 1.5;
  --ls-small: -0.25px;
  --lh-small: 1.4;
  --ls-micro: -0.25px;
  --lh-micro: 1.35;
  --s-base: 4px;
  --s-9: 60px;
  --s-10: 128px;
  --motion: 300ms;
  --ease: ease;
  --bp-1: 426px;
  --bp-2: 485px;
  --bp-3: 768px;
  --bp-4: 1024px;
  --bp-5: 1049px;
  --bp-6: 1280px;
  --bp-7: 1441px;
}