/* Design tokens. Custom properties only; no selectors other than :root.
   Source: site/DESIGN.md and site/STYLEGUIDE.md. A change here is a design decision. */
:root {
  /* ground and surfaces */
  --ground: #FAF7F1;        /* page background */
  --ground-2: #F2EDE2;      /* hover rows, table header fill, sheet ground */
  --card: #FFFFFF;          /* every card, chart ground, halo stroke */

  /* text and rules */
  --text: #1B1A17;          /* body, values, headings, direct-label names */
  --muted: #6E6659;         /* labels, axis ticks, captions, stamps, secondary values */
  --faint: #948C7D;         /* non-text marks only: leaders, hairlines, the gray bars of a gray-and-accent pair; never text */
  --rule: #E6DDCC;          /* 1px rules, card borders, axis baseline */
  --grid: rgba(34,31,26,0.07); /* horizontal gridlines only */

  /* one accent */
  --accent: #2B5C8A;        /* controls, links, focus ring, active nav, the Mine lens */
  --accent-tint: #E7EEF5;   /* selected-state fill of a control (segmented, slider window) only */

  /* semantic, always paired with a sign or a word */
  --gain: #4C7A4F;          /* signed positive numbers only */
  --loss: #A44A3F;          /* signed negative numbers and error lines only */
  --amber: #926820;         /* stale stamps and unallocated or unweighted states only */

  /* lens hues, fixed per source, never per chart index */
  --lens-mine: #2B5C8A;
  --lens-house: #3F8F7A;
  --lens-street: #B0792D;
  --lens-market: #8B8477;
  --lens-valuation: #7A6B9E;
  --lens-composed: #9A4F7A;
  --lens-people: #7D8F3A;

  /* revenue segment palette, categorical, never mixed with lens hues on one chart */
  --seg-search: #2B5C8A;
  --seg-cloud: #3F8F7A;
  --seg-youtube: #C0873A;
  --seg-network: #8A9BB0;
  --seg-other: #B9B1A2;

  /* type: exactly four sizes, three weights */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fs-label: 12px;  --lh-label: 16px;   /* labels, ticks, captions, stamps, chips */
  --fs-body: 15px;   --lh-body: 23px;    /* body, cells, controls, nav */
  --fs-claim: 21px;  --lh-claim: 29px;   /* section titles, tile values */
  --fs-title: 32px;  --lh-title: 40px;   /* page title, the spot value */
  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;                          /* the spot value only */
  --tracking-tight: -0.01em;
  --tracking-caps: 0.06em;

  /* spacing scale, no other values */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* layout */
  --container: 1160px;
  --sidenav: 200px;
  --column-gap: 48px;
  --radius: 10px;           /* cards */
  --radius-sm: 6px;         /* chips, menus, inputs */
  --row: 40px;              /* table rows, nav rows are 36 */
  --hit: 44px;              /* every touch target */
  --handle: 24px;           /* slider handle */
  --focus: 2px solid var(--accent);
  --mobile: 640px;          /* single column below this (media queries cannot read it; repeated literally) */

  /* chart chassis: gutters follow the width class (full column, half in a grid, mobile) */
  --gutter-l: 56px;         /* full width */
  --gutter-r: 120px;
  --gutter-l-half: 40px;    /* half width (inside .grid-2 or .grid-3) */
  --gutter-r-half: 72px;
  --gutter-l-mobile: 12px;
  --gutter-r-mobile: 12px;
  --gutter-t: 16px;
  --gutter-b: 28px;
  --gutter-b-stacked: 44px; /* when two reference labels stack on two lines */
  --chart-full: 300px;
  --chart-half: 240px;
  --strip: 40px;            /* slider context strip */
  /* band ladder 50 / 80 / 90, keyed to hue chroma: saturated hues, then low-chroma hues (market, faint) */
  --band-50: 0.18;
  --band-80: 0.12;
  --band-90: 0.07;
  --band-50-lo: 0.26;
  --band-80-lo: 0.16;
  --band-90-lo: 0.09;
  --band-edge: 0.30;        /* 1px edge on the outer band */
  --zone: 0.10;             /* payoff zones */
  --hatch: 0.35;            /* white hatch over allocated bars */
}