/*
 * Tennis Scout — Design Tokens
 * Variant B: Claude Design (0.1.53).
 *
 * Brand pivot from "Wimbledon refined Variant A" (early-development
 * placeholder palette: warm greens + cream over green-grey surfaces)
 * to Claude Design (production visual language: deep navy backgrounds,
 * emerald primary, Inter sans / JetBrains Mono numerics).
 *
 * Tokens live in the --ts-* namespace so they're independent of Pico
 * CSS — a future Pico major bump can rename --pico-* without touching
 * the project palette. The block at the bottom of this file maps the
 * Pico variable names that app.css still references onto these tokens
 * (backwards-compat shim) so the visual change ships with a single
 * source of truth.
 *
 * EV band hexes mirror wta_scout/dashboard/services/pnl_by_ev_band.py
 * — Python remains the source of truth for chart colors, the CSS
 * tokens here are the parallel definition templates can use without
 * round-tripping through the API. Therefore EV-band values are
 * preserved verbatim across the Claude pivot.
 *
 * Tour identity tokens (--ts-tour-wta / --ts-tour-atp) are preserved
 * verbatim too — they're reserved for a future tour-aware UI accent
 * and re-tuning their hexes belongs in that PR, not this one.
 */

/* =====================================================================
 * Self-hosted fonts.
 * Inter (sans) for body + headings; JetBrains Mono for numeric /
 * tabular cells (odds, EV %, Kelly %, bankroll).
 * Two subsets for Inter — `latin` covers ASCII, `latin-ext` covers
 * Czech diacritics (š, č, ř, ž, ě, …) used in player names. Browser
 * picks the right file at render time via unicode-range. JetBrains
 * Mono ships latin-only — numeric cells have no Czech characters.
 * Files live in /static/fonts/, copied into the runtime image with
 * the rest of the static dir.
 * ===================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/Inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/Inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/Inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/Inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/JetBrainsMono-600-latin.woff2') format('woff2');
}

:root {
  /* Type stack — Inter sans for prose, JetBrains Mono for numerics.
   * The system-ui / ui-monospace fallbacks render before the woff2
   * loads (font-display: swap), keeping the page legible during the
   * brief font-fetch window. */
  --ts-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ts-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Surfaces — Claude's deep navy stack. Four levels matching the
   * existing API; previous Wimbledon green-grey values replaced. */
  --ts-surface-base:        #0a0e1a;
  --ts-surface-raised:      #0d1117;
  --ts-surface-elevated:    #11161d;
  --ts-surface-overlay:     #161b23;
  --ts-bg-subtle:           #1a1f2e;
  --ts-card-bg:             #1e2433;
  --ts-border-subtle:       rgba(255, 255, 255, 0.06);
  --ts-border-strong:       rgba(255, 255, 255, 0.20);

  /* Text — Claude's near-white over near-black. */
  --ts-text-primary:        #e6edf3;
  --ts-text-secondary:      #9ca3af;
  --ts-text-muted:          #7d8590;
  --ts-text-inverse:        #0a0e1a;

  /* Tipsport line-shopping accent (Phase Tipsport-1, 0.1.208;
   * tone bumped 0.1.209 from #4DA6FF to #2196F3 for stronger contrast
   * against the dark card bg). Distinct from Pinnacle orange + Scout
   * green so the second-bookmaker subtitle reads as its own dimension. */
  --ts-tipsport-color:      #2196F3;

  /* Brand — Claude emerald, replacing Wimbledon grass. Names retain
   * `--ts-brand-grass*` so app.css references keep working; only the
   * underlying hue shifts. A future rename pass can drop the "grass"
   * suffix once the API is fully audited. */
  --ts-brand-grass:         #10b981;
  --ts-brand-grass-light:   #34d399;
  --ts-brand-grass-dark:    #059669;
  --ts-brand-cream:         #e6edf3;

  /* Tour identity — preserved verbatim for a future tour-aware UI
   * accent. Re-tuning belongs in that PR. */
  --ts-tour-wta:            #6b4e8b;       /* muted royal purple */
  --ts-tour-wta-soft:       rgba(107, 78, 139, 0.15);
  --ts-tour-atp:            #2d5f3f;       /* deep forest, distinct from primary brand */
  --ts-tour-atp-soft:       rgba(45, 95, 63, 0.15);

  /* Status — bet outcomes. Claude colour family: blue/emerald/red/zinc. */
  --ts-status-open:         #93c5fd;       /* blue-300 */
  --ts-status-won:          #6ee7b7;       /* emerald-300 */
  --ts-status-warn:         #fbbf24;       /* amber-400 — generic warn */
  --ts-status-lost:         #fca5a5;       /* red-300 */
  --ts-status-pushed:       #a1a1aa;       /* zinc-400 */
  --ts-status-voided:       #71717a;       /* zinc-500 */

  /* Phase A4.1 — unified status pill sizing. Pre-A4.1 the bet card
   * rendered an "OPEN" pill at .badge defaults (0.75 rem / 0.15 0.55)
   * next to a "✓ WON" pill at .badge-outcome-* (10.5 px / 2 × 8) — the
   * size mismatch read as design drift. Both surfaces now consume
   * these tokens, so a /tracking listing of open + settled bets
   * carries a single chip dimension throughout. */
  --ts-status-badge-padding:        2px 8px;
  --ts-status-badge-font-size:      10.5px;
  --ts-status-badge-letter-spacing: 0.05em;

  /* Layout — values that downstream sticky / fixed elements anchor to.
   * --ts-app-header-height is the FULL rendered height of `.app-header`.
   *
   * The header height has two components:
   *   1. `.app-header__inner` — fixed 56 px (defined in app.css)
   *   2. Pico v2's `body>header` rule applies `padding-block` on top
   *      via `--pico-block-spacing-vertical` (== 1rem) — and 1rem is
   *      responsive in Pico (root font-size scales 16→20 px across
   *      breakpoints), so the actual padding is ~16 px on small phones
   *      and ~20 px on wide desktops, total header heights of 89-97 px.
   *
   * A hardcoded value (e.g. 99 px) would leave a 2-10 px gap below the
   * header on smaller viewports. Computing it live via `calc()` keeps
   * `.page-subnav` flush against the header at every viewport without
   * a media-query staircase.
   *
   * The trailing `+ 2px` is for `.app-header`'s own `border-bottom`,
   * which is declared as `0.5px solid` in app.css. On 2x/3x Retina
   * displays that subpixel border renders as a visible 1 px hairline,
   * and `getBoundingClientRect().height` reports it inconsistently
   * across viewports (sometimes rounded down to 0, sometimes 1) — so
   * a single `+ 1px` allowance left a visible 1 px gap on the user's
   * Retina display (0.1.138 → 0.1.139 fix). 2 px guarantees a 1 px
   * overlap and hides the seam. */
  --ts-app-header-height: calc(56px + 2 * var(--pico-block-spacing-vertical) + 2px);

  /* Mobile override — on real iOS Safari the responsive Pico font-size
   * doesn't always resolve `--pico-block-spacing-vertical` the same way
   * DevTools mobile-emulation does (in-the-wild we get a 1-3 px gap
   * below the header), so the @media (max-width: 768px) `.page-subnav`
   * rule in app.css pins the mobile sticky `top` to an empirically
   * known-good 90 px instead of the calc result. */
  --ts-app-header-height-mobile: 90px;

  /* Confidence — signal quality (HIGH/MID/LOW). Claude family. */
  --ts-confidence-high:     #6ee7b7;       /* emerald-300 — high confidence */
  --ts-confidence-mid:      #93c5fd;       /* blue-300 — medium confidence */
  --ts-confidence-low:      #a1a1aa;       /* zinc-400 — low confidence */

  /* Bankroll lanes — used by tracking.html / auto_trading.html
   * data-color attributes (templates may still inline the values for
   * inline-style charts; the CSS tokens cover any css-side reference). */
  --ts-lane-user:           #60a5fa;       /* blue-400 */
  --ts-lane-auto:           #fb923c;       /* orange-400 */

  /* Pinnacle benchmark accent — used on /auto-trading bet card
   * subtitles ("Pinnacle: …" / "Per Pinnacle: …") so the sharp-line
   * recalc reads as a distinct annotation rather than blurring into
   * the Scout primary value. The hex is Pinnacle's signature
   * orange-yellow brand colour. */
  --ts-pinnacle-color:      #FFB81C;

  /* Phase A3 → A4.1 — Pinnacle agreement classification
   * (positive/neutral/negative/absent). Bumped tint opacity 0.14 → 0.22
   * and switched -text variants from green/amber/red-800 to the -300
   * shades so the chip reads against the dark dashboard surface
   * instead of disappearing into it. The -border value (the *-500
   * shade) stays as the saturated border + leading-icon colour. */
  --ts-classification-positive:        #22c55e;       /* green-500 */
  --ts-classification-positive-text:   #86efac;       /* green-300 */
  --ts-classification-positive-tint:   rgba(34, 197, 94, 0.22);
  --ts-classification-neutral:         #f59e0b;       /* amber-500 */
  --ts-classification-neutral-text:    #fcd34d;       /* amber-300 */
  --ts-classification-neutral-tint:    rgba(245, 158, 11, 0.22);
  --ts-classification-negative:        #ef4444;       /* red-500 */
  --ts-classification-negative-text:   #fca5a5;       /* red-300 */
  --ts-classification-negative-tint:   rgba(239, 68, 68, 0.22);
  --ts-classification-absent:          #6b7280;       /* gray-500 */
  --ts-classification-absent-text:     #d1d5db;       /* gray-300 */
  --ts-classification-absent-tint:     rgba(107, 114, 128, 0.22);

  /* EV bands (mirrors pnl_by_ev_band.py — Python is source of truth,
   * preserved verbatim across the Claude pivot. Re-tuning these
   * requires a coordinated change in Python first.) */
  --ts-ev-band-marginal:    #888780;
  --ts-ev-band-edge:        #97c459;
  --ts-ev-band-suspicious:  #e24b4a;
  --ts-ev-band-artefact:    #501313;

  /* Toast / system — Claude amber for warnings. */
  --ts-toast-warning:       #fcd34d;       /* amber-300 */

  /* =========================================================
   * Badge component tokens (0.1.54).
   * Tint + text + border tuples for the Claude-style chip pattern
   * (8 % bg, 25 % border, 300-level text). Surface tokens carry an
   * extra --dot variant for the inline dot prefix; Category and
   * Outcome use the same three-token shape. ConfidenceBadge reuses
   * the existing --ts-confidence-* values (still solid pill via
   * .badge-confidence-* in app.css) — no separate confidence-badge
   * tuple in this PR.
   *
   * Surface badges are reserved here but not yet rendered; the
   * shared _signal_meta.html macro keeps the inline-text format
   * until PR 3 takes the layout-shift cost of swapping to badges
   * across the four pages that share that macro.
   * ========================================================= */

  /* Status (open) — soft-tint tuple matching the outcome chips so the
   * /tracking row reads consistently across the open → settled
   * transition (0.1.57 PR 3c). The flat --ts-status-open above stays
   * for any single-colour consumer (e.g. dot indicators). */
  --ts-status-open-bg:     rgba(59, 130, 246, 0.10);   /* blue-500 / 10 */
  --ts-status-open-text:   #93c5fd;                     /* blue-300 */
  --ts-status-open-border: rgba(59, 130, 246, 0.25);

  /* Confidence — soft-tint badge tuples (0.1.56 PR 3b). PR 2 deferred
   * these; PR 3b adds them so .badge-confidence-* can adopt the same
   * Claude bg + text + border pattern as the other badge families.
   * Naming uses the full enum value (medium, not mid) so the token
   * names line up with the .badge-confidence-{high,medium,low} class
   * suffixes the templates already substitute. The legacy flat
   * --ts-confidence-{high,mid,low} tokens above stay (used by the
   * .opp-legend__bar--* dots and any other consumer that just needs
   * one colour). */
  --ts-confidence-high-bg:      rgba(16, 185, 129, 0.10);  /* emerald-500 / 10 */
  --ts-confidence-high-text:    #6ee7b7;                    /* emerald-300 */
  --ts-confidence-high-border:  rgba(16, 185, 129, 0.25);

  /* Amber per design 9/5/2026 (was blue from the Claude palette
   * legacy in b7f1e05). Matches --ts-status-warn semantics so the
   * MEDIUM confidence chip reads as a warning vibe rather than a
   * neutral mid-tier. */
  --ts-confidence-medium-bg:    rgba(251, 191, 36, 0.10); /* amber-400 / 10 */
  --ts-confidence-medium-text:  #fbbf24;                    /* amber-400 */
  --ts-confidence-medium-border:rgba(251, 191, 36, 0.25);

  --ts-confidence-low-bg:       rgba(113, 113, 122, 0.10); /* zinc-500 / 10 */
  --ts-confidence-low-text:     #a1a1aa;                    /* zinc-400 */
  --ts-confidence-low-border:   rgba(113, 113, 122, 0.20);

  /* Signal kind — inverse (0.1.62). Rose tuple chosen because every
   * other badge family already claims green / blue / zinc / amber /
   * violet, and rose reads as "alternative, alert, opposite direction"
   * without overlapping the confidence palette this badge sits next to. */
  --ts-kind-inverse-bg:      rgba(244, 63, 94, 0.10);   /* rose-500 / 10 */
  --ts-kind-inverse-text:    #fda4af;                    /* rose-300 */
  --ts-kind-inverse-border:  rgba(244, 63, 94, 0.25);

  /* Surface — court types */
  --ts-surface-hard-bg:      rgba(59, 130, 246, 0.10);   /* blue-500 / 10 */
  --ts-surface-hard-text:    #93c5fd;                     /* blue-300 */
  --ts-surface-hard-border:  rgba(59, 130, 246, 0.25);
  --ts-surface-hard-dot:     #60a5fa;                     /* blue-400 */

  --ts-surface-clay-bg:      rgba(249, 115, 22, 0.10);   /* orange-500 / 10 */
  --ts-surface-clay-text:    #fdba74;                     /* orange-300 */
  --ts-surface-clay-border:  rgba(249, 115, 22, 0.25);
  --ts-surface-clay-dot:     #fb923c;                     /* orange-400 */

  --ts-surface-grass-bg:     rgba(16, 185, 129, 0.10);   /* emerald-500 / 10 */
  --ts-surface-grass-text:   #6ee7b7;                     /* emerald-300 */
  --ts-surface-grass-border: rgba(16, 185, 129, 0.25);
  --ts-surface-grass-dot:    #34d399;                     /* emerald-400 */

  /* Category — tournament tier (Grand Slam / WTA-ATP 1000 / 500 / 250) */
  --ts-cat-grandslam-bg:     rgba(139, 92, 246, 0.10);   /* violet-500 / 10 */
  --ts-cat-grandslam-text:   #c4b5fd;                     /* violet-300 */
  --ts-cat-grandslam-border: rgba(139, 92, 246, 0.25);

  --ts-cat-1000-bg:          rgba(245, 158, 11, 0.10);   /* amber-500 / 10 */
  --ts-cat-1000-text:        #fcd34d;                     /* amber-300 */
  --ts-cat-1000-border:      rgba(245, 158, 11, 0.25);

  --ts-cat-500-bg:           rgba(59, 130, 246, 0.10);   /* blue-500 / 10 */
  --ts-cat-500-text:         #93c5fd;                     /* blue-300 */
  --ts-cat-500-border:       rgba(59, 130, 246, 0.25);

  --ts-cat-250-bg:           rgba(113, 113, 122, 0.10);  /* zinc-500 / 10 */
  --ts-cat-250-text:         #a1a1aa;                     /* zinc-400 */
  --ts-cat-250-border:       rgba(113, 113, 122, 0.20);

  /* Outcome — settled signal status. Mirrors the existing
   * .badge-status-* solid pills (which keep working unchanged via
   * the --ts-status-* tokens above) but ships an alternate
   * .badge-outcome-* component with the tinted Claude look + a
   * mono-font symbol prefix (✓ ✗ − ⊘). Templates can opt in row by
   * row; the bet card stays on .badge-status-* until a separate PR
   * coordinates the migration. */
  --ts-outcome-won-bg:       rgba(16, 185, 129, 0.10);
  --ts-outcome-won-text:     #6ee7b7;
  --ts-outcome-won-border:   rgba(16, 185, 129, 0.25);

  --ts-outcome-lost-bg:      rgba(239, 68, 68, 0.10);    /* red-500 / 10 */
  --ts-outcome-lost-text:    #fca5a5;                     /* red-300 */
  --ts-outcome-lost-border:  rgba(239, 68, 68, 0.25);

  --ts-outcome-push-bg:      rgba(113, 113, 122, 0.10);
  --ts-outcome-push-text:    #a1a1aa;
  --ts-outcome-push-border:  rgba(113, 113, 122, 0.20);

  --ts-outcome-void-bg:      rgba(245, 158, 11, 0.10);
  --ts-outcome-void-text:    #fcd34d;
  --ts-outcome-void-border:  rgba(245, 158, 11, 0.25);
}

/* =====================================================================
 * Body type — Inter sans cascades from html/body. Headings inherit
 * unless overridden by component-specific styles further down app.css.
 * ===================================================================== */
html,
body {
  font-family: var(--ts-font-sans);
}

/* =====================================================================
 * Atmospheric depth (0.1.57 PR 3c) — emerald glow top-right + cooler
 * blue glow bottom-left. Mirrors the Claude Design landing pattern of
 * absolutely-positioned blurred shapes that sit behind content. Both
 * are fixed + pointer-events:none so they ride along with the
 * viewport, never intercept clicks, and never affect layout.
 *
 * Opacity is intentionally low (8 % / 4 %) — the depth is meant to
 * read at peripheral vision, not draw the eye. Blur radius hits the
 * GPU compositor on every modern browser; tested smooth on desktop
 * Chrome/Safari/Firefox. iOS Safari fixed-position behaviour mid-
 * scroll is the known wobble (memory item #8); the shapes are large
 * enough that the wobble reads as ambient atmosphere rather than
 * a glitch.
 * ===================================================================== */
body::before {
  content: "";
  position: fixed;
  top: -160px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.08);   /* emerald soft */
  filter: blur(96px);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.04);   /* blue very subtle */
  filter: blur(128px);
  pointer-events: none;
  z-index: -1;
}

/* =====================================================================
 * Numeric / tabular cells — JetBrains Mono with tabular-nums so
 * digits align across rows (odds columns, EV %, Kelly %, bankroll).
 * Selector list covers the existing BEM classes that render numbers;
 * it's a deliberate opt-in so prose like player names stays in Inter.
 * ===================================================================== */
.tabular-nums,
input[type="number"],
[data-kelly-pct],
.quick-bet-row__odds,
.quick-bet-row__numbers,
.quick-bet-row__ev,
.quick-bet-row__kelly-pct,
.quick-bet-row__kelly-amount,
.reference-bankroll__input {
  font-family: var(--ts-font-mono);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * Pico CSS overrides — backwards compatibility shim.
 *
 * app.css still references var(--pico-*) in many places. Mapping those
 * onto --ts-* tokens here lets the Variant B surface palette cascade
 * everywhere without touching every selector. Future commits can
 * gradually replace --pico-* with --ts-* in app.css when convenient.
 *
 * Scoped to :root unconditionally — we only ship dark mode (data-theme
 * is forced to "dark" in base.html). If light mode were ever added the
 * dark variants would move back into a selector-scoped block.
 * ===================================================================== */
:root {
  /* Surfaces / borders */
  --pico-background-color: var(--ts-surface-base);
  --pico-card-background-color: var(--ts-surface-raised);
  --pico-card-sectioning-background-color: var(--ts-surface-raised);
  --pico-form-element-background-color: var(--ts-surface-raised);
  --pico-form-element-border-color: var(--ts-border-subtle);
  --pico-muted-border-color: var(--ts-border-subtle);

  /* Text */
  --pico-color: var(--ts-text-primary);
  --pico-muted-color: var(--ts-text-muted);

  /* Primary — Claude emerald */
  --pico-primary: var(--ts-brand-grass);
  --pico-primary-background: var(--ts-brand-grass);
  --pico-primary-border: var(--ts-brand-grass);
  --pico-primary-hover: var(--ts-brand-grass-light);
  --pico-primary-hover-background: var(--ts-brand-grass-light);
  --pico-primary-hover-border: var(--ts-brand-grass-light);
  --pico-primary-focus: rgba(16, 185, 129, 0.25);
  --pico-primary-inverse: #ffffff;
  --pico-form-element-focus-color: rgba(16, 185, 129, 0.25);

  /* Destructive (lost bets, errors, inactive states) */
  --pico-del-color: var(--ts-status-lost);
}