/*
 * PWHL design tokens — single source of truth for color, type, spacing,
 * elevation, and team theming. Loaded before style.css; component CSS
 * references these via var(--…).
 */
:root, :root[data-theme="light"] {
    /* ---------- PWHL brand ---------- */
    --brand-navy:        #0A2540;
    --brand-navy-deep:   #061a2f;
    --brand-orange:      #F26B21;
    --brand-orange-soft: rgba(242, 107, 33, 0.12);
    --brand-ice:         #f7fafc;
    --brand-ink:         #14181f;

    /* ---------- Surfaces ---------- */
    /* Page background uses a subtle navy→cream gradient (see --bg-gradient
     * below). --bg keeps a solid fallback color for elements that read it
     * directly (legacy cards, .card-ref). */
    --bg:                #f1efe8;   /* warm cream — solid fallback */
    --bg-gradient-top:   #f4f1ea;   /* warm cream */
    --bg-gradient-bottom:#dfe5ee;   /* faint navy-tinted cream */
    --bg-gradient:       linear-gradient(180deg,
                            var(--bg-gradient-top) 0%,
                            var(--bg-gradient-bottom) 100%);
    --surface:           #ffffff;   /* default card surface */
    --surface-raised:    #ffffff;
    --surface-sunken:    #f0f3f7;
    --surface-hero:      linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-deep) 50%, #050f1c 100%);
    --surface-hero-overlay: radial-gradient(circle at 80% 20%, rgba(242, 107, 33, 0.18), transparent 55%),
                            radial-gradient(circle at 10% 80%, rgba(10, 108, 241, 0.18), transparent 60%);

    /* Elevated greys (table heads, sub-heads, hover states) */
    --bg-elevated:        #f0f2f6;
    --bg-elevated-strong: #e5e9ef;
    --bg-chip:            #eef2f7;
    --bg-chip-active:     #dbeafe;

    /* ---------- Ink ---------- */
    --ink:        var(--brand-ink);
    --ink-muted:  #5b6472;
    --ink-dim:    #8a93a1;

    /* ---------- Borders ---------- */
    --border:        #e3e6ec;
    --border-strong: #cdd3dc;

    /* ---------- Accents ---------- */
    --accent:             #0a6cf1;
    --accent-strong:      #084fc1;
    --accent-soft:        rgba(10, 108, 241, 0.08);
    --accent-soft-strong: rgba(10, 108, 241, 0.18);
    --navy:               var(--brand-navy);

    /* ---------- Semantic ---------- */
    --goal:               #c0392b;
    --pos:                #15803d;
    --neg:                #b91c1c;
    --amber:              #f59e0b;
    --amber-soft:         rgba(245, 158, 11, 0.08);
    --warn-bg:            #fff7e0;
    --warn-border:        #f2d66a;
    --youtube-red:        #cc0000;
    --youtube-red-strong: #990000;

    /* ---------- Typography ---------- */
    --font-display: "Barlow Condensed", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fs-display:   clamp(2.4rem, 4.5vw, 3.6rem);
    --fs-h1:        clamp(1.6rem, 2.4vw, 2.1rem);
    --fs-h2:        1.35rem;
    --fs-h3:        1.1rem;
    --fs-body:      0.95rem;
    --fs-sm:        0.82rem;
    --fs-xs:        0.72rem;

    --lh-tight:     1.05;
    --lh-snug:      1.25;
    --lh-body:      1.5;

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

    /* ---------- Radii & shadows ---------- */
    --radius:           8px;
    --radius-sm:        4px;
    --radius-card:      14px;
    --radius-photo:     12px;
    --radius-pill:      999px;
    --accent-bar:       3px;

    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:        0 4px 12px rgba(10, 37, 64, 0.08);
    --shadow-pop:       0 8px 24px rgba(10, 37, 64, 0.18);
    --shadow-card:      0 4px 14px rgba(10, 37, 64, 0.10), 0 1px 2px rgba(10, 37, 64, 0.06);
    --shadow-card-pop:  0 10px 30px rgba(10, 37, 64, 0.18);
    --shadow-hero:      0 20px 60px rgba(10, 37, 64, 0.35);

    /* ---------- Controls ---------- */
    --control-height: 38px;

    /* ---------- Team theming defaults — overridden per-card via inline style. ---------- */
    --team-color:          var(--brand-navy);
    --team-color-soft:     rgba(10, 37, 64, 0.08);
    --team-color-contrast: #ffffff;
}

/* ---------- Dark theme ----------
 * Charcoal navy palette. Activated by setting data-theme="dark" on <html>
 * (handled by an inline pre-paint script in base.html, persisted to
 * localStorage). Only color tokens flip — type, spacing, and radii stay
 * shared with light. */
:root[data-theme="dark"] {
    --bg:                #0a1422;
    --bg-gradient-top:   #0e1a2b;
    --bg-gradient-bottom:#07101c;
    --bg-gradient:       linear-gradient(180deg,
                            var(--bg-gradient-top) 0%,
                            var(--bg-gradient-bottom) 100%);
    --surface:           #142235;
    --surface-raised:    #1a2c43;
    --surface-sunken:    #0d1a2c;

    --bg-elevated:        #1a2c43;
    --bg-elevated-strong: #223956;
    --bg-chip:            #1d2e46;
    --bg-chip-active:     #1c3a66;

    --ink:        #e8ecf2;
    --ink-muted:  #9aa6b7;
    --ink-dim:    #6f7d92;

    --border:        #233247;
    --border-strong: #344766;

    --accent:             #4d9aff;
    --accent-strong:      #6fb1ff;
    --accent-soft:        rgba(77, 154, 255, 0.12);
    --accent-soft-strong: rgba(77, 154, 255, 0.22);

    /* Semantic colors get a slight lift for dark-mode contrast. */
    --goal:        #ff6b5b;
    --pos:         #4ade80;
    --neg:         #ff7b7b;
    --amber:       #fbbf24;
    --amber-soft:  rgba(251, 191, 36, 0.14);
    --warn-bg:     #2a2415;
    --warn-border: #5a4a1a;

    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-pop:       0 8px 24px rgba(0, 0, 0, 0.55);
    --shadow-card:      0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card-pop:  0 10px 30px rgba(0, 0, 0, 0.55);
    --shadow-hero:      0 20px 60px rgba(0, 0, 0, 0.65);
}