/*
 * TOKENS -- the only place a raw colour, size or spacing value is allowed to appear.
 *
 * ONE LOOK. There is no dark theme and no toggle (Alex, 2026-08-14). The prototype this was
 * designed against followed the viewer's browser theme, so it had been reviewed and approved in
 * light the whole time while the plan described a dark ground -- the ground is light because
 * that is the product people actually looked at and chose.
 *
 * The three signal colours still have to be distinguishable from the brand, which is the one
 * thing the old all-green UI could not do:
 *
 *     gold  #8A6512  the brand, and only the brand
 *     green #14804A  winning
 *     red   #B3261E  losing
 *
 * These are the darkened values: #3FBF7F on white is about 1.9:1 and unreadable. Everything
 * here clears 4.5:1 on the surface it sits on.
 *
 * No webfonts. The CSP blocks CDNs and a silent fallback to Times is worse than committing to
 * a system stack. Personality comes from weight contrast, uppercase micro-labels with
 * letter-spacing, and tabular figures.
 */

:root {
  /* ---------- type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --fs-100: 0.6875rem;  /* 11px -- micro labels, uppercase */
  --fs-200: 0.75rem;    /* 12px */
  --fs-300: 0.8125rem;  /* 13px -- dense table text */
  --fs-400: 0.9375rem;  /* 15px -- body */
  --fs-500: 1.0625rem;  /* 17px */
  --fs-600: 1.3125rem;  /* 21px -- card headings */
  --fs-700: 1.625rem;   /* 26px -- page title */
  --fs-800: 2.125rem;   /* 34px -- hero figures */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  --tracking-label: 0.09em;

  /* ---------- space ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ---------- shape ---------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  --page-max: 1120px;

  /* ---------- motion ---------- */
  --t-fast: 0.12s ease;
  --t-base: 0.2s ease;

  /* ---------- the palette ---------- */
  --ground: #F1F4F1;
  --ground-2: #E9EEEA;
  --surface: #FFFFFF;
  --surface-2: #F6F8F6;
  --surface-3: #EAF0EC;
  --line: #DBE3DD;
  --line-2: #BFCCC4;

  --fg: #0F1713;
  --fg-2: #54625A;
  --fg-3: #63716A;   /* the micro-label colour; anything lighter drops under 4.5:1 on white */
  --fg-on-fill: #0B100E;

  --brand: #E8B33C;
  --brand-2: #C9942A;
  --brand-text: #8A6512;
  --brand-soft: rgba(232, 179, 60, 0.18);

  --win: #14804A;
  --win-soft: rgba(20, 128, 74, 0.12);
  --lose: #B3261E;
  --lose-soft: rgba(179, 38, 30, 0.10);
  --warn: #8A6512;
  --warn-soft: rgba(232, 179, 60, 0.20);
  --info: #1B5E9E;
  --info-soft: rgba(27, 94, 158, 0.10);
  --neutral-soft: rgba(15, 23, 19, 0.06);

  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.08);
  --shadow-md: 0 6px 18px rgba(16, 24, 20, 0.10);
  --shadow-lg: 0 18px 44px rgba(16, 24, 20, 0.16);
  --focus-ring: 0 0 0 3px rgba(138, 101, 18, 0.28);

  color-scheme: light;
}