/* =====================================================================
 * GolfStax — Design Tokens (SINGLE SOURCE OF TRUTH)
 * ---------------------------------------------------------------------
 * Every page on the platform links THIS file first. It is the ONLY place
 * platform colors, surfaces, type, spacing, and z-index are defined.
 *
 * Rules of the road:
 *   • Do NOT define a `:root` block anywhere else (no embedded <style>
 *     roots, no per-sheet roots). Add new tokens here.
 *   • Reference tokens with var(--token); never hardcode the gold #ae9142,
 *     the charcoals, or a raw font stack in component CSS.
 *   • Legacy/alias names (--gold, --bg, --panel, --ink, --accent, --line,
 *     --card, --border, --text, --muted) are kept and folded onto the gold
 *     palette so older pages resolve to the unified look automatically.
 * ===================================================================== */

:root {
    /* ── Brand: Gold ─────────────────────────────────────────────── */
    --primary-color: #ae9142;
    --primary-dark: #8a7335;
    --primary-light: #c5a961;
    --accent-color: #ae9142;

    /* Status & score colors used as TEXT. Same fill-vs-text split as the gold:
       the bright --success/--danger/... stay for FILLS/badges (white text on
       them), and these *-ink variants are for colored TEXT. Each is tuned to
       pass WCAG AA 4.5:1 on the worst surface of the active theme (cards in
       dark, white in light). Rule: status/score as text → var(--*-ink). */
    --success-ink: #81c784;
    --danger-ink:  #ff8a80;
    --warning-ink: #ffb74d;
    --info-ink:    #64b5f6;
    --birdie-ink:  #66e08e;
    --eagle-ink:   #64b5f6;
    --bogey-ink:   #ffb74d;
    --double-ink:  #ff8a80;
    --par-ink:     var(--text-primary);

    /* Gold used as TEXT. Split from the fill gold because text-on-light and
       dark-text-on-gold-fill have opposite contrast needs (WCAG AA 4.5:1).
       Dark theme uses the palette's lighter gold (--primary-light) so gold text
       passes AA even on the lighter #3a3a3a cards (4.99:1); the light theme
       overrides this to a deep gold. Gold FILLS still use the base --gold.
       Rule: use var(--brand-ink) for gold TEXT, var(--gold) for gold FILLS. */
    --brand-ink: #c5a961;

    /* ── Neutrals: Charcoal ──────────────────────────────────────── */
    --charcoal: #181a1e;
    --charcoal-light: #272a30;
    --charcoal-lighter: #373b43;
    --white: #ffffff;
    --gray-light: #f5f5f5;
    --gray: #e0e0e0;
    --gray-dark: #aaa;

    /* ── Status ──────────────────────────────────────────────────── */
    --success: #4CAF50;
    --danger: #f44336;
    --warning: #ff9800;
    --info: #2196F3;

    /* ── Foreground on status / neutral FILLS ────────────────────────
       Text or icon color placed ON a status fill (badge, pill, button).
       The status fills above do NOT flip between themes, so these are
       theme-independent. Mirrors --gsx-on-brand (text on the gold fill).
       Rule: text on a colored fill → var(--on-*), never a raw #fff/#1a1a1a.
       NOTE: white-on-success/danger/info are the established badge styles;
       preserved here, not all meet 4.5:1 for small text — revisit if a badge
       ever carries body-size text. */
    --on-success: #ffffff;
    --on-warning: #1a1a1a;   /* dark text on amber #ff9800 — passes AA */
    --on-danger:  #ffffff;
    --on-info:    #ffffff;
    --on-neutral: #1a1a1a;   /* dark text on a light gray / light fill */

    /* ── Darker status shades (button hover / pressed) — mirror --primary-dark ── */
    --success-dark: #388e3c;
    --danger-dark:  #d32f2f;
    --warning-dark: #f57c00;
    --info-dark:    #1976d2;

    /* ── Status WASHES — low-alpha colored backgrounds (alert / badge / tint
       panels). Theme-independent (status fills don't flip). Pair -wash (fill)
       with -wash-border. Rule: a colored tint background → var(--*-wash). ── */
    --success-wash: rgba(var(--gsx-success-rgb), 0.12);
    --danger-wash:  rgba(var(--gsx-danger-rgb), 0.12);
    --warning-wash: rgba(var(--gsx-warning-rgb), 0.12);
    --info-wash:    rgba(var(--gsx-info-rgb), 0.12);
    --success-wash-border: rgba(var(--gsx-success-rgb), 0.30);
    --danger-wash-border:  rgba(var(--gsx-danger-rgb), 0.30);
    --warning-wash-border: rgba(var(--gsx-warning-rgb), 0.30);
    --info-wash-border:    rgba(var(--gsx-info-rgb), 0.30);

    /* Text / icon on a dark scrim or overlay — always white (scrims don't flip). */
    --on-scrim: #ffffff;

    /* ── Semantic accents outside the core palette ───────────────────
       Recurring functional colors that aren't brand/status: purple = admin /
       provisional / external-mode; gender tags = boys/girls. Fill + AA text ink
       + low-alpha wash, mirroring the status families. (3rd-party brand colors —
       Google blue etc. — and trophy/rank data-viz stay raw with tokens-allow.) */
    --purple:       #7c3aed;
    --purple-ink:   #b388ff;   /* dark-theme text (light override below) */
    --purple-wash:  rgba(124, 58, 237, 0.12);
    --gender-boys:  #5b9bd5;
    --gender-girls: #e683b0;
    --gender-boys-wash:  rgba(91, 155, 213, 0.14);
    --gender-girls-wash: rgba(230, 131, 176, 0.14);

    /* Platform launcher colors — the three area accents shown SIMULTANEOUSLY
       on the casual launcher, so it can't use the single active --area-accent.
       (These are fixed brand constants; moved here from a stray :root that
       used to live in 13-casual.css.) */
    --plat-school: #ae9142;  /* gold  */
    --plat-host:   #2563eb;  /* blue  */
    --plat-casual: #15803d;  /* green */

    /* ── Surfaces ────────────────────────────────────────────────── */
    --bg-primary: #181a1e;
    --bg-secondary: #272a30;
    --card-bg: rgba(55, 59, 67, 0.92);
    --surface-solid: #373b43;   /* OPAQUE card — for modals that must fully hide
                                   the page behind them (--card-bg is .92 alpha) */
    --surface-sunken: rgba(0, 0, 0, 0.18);   /* recessed well / inset panel (darker than the card) */
    --surface-always-white: #ffffff;   /* constant white in BOTH themes — login cards, paper-like score inputs */
    --card-text: #e8e8e8;
    --footer-bg: rgba(30, 30, 30, 0.95);

    /* ── Text ────────────────────────────────────────────────────── */
    --text-primary: #e8e8e8;
    --text-secondary: #aaa;
    --text-muted: #a3a3a3;

    /* ── Borders / lines ─────────────────────────────────────────── */
    --border-color: rgba(255, 255, 255, 0.18);
    --border-subtle: rgba(255, 255, 255, 0.14);
    --border-medium: rgba(255, 255, 255, 0.22);
    --border-strong: rgba(255, 255, 255, 0.35);

    /* ── Effects ─────────────────────────────────────────────────── */
    --hover-bg: rgba(255, 255, 255, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-radius: 14px;
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    --row-stripe: rgba(255, 255, 255, 0.02);
    --row-hover: rgba(255, 255, 255, 0.05);
    --overlay-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.88), rgba(20, 20, 20, 0.85));
    --overlay-blur: blur(2px);
    --login-overlay-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(20, 20, 20, 0.55));
    --login-overlay-blur: blur(3px);

    /* ── Elevation / shadow scale ────────────────────────────────────
       One canonical set of box-shadows. Pick by elevation, not by eye.
       Dark defaults here; the light theme softens every step (shadows read
       heavier on light surfaces). --card-shadow is kept as an alias of -sm.
       Rule: box-shadow → var(--shadow-*), never a raw rgba() shadow. */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.18);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.22);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.30);
    --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.40);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.50);
    /* Raised-card look = elevation + a 1px hairline ring (common combo). */
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);

    /* ── Surface raises & scrims (theme-aware washes) ────────────────
       --raise-* lighten a surface (white tint on dark, black tint on light) —
       use for hover states, subtle elevated panels, zebra rows, input fills.
       --scrim-* darken regardless of theme — use for modal backdrops / overlays.
       Rule: a raw rgba(255,255,255,a) or rgba(0,0,0,a) WASH → var(--raise-*) or
       var(--scrim-*); a 1px hairline → var(--border-*) / var(--hairline-faint). */
    --raise-1: rgba(255, 255, 255, 0.03);
    --raise-2: rgba(255, 255, 255, 0.05);
    --raise-3: rgba(255, 255, 255, 0.08);
    --raise-4: rgba(255, 255, 255, 0.12);
    --raise-5: rgba(255, 255, 255, 0.16);
    --scrim-soft:   rgba(0, 0, 0, 0.30);
    --scrim:        rgba(0, 0, 0, 0.50);
    --scrim-strong: rgba(0, 0, 0, 0.70);
    --hairline-faint: rgba(255, 255, 255, 0.06);  /* subtler than --border-subtle */

    /* ── Spacing scale (4px base; rem so it respects root font-size) ──
       Full steps are the 4px rhythm; half-steps (-0-5/-1-5/-2-5/-3-5) exist so
       the migration from the old freehand values snaps within ~1px instead of
       jumping. NEW code: prefer the full steps. px spacing maps 1:1 (8px =
       --space-2). Rule: padding/margin/gap → var(--space-*). */
    --space-0:    0;
    --space-0-5:  0.125rem;  /*  2px */
    --space-1:    0.25rem;   /*  4px */
    --space-1-5:  0.375rem;  /*  6px */
    --space-2:    0.5rem;    /*  8px */
    --space-2-5:  0.625rem;  /* 10px */
    --space-3:    0.75rem;   /* 12px */
    --space-3-5:  0.875rem;  /* 14px */
    --space-4:    1rem;      /* 16px */
    --space-5:    1.25rem;   /* 20px */
    --space-6:    1.5rem;    /* 24px */
    --space-7:    1.75rem;   /* 28px */
    --space-8:    2rem;      /* 32px */
    --space-10:   2.5rem;    /* 40px */
    --space-12:   3rem;      /* 48px */
    --space-16:   4rem;      /* 64px */

    /* ── Radius scale (2px steps; covers actual usage) ───────────────
       Backward-compatible with the existing --gsx-radius-*/--card-radius
       aliases (kept below). Rule: border-radius → var(--radius-*); a full
       pill/chip → var(--radius-pill); a hard square stays 0. */
    --radius-xs:   4px;    /* 2,3,4,5px snap here */
    --radius-sm:   6px;
    --radius-md:   8px;    /* most common (120×) */
    --radius-lg:   10px;
    --radius-xl:   12px;
    --radius-2xl:  14px;   /* = --card-radius */
    --radius-3xl:  16px;
    --radius-pill: 999px;

    /* ── Motion (durations + easings) ────────────────────────────────
       One ramp for time, like --space-* for distance. Pick by intent, not by
       eye. Today's CSS uses ~14 ad-hoc durations (0.08–0.5s + a stray 5000s)
       and 6 easings — these replace them. Rule: transition / animation timing →
       var(--motion-*) paired with var(--ease-*). Respect prefers-reduced-motion. */
    --motion-instant: 0.1s;    /* taps / micro-feedback */
    --motion-fast:    0.15s;   /* hovers, toggles, small state changes (most common) */
    --motion-base:    0.2s;    /* default transition */
    --motion-slow:    0.3s;    /* panels, expanding sections */
    --motion-slower:  0.5s;    /* full-screen / overlay enter */
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);     /* general in/out (Material-like) */
    --ease-decelerate: cubic-bezier(0.32, 0.72, 0, 1);   /* enters / sheets (iOS-like) */
    --ease-spring:     cubic-bezier(0.2, 0.9, 0.3, 1.2); /* playful pop / overshoot */

    /* ── Typography ──────────────────────────────────────────────────
       One canonical stack platform-wide. --font-display is the hook for a
       brand/heading typeface later; today it inherits the sans stack so the
       look is unchanged but uniform. */
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Barlow Condensed', 'Arial Narrow', var(--font-sans);
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
    --font-serif: Georgia, 'Times New Roman', serif;

    /* ── Scorecard result colors (unified across scorecard + spectator) ── */
    --eagle: #1e90ff;
    --birdie: #2ecc71;
    --par: #e8e8e8;
    --par-bg: transparent;
    --bogey: #e67e22;
    --double: #e74c3c;

    /* ── Safe-area insets (mobile standalone pages) ──────────────── */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* ── GolfStax UI System aliases (gsx-* primitives) ───────────── */
    --gold: var(--primary-color);
    --gold-dark: var(--primary-dark);
    --gold-light: var(--primary-light);
    --gsx-brand: var(--primary-color);
    --gsx-brand-dark: var(--primary-dark);
    --gsx-brand-light: var(--primary-light);
    --gsx-brand-rgb: 174, 145, 66;
    /* Text on a gold FILL. Product decision (2026-06-22): use WHITE on gold for
       brand consistency, even though dark text scored higher on the bright gold.
       White on #ae9142 is ~3:1 (below the 4.5:1 AA target for small text); the
       owner accepted this tradeoff over dark-on-gold. Keep this white — do not
       "restore" the old #1a1a1a. School (gold) area mirrors this via
       --area-on-accent below; tournament/casual already use white. */
    --gsx-on-brand: #ffffff;
    --gsx-bg: var(--bg-primary);
    --gsx-surface: var(--card-bg);
    --gsx-surface-2: var(--bg-secondary);
    --gsx-text: var(--text-primary);
    --gsx-text-muted: var(--text-muted);
    --gsx-border: var(--border-subtle);
    --gsx-border-strong: var(--border-strong);
    --gsx-radius-sm: 6px;
    --gsx-radius-md: 10px;
    --gsx-radius-lg: var(--card-radius);
    --gsx-shadow: var(--card-shadow);
    --gsx-success: var(--success);
    --gsx-success-rgb: 76, 175, 80;
    --gsx-warning: var(--warning);
    --gsx-warning-rgb: 255, 152, 0;
    --gsx-danger: var(--danger);
    --gsx-danger-rgb: 244, 67, 54;
    --gsx-info: var(--info);
    --gsx-info-rgb: 33, 150, 243;
    --gsx-control-height: 2.5rem;
    --gsx-control-height-sm: 2rem;
    --gsx-control-height-lg: 3rem;
    --gsx-control-radius: 8px;
    --gsx-input-bg: rgba(255, 255, 255, 0.06);
    --gsx-table-head-bg: rgba(255, 255, 255, 0.06);
    --gsx-focus-ring: 0 0 0 3px rgba(174, 145, 66, 0.22);

    /* ── Legacy page-local aliases, FOLDED onto the gold platform ────
       Older standalone pages (game, course-map, admin tools, privacy/terms)
       referenced these short names with their own off-brand values. Pointing
       them at the canonical tokens unifies those pages with zero per-page
       rule changes — they inherit the gold look automatically. */
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --bg: var(--charcoal);
    --panel: var(--bg-secondary);
    --card: var(--card-bg);
    --ink: var(--text-primary);
    --border: var(--border-color);
    --line: var(--border-subtle);
    --accent: var(--primary-color);
    /* Safety-net aliases for names referenced historically but never defined.
       Default to the AA-safe text gold so a stray use can't be invisible. */
    --accent-primary: var(--brand-ink);
    --gold-accent: var(--brand-ink);

    /* ── Compatibility aliases ───────────────────────────────────────
       Names referenced across the codebase that were never defined (they
       resolved to nothing or leaned on scattered inline fallbacks). Pointing
       them at the canonical tokens makes every reference resolve consistently
       and follow the active theme. Prefer the canonical name in new code. */
    --danger-color: var(--danger);
    --success-color: var(--success);
    --warning-color: var(--warning);
    --info-color: var(--info);
    --accent-red: var(--danger);
    --accent-green: var(--success);
    --accent-blue: var(--info);
    --accent-gold: var(--brand-ink);
    --green: var(--success);
    --green-primary: var(--success);
    --primary: var(--primary-color);
    --stat-color: var(--primary-color);
    --text-color: var(--text-primary);
    --bg-hover: var(--hover-bg);
    --bg-tertiary: var(--charcoal-lighter);
    --surface-primary: var(--bg-primary);
    --surface-secondary: var(--bg-secondary);
    --surface-hover: var(--hover-bg);
    --input-bg: var(--gsx-input-bg);
    /* --radius-md is defined in the radius scale above (8px). The old alias to
       --gsx-radius-md (10px) was removed; its 2 consumers use --radius-lg now. */
    --gold-border: rgba(174, 145, 66, 0.4);
    --accent-color-alpha: rgba(174, 145, 66, 0.12);
    --gsx-grid-gap: 1rem;
    --gsx-inline-gap: 0.5rem;
    --gsx-stack-gap: 0.75rem;
    --gsx-modal-width: min(560px, 92vw);
    /* Per-school branding — overridden at runtime by JS; gold defaults so the
       UI is never invalid before a school's colors load. */
    --school-primary: var(--primary-color);
    --school-secondary: var(--charcoal-light);
    --school-primary-bg: rgba(174, 145, 66, 0.12);

    /* ── Z-Index Scale ───────────────────────────────────────────────
       Centralized layering tokens. Use these instead of magic numbers.
       Local stacking (z-index: -1, 0, 1, 2) within components uses literals. */
    --z-sticky: 10;          /* Sticky table headers, toolbar headers */
    --z-sticky-nav: 20;      /* Sticky thead (above --z-sticky rows) */
    --z-dropdown: 50;        /* Autocomplete / search dropdowns */
    --z-sticky-bar: 100;     /* Page headers, tab bars, footer bars */
    --z-sidebar: 200;        /* Mobile sidebars, secondary overlays */
    --z-fab: 800;            /* Floating action buttons (below nav) */
    --z-nav: 900;            /* Primary navigation (bottom nav) */
    --z-nav-label: 901;      /* Nav labels (above nav background) */
    --z-context-menu: 1000;  /* Nav dropdowns, overflow / context menus */
    --z-modal-backdrop: 5000;/* Semi-transparent modal backdrops */
    --z-modal: 5001;         /* Modal dialogs */
    --z-toast: 6000;         /* Toast notifications, alert banners */
    --z-floating-btn: 7000;  /* Persistent floating buttons (help, admin) */
    --z-fullscreen: 8000;    /* Full-screen takeovers (QR, mobile drawer) */
    --z-tour-overlay: 9000;  /* Onboarding tour overlay */
    --z-tour-demo: 9002;     /* Tour demo analytics panel */
    --z-tour-spotlight: 9003;/* Tour spotlight + solid overlay */
    --z-tour-tooltip: 9004;  /* Tour tooltip (highest in system) */
}

/* ── Light Theme ── (mirror of the dark defaults above) */
[data-theme="light"] {
    --charcoal: #f0f0f0;
    --charcoal-light: #f8f8f8;
    --charcoal-lighter: #e2e2e2;
    --white: #1a1a1a;
    --gray-light: #f4f4f4;
    --gray: #c8c8c8;
    --gray-dark: #555;
    --bg-primary: #f5f5f5;
    --bg-secondary: #eaeaea;
    --text-primary: #1a1a1a;
    --text-secondary: #555;
    --text-muted: #666;
    --accent-color: #8a7335;
    --brand-ink: #736022;   /* deep gold — 5.6:1 on light surfaces (WCAG AA) */
    /* Status / score TEXT inks — deep variants that pass AA on white surfaces. */
    --success-ink: #277528;
    --danger-ink:  #c62828;
    --warning-ink: #8a5a00;
    --info-ink:    #1565c0;
    --birdie-ink:  #2e7d32;
    --eagle-ink:   #1565c0;
    --bogey-ink:   #8a5a00;
    --double-ink:  #c62828;
    /* --par-ink follows --text-primary (theme-aware) — no override needed. */
    --card-bg: rgba(255, 255, 255, 0.92);
    --surface-solid: #ffffff;
    --surface-sunken: rgba(0, 0, 0, 0.04);
    --purple-ink: #6d28d9;   /* deep purple — passes AA on light surfaces */
    --card-text: #222;
    --footer-bg: rgba(245, 245, 245, 0.95);
    --border-color: rgba(0, 0, 0, 0.18);
    --border-subtle: rgba(0, 0, 0, 0.12);
    --border-medium: rgba(0, 0, 0, 0.2);
    --border-strong: rgba(0, 0, 0, 0.3);
    --hover-bg: rgba(0, 0, 0, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.25);
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --row-stripe: rgba(0, 0, 0, 0.02);
    --overlay-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 245, 245, 0.85));
    --login-overlay-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(245, 245, 245, 0.45));
    --login-overlay-blur: blur(4px);
    --gsx-input-bg: rgba(255, 255, 255, 0.85);
    --gsx-table-head-bg: rgba(0, 0, 0, 0.04);

    /* Shadows read heavier on light surfaces — soften every elevation step. */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.16);
    --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.20);
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);

    /* Raises flip to black tint on light surfaces (white tint is invisible). */
    --raise-1: rgba(0, 0, 0, 0.02);
    --raise-2: rgba(0, 0, 0, 0.03);
    --raise-3: rgba(0, 0, 0, 0.05);
    --raise-4: rgba(0, 0, 0, 0.07);
    --raise-5: rgba(0, 0, 0, 0.09);
    --hairline-faint: rgba(0, 0, 0, 0.06);
    /* --scrim-* stay dark in both themes (a backdrop dims toward black). */
}

/* (Always-light surface overrides live at the end of this file, after the
   [data-area] block, so they win for white cards inside a colored area.) */

/* ── Area accents ─────────────────────────────────────────────────────
   Each app area gets a distinct accent so it's obvious where you are at a
   glance. Surfaces, fonts, and layout stay shared — only the brand accent
   and its AA-safe text ink shift. Set data-area on <html> (same element as
   data-theme):
     school → gold (original brand)   tournament → blue   casual → green
   neutral → gold (no mode chosen yet — e.g. the "Where to today?" launcher)
   Anything without data-area falls back to the gold :root defaults, but the
   [data-area] re-bind below matches ANY value, so a pre-mode surface must use
   the explicit "neutral" state (not a bare/absent attribute) to stay gold. */
[data-area="neutral"] {
    --area-accent: #ae9142;           /* brand gold — mirrors School, our origin accent */
    --area-accent-dark: #8a7335;
    --area-accent-light: #c5a961;
    --area-accent-ink: #c5a961;       /* dark-theme text */
    --area-accent-ink-deep: #736022;  /* text on always-light surfaces */
    --area-on-accent: #ffffff;
    --area-accent-rgb: 174, 145, 66;
}

[data-area="school"] {
    --area-accent: #ae9142;
    --area-accent-dark: #8a7335;
    --area-accent-light: #c5a961;
    --area-accent-ink: #c5a961;       /* dark-theme text */
    --area-accent-ink-deep: #736022;  /* text on always-light surfaces */
    --area-on-accent: #ffffff;        /* text on the gold fill — white by product decision (see --gsx-on-brand) */
    --area-accent-rgb: 174, 145, 66;
}

[data-area="tournament"] {
    --area-accent: #2563eb;
    --area-accent-dark: #1d4fb8;
    --area-accent-light: #5b9bf0;
    --area-accent-ink: #64b5f6;
    --area-accent-ink-deep: #1565c0;
    --area-on-accent: #ffffff;
    --area-accent-rgb: 37, 99, 235;
}

[data-area="casual"] {
    --area-accent: #15803d;           /* AA: white-on-fill 5.02:1 */
    --area-accent-dark: #116231;
    --area-accent-light: #34d399;     /* cleaner emerald — was lime #4ade80 */
    --area-accent-ink: #34d399;       /* dark-theme text: cleaner emerald, not lime */
    --area-accent-ink-deep: #166534;  /* text on always-light: 7.13:1 on white */
    --area-on-accent: #ffffff;
    --area-accent-rgb: 21, 128, 61;
}

/* Light-theme text inks — deep variants that pass AA on white surfaces
   (compound selector: data-theme + data-area on the same <html> element). */
[data-theme="light"][data-area="neutral"] { --area-accent-ink: #736022; }
[data-theme="light"][data-area="school"] { --area-accent-ink: #736022; }
[data-theme="light"][data-area="tournament"] { --area-accent-ink: #1565c0; }
[data-theme="light"][data-area="casual"] { --area-accent-ink: #166534; }

/* Re-bind the shared brand tokens to the active area. Cascades to everything
   inside, including body-appended modals/toasts. */
[data-area] {
    --primary-color: var(--area-accent);
    --primary-dark: var(--area-accent-dark);
    --primary-light: var(--area-accent-light);
    --accent: var(--area-accent);
    --accent-color: var(--area-accent);
    --gold: var(--area-accent);
    --gold-dark: var(--area-accent-dark);
    --gold-light: var(--area-accent-light);
    --gsx-brand: var(--area-accent);
    --gsx-brand-dark: var(--area-accent-dark);
    --gsx-brand-light: var(--area-accent-light);
    --gsx-brand-rgb: var(--area-accent-rgb);
    --brand-ink: var(--area-accent-ink);
    --gsx-on-brand: var(--area-on-accent);
    --gsx-focus-ring: 0 0 0 3px rgba(var(--area-accent-rgb), 0.3);
    --row-hover: rgba(var(--area-accent-rgb), 0.08);
}

/* ── Always-light surfaces ───────────────────────────────────────────
   Some panels stay white in BOTH themes (login cards, printed/exported
   panels). The *-ink tokens are keyed to the active theme, so on a hard-light
   surface shown in DARK mode they'd resolve to the bright (dark-surface)
   variant and fail contrast. Force the deep inks (and dark neutrals) so
   status/score/brand TEXT always meets AA. brand-ink uses the active area's
   deep ink (so a white card inside the casual area still reads violet, not
   gold), falling back to the gold deep when no area is set. Declared AFTER the
   [data-area] block so it wins for white cards inside a colored area. Add the
   .surface-light class to any panel that's light regardless of theme. */
.login-card,
.surface-light,
.login-box,
.pending-box {
    --brand-ink: var(--area-accent-ink-deep, #736022);
    /* Card is WHITE in both themes — pin the neutral text tokens dark so they
       don't flip to light values (e.g. --charcoal #f0f0f0) and vanish on white. */
    --charcoal: #1a1a1a;
    --text-primary: #1a1a1a;
    --text-secondary: #5b5b5b;
    --success-ink: #277528;
    --danger-ink: #c62828;
    --warning-ink: #8a5a00;
    --info-ink: #1565c0;
    --birdie-ink: #2e7d32;
    --eagle-ink: #1565c0;
    --bogey-ink: #8a5a00;
    --double-ink: #c62828;
    --par-ink: #1a1a1a;
    --text-muted: #666;
    /* White card → dark borders in BOTH themes (the flipping --border-* would go
       light and vanish on white when this surface is shown in dark mode). */
    --border-color: rgba(0, 0, 0, 0.16);
    --border-subtle: rgba(0, 0, 0, 0.10);
    --border-medium: rgba(0, 0, 0, 0.20);
    --border-strong: rgba(0, 0, 0, 0.30);
}

/* ───────────────────────────────────────────────────────────────────────
   WOW layer tokens (2026-07-04, see docs/VISUAL_WOW_ROADMAP.md).
   Hero surfaces, surface gradients, layered depth — the design-energy pass
   on top of the frozen base system. Area-keyed pieces derive from
   --gsx-brand so School/Host/Casual each get their own energy for free.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* ONE dark hero card per screen (WHOOP pattern): charcoal, never #000.
       Lifted a notch from the near-black #1c2429/#263037 — that read a touch
       overpowering as an inline block among light content (user feedback). */
    --surface-hero: #26313a;      /* mid-charcoal — present, not heavy */
    --surface-hero-2: #313e48;
    --on-hero: #f4f7f5;
    --on-hero-muted: rgba(244, 247, 245, 0.62);
    --hero-border: rgba(255, 255, 255, 0.08);
    --hero-wash: linear-gradient(160deg, var(--surface-hero-2) 0%, var(--surface-hero) 62%);

    /* Area-energy surface gradients (≤20% mix keeps text contrast). */
    --gradient-accent: linear-gradient(135deg,
        color-mix(in srgb, var(--gsx-brand) 88%, #ffffff) 0%,
        var(--gsx-brand) 55%,
        color-mix(in srgb, var(--gsx-brand) 78%, #000000) 100%);
    --gradient-subtle: linear-gradient(135deg,
        color-mix(in srgb, var(--gsx-brand) 14%, var(--gsx-surface)) 0%,
        var(--gsx-surface) 70%);
    /* Deep variant: no white mix — stays on the true area color end to end.
       (The 12%-white stop of --gradient-accent reads lime over casual green.) */
    --gradient-accent-deep: linear-gradient(135deg,
        var(--gsx-brand) 0%,
        color-mix(in srgb, var(--gsx-brand) 78%, #000000) 60%,
        color-mix(in srgb, var(--gsx-brand) 62%, #000000) 100%);

    /* Layered float shadow (Comeau 5-layer, one light source, vertical = 2x). */
    --shadow-float:
        0 1px 1px rgba(10, 20, 15, 0.05),
        0 2px 2px rgba(10, 20, 15, 0.05),
        0 4px 8px rgba(10, 20, 15, 0.06),
        0 8px 16px rgba(10, 20, 15, 0.07),
        0 16px 32px rgba(10, 20, 15, 0.08);
    --shadow-hero:
        0 1px 2px rgba(5, 12, 9, 0.10),
        0 4px 12px rgba(5, 12, 9, 0.12);   /* soft — must never swallow the row below */

    /* Score grammar accents (broadcast convention: under par pops). */
    --score-under: #e5484d;          /* classic broadcast red for under par */
    --score-under-wash: rgba(229, 72, 77, 0.14);

    /* Solid toast fills. Success is the DEEP platform green — the old
       rgba(--gsx-success-rgb,.95) resolved to bright #4CAF50 and read lime
       (user report). Washes elsewhere keep the original success token. */
    --toast-success: #2e7d32;

    /* Stats-dashboard chart palette (score-mix donut, bars, rings) — vivid,
       distinct, and legible in both themes. */
    --chart-eagle:  #f2a63b;         /* amber-gold — eagle or better */
    --chart-birdie: #2e9e5b;         /* green — birdie */
    --chart-par:    #3b82c4;         /* blue — par (even) */
    --chart-bogey:  #e8863b;         /* orange — bogey */
    --chart-double: #e5484d;         /* red — double+ */
    --chart-track:  rgba(128, 140, 150, 0.18);   /* unfilled ring/bar track */
}

[data-theme="light"] {
    --shadow-float:
        0 1px 1px rgba(20, 40, 30, 0.04),
        0 2px 2px rgba(20, 40, 30, 0.04),
        0 4px 8px rgba(20, 40, 30, 0.05),
        0 8px 16px rgba(20, 40, 30, 0.06),
        0 16px 32px rgba(20, 40, 30, 0.07);
}

:root {
    /* Leaderboard podium rails (fixed metals, theme-agnostic). */
    --podium-gold: #d4a72c;
    --podium-silver: #9aa5b1;
    --podium-bronze: #b0793f;
}