/**
 * Digital Tactician — Design Token System
 * Source of Truth: docs/desgins/DESIGN.md
 *
 * Architecture:
 *   :root          → Light mode (DEFAULT — Athletic Blue from DESIGN.md §2)
 *   html.theme-dark → Deep navy surfaces + Athletic Blue accents (same brand as §2)
 *
 * Rules:
 *   • ALL color usage must reference a variable from this file.
 *   • No hardcoded hex values outside this file.
 *   • No 1px solid borders for containment — use tonal background shifts.
 *   • No dividers — use 24px vertical whitespace or background tier change.
 *   • --primary-container is a laser, not a floodlight.
 */

/* ============================================================
   LIGHT MODE — :root (DEFAULT)
   Athletic Blue + tertiary red (DESIGN.md §2).
   ============================================================ */
:root {
  /* ---- Surface Hierarchy (Lowest → Highest) ----
     Aligned with main branch html.theme-light: page #f8f9fa, panels #fff, tier #e9ecef */
  --surface-lowest:         #ffffff;
  --surface:                #f8f9fa;
  --surface-container-low:  #f8f9fa;
  --surface-container:      #ffffff;
  --surface-container-high: #f1f3f5;
  --surface-highest:        #e9ecef;

  /* ---- Accent Colors ---- */
  --primary:                #00456a;   /* darker blue — gradients */
  --primary-container:      #006492;   /* Athletic Blue */
  --primary-fixed:          #5eb8e0;   /* lighter blue — hover / accents */
  --on-primary:             #ffffff;
  --on-primary-container:   #001d2e;

  --secondary:              #0058cb;   /* deep Tactical Blue — legible on light */
  --secondary-container:    #d8e2ff;
  --on-secondary:           #ffffff;
  --on-secondary-container: #001849;

  --error:                  #b4252a;   /* aligned with tertiary / live-alert red */
  --error-container:        #ffdad6;
  --on-error:               #ffffff;
  --on-error-container:     #410002;

  --tertiary:               #b4252a;   /* Live / high-alert (DESIGN.md §2) */
  --tertiary-container:     #ffdad6;
  --on-tertiary:            #ffffff;
  --on-tertiary-container:  #410002;

  /* ---- Text ---- */
  --on-surface:             #191c20;
  --on-surface-variant:     #44484d;

  /* ---- Outlines ---- */
  --outline:                #74777f;
  --outline-variant:        #c4c7c5;

  /* ---- Glass / Nav ---- */
  --nav-glass-bg:           rgba(248, 249, 250, 0.88);
  --nav-glass-shadow:       0 8px 32px rgba(23, 27, 44, 0.06);

  /* ---- Semantic Aliases (used by premium.css bridge) ---- */
  --te-bg:                  var(--surface);
  --te-bg-raised:           var(--surface-container-low);
  --te-card-bg:             var(--surface-container);
  --te-card-bg-hover:       var(--surface-container-high);
  --te-text:                var(--on-surface);
  --te-text-dim:            var(--on-surface-variant);
  --te-accent:              var(--primary-container);
  --te-accent-on:           var(--on-primary);
  --te-muted:               var(--outline);
  --te-border:              rgba(116, 119, 127, 0.18);
  --te-border-subtle:       rgba(116, 119, 127, 0.10);

  /* ---- Semantic tints ---- */
  --te-accent-tint:         color-mix(in srgb, var(--primary-container) 10%, transparent);
  --te-error-tint:          color-mix(in srgb, var(--error) 7%, transparent);
  --te-secondary-tint:      color-mix(in srgb, var(--secondary) 10%, transparent);

  /* ---- Ambient shadows (light mode — tinted on_surface, not pure black) ---- */
  --te-shadow-sm:           0 1px 3px rgba(23, 27, 44, 0.07);
  --te-shadow-md:           0 4px 16px rgba(23, 27, 44, 0.08);
  --te-shadow-lg:           0 8px 32px rgba(23, 27, 44, 0.06);
  --te-shadow-ambient:      0 40px 60px rgba(23, 27, 44, 0.05);

  /* ---- Typography ---- */
  --te-font:                'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --te-label-size:          0.6875rem;
  --te-label-spacing:       0.07em;
  --te-label-weight:        700;
  --te-data-weight:         800;

  /* ---- Radius ---- */
  --te-radius-sm:           6px;
  --te-radius-md:           8px;
  --te-radius-lg:           12px;
  --te-radius-xl:           16px;
  --te-radius-full:         9999px;

  color-scheme: light;

  /* ---- Transitions ---- */
  --te-transition-fast:     160ms cubic-bezier(0.4, 0, 0.2, 1);
  --te-transition-base:     260ms cubic-bezier(0.4, 0, 0.2, 1);
  --te-transition-expand:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Match list / daily fixture row (fixed score column width across cards) ---- */
  --daily-match-center-track: 12.5rem;

  /* ---- Form result colors (W = win green — football tables / form badges) ---- */
  --te-win:                 #0f6b41;
  --te-win-bg:              color-mix(in srgb, #0f6b41 20%, transparent);
  --te-draw:                #c78a2f;
  --te-draw-bg:             color-mix(in srgb, #c78a2f 18%, transparent);
  --te-loss:                var(--error);
  --te-loss-bg:             color-mix(in srgb, var(--error) 18%, transparent);

  /* ---- Phase 1 semantic aliases — canonical success/danger/warning ----
   * Aliases over the form-result + error tokens. Auto-adapt to dark mode
   * via the html.theme-dark overrides of --te-win / --te-draw / --error.
   */
  --success:                var(--te-win);
  --success-tint:           color-mix(in srgb, var(--te-win) 12%, transparent);
  --danger:                 var(--error);
  --danger-tint:            var(--te-error-tint);
  --warning:                var(--te-draw);
  --warning-tint:           color-mix(in srgb, var(--te-draw) 12%, transparent);

  /* ---- Live standings provisional row (caution — distinct from live-alert tertiary) ---- */
  --te-caution:             #9a7200;
  --te-live-provisional-bg: color-mix(in srgb, var(--te-caution) 16%, var(--surface-container-low));
  --te-live-provisional-bg-strong: color-mix(in srgb, var(--te-caution) 26%, var(--surface-container));

  /* ---- Match standings: Official / Live segmented control + LIVE badge ---- */
  --standings-mode-toggle-track: var(--surface-container-low);
  --standings-live-badge-bg: color-mix(in srgb, var(--error) 14%, var(--surface-container));
  --standings-live-badge-text: var(--error);
  --live-result-fg: var(--error);

  /* ---- Live standings: changed cells, playing row, hero score outcome pills ---- */
  --live-standings-changed-fg: var(--error);
  --live-standings-changed-weight: 600;
  --live-team-row-bg: color-mix(in srgb, var(--te-caution) 10%, var(--surface-container-low));
  --live-team-row-shadow: 0 4px 22px color-mix(in srgb, var(--te-caution) 16%, transparent);
  --live-score-pill-win-bg: var(--te-win);
  --live-score-pill-win-fg: var(--surface-lowest);
  --live-score-pill-lose-bg: var(--error);
  --live-score-pill-lose-fg: var(--surface-lowest);
  --live-score-pill-draw-bg: #d97706;
  --live-score-pill-draw-fg: var(--surface-lowest);
  --live-rating-elite-bg: color-mix(in srgb, var(--te-win) 24%, var(--surface-container));
  --live-rating-elite-fg: color-mix(in srgb, var(--te-win) 90%, var(--on-surface) 10%);
  --live-rating-high-bg: color-mix(in srgb, var(--te-win) 16%, var(--surface-container));
  --live-rating-high-fg: color-mix(in srgb, var(--te-win) 72%, var(--on-surface) 28%);
  --live-rating-mid-bg: color-mix(in srgb, var(--outline-variant) 30%, var(--surface-container));
  --live-rating-mid-fg: var(--on-surface-variant);
  --live-rating-low-bg: color-mix(in srgb, var(--te-caution) 22%, var(--surface-container));
  --live-rating-low-fg: color-mix(in srgb, var(--te-caution) 88%, var(--on-surface) 12%);
  --live-rating-poor-bg: color-mix(in srgb, var(--error) 18%, var(--surface-container));
  --live-rating-poor-fg: color-mix(in srgb, var(--error) 86%, var(--on-surface) 14%);

  /* ---- Live final-grace state (FT card shown briefly before removal) ---- */
  --live-final-surface:    var(--surface-container-high);
  --live-final-opacity:    0.92;
  --live-final-badge-bg:   var(--surface-container-high);
  --live-final-badge-fg:   var(--on-surface-variant);

  /* ---- Match standings: fixture hover tooltip (elevated card) ---- */
  --standings-mc-tooltip-bg: color-mix(in srgb, var(--surface-container-high) 88%, var(--surface-lowest) 12%);
  --standings-mc-tooltip-shadow: 0 16px 48px color-mix(in srgb, var(--on-surface) 14%, transparent);

  /* ---- Match standings: focus mode (hover/tap — dual fixture highlight) ---- */
  --standings-focus-active-bg: color-mix(in srgb, var(--primary-container) 11%, var(--surface-container-low));
  --standings-focus-active-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-container) 16%, transparent) 0%,
    color-mix(in srgb, var(--surface-container) 94%, transparent) 100%
  );
  --standings-focus-glow: 0 12px 40px color-mix(in srgb, var(--primary-container) 20%, transparent);
  --standings-focus-border: var(--primary-container);

  /* ---- League table: API qualification row tints (distinct hues + matching left-bar tokens) ---- */
  --standings-zone-cl-bg: color-mix(in srgb, var(--te-win) 18%, var(--surface-container-low));
  --standings-zone-cl-bar: color-mix(in srgb, var(--te-win) 88%, var(--on-surface) 12%);

  /* UCL league phase ~9–24: knockout play-offs (teal — not direct CL green, not EL orange) */
  --standings-zone-cl-playoff-bg: color-mix(
    in srgb,
    var(--primary-container) 15%,
    color-mix(in srgb, var(--te-win) 11%, var(--surface-container-low))
  );
  --standings-zone-cl-playoff-bar: color-mix(in srgb, var(--primary-container) 72%, var(--te-win) 28%);

  /* UCL league phase 25–36: neutral slate (eliminated — not domestic relegation red) */
  --standings-zone-cl-eliminated-bg: color-mix(in srgb, var(--outline) 11%, var(--surface-container-low));
  --standings-zone-cl-eliminated-bar: color-mix(in srgb, var(--outline) 48%, var(--on-surface) 52%);

  /* Europa League: warm orange (distinct from cool Conference / blues) */
  --standings-zone-el-bg: color-mix(in srgb, var(--te-caution) 24%, var(--surface-container-low));
  --standings-zone-el-bar: color-mix(in srgb, var(--te-caution) 82%, var(--on-surface) 18%);

  /* Conference League: soft indigo / lavender (secondary-container) */
  --standings-zone-ecl-bg: color-mix(in srgb, var(--secondary-container) 38%, var(--surface-container-low));
  --standings-zone-ecl-bar: color-mix(in srgb, var(--secondary) 68%, var(--primary-fixed) 32%);

  --standings-zone-relegation-bg: color-mix(in srgb, var(--error) 20%, var(--surface-container-low));
  --standings-zone-relegation-bar: var(--error);

  /* Relegation play-offs: muted slate–amber (not EL orange, not relegation red) */
  --standings-zone-playoff-bg: color-mix(
    in srgb,
    var(--outline) 16%,
    color-mix(in srgb, var(--te-caution) 9%, var(--surface-container-low))
  );
  --standings-zone-playoff-bar: color-mix(in srgb, var(--outline) 42%, var(--te-caution) 58%);

  --standings-zone-promoted-bg: color-mix(in srgb, var(--te-win) 24%, var(--surface-container-low));
  --standings-zone-promoted-bar: color-mix(in srgb, var(--te-win) 72%, var(--primary-container) 28%);

  --standings-zone-promoted-playoff-bg: color-mix(
    in srgb,
    var(--primary-fixed) 12%,
    color-mix(in srgb, var(--secondary-container) 22%, var(--surface-container-low))
  );
  --standings-zone-promoted-playoff-bar: color-mix(in srgb, var(--primary-container) 58%, var(--secondary) 42%);

  /* ---- Probability bar gradient ---- */
  --te-bar-gradient:        linear-gradient(to right, var(--primary), var(--primary-container));

  /* ---- Glassmorphism ---- */
  --te-glass-bg:            rgba(255, 255, 255, 0.65);
  --te-glass-border:        rgba(116, 119, 127, 0.12);

  /* ---- Match stats: home/away share bar (proportional split — blue vs neutral slate for contrast) ---- */
  --mc-stat-compare-home:    color-mix(in srgb, var(--primary-container) 78%, var(--primary) 22%);
  --mc-stat-compare-away:    color-mix(in srgb, var(--outline) 42%, var(--surface-container-high) 58%);
  --mc-stat-compare-neutral: color-mix(in srgb, var(--on-surface-variant) 36%, var(--surface-container-high) 64%);
  --mc-stat-compare-track:   var(--surface-container);
  --mc-stat-compare-home-gradient: linear-gradient(90deg, color-mix(in srgb, var(--primary) 35%, transparent), var(--primary-container));
  --mc-stat-compare-away-gradient: linear-gradient(270deg, color-mix(in srgb, var(--secondary) 28%, transparent), color-mix(in srgb, var(--outline) 55%, var(--surface-container-high) 45%));
  --mc-stat-compare-home-strong: linear-gradient(90deg, var(--primary), var(--primary-container));
  --mc-stat-compare-away-strong: linear-gradient(270deg, color-mix(in srgb, var(--secondary-container) 70%, var(--outline) 30%), color-mix(in srgb, var(--outline) 38%, var(--surface-container-high) 62%));
  --mc-battle-hero-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-container) 16%, var(--surface-container-low)) 0%,
    color-mix(in srgb, var(--surface-container) 86%, var(--surface-lowest) 14%) 100%
  );
  --mc-battle-hero-shadow: 0 30px 64px color-mix(in srgb, var(--on-surface) 12%, transparent);
  --mc-battle-hero-track: color-mix(in srgb, var(--on-surface) 8%, var(--surface-container-high));
  --mc-battle-card-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-container-low) 86%, var(--surface-lowest) 14%),
    color-mix(in srgb, var(--surface-container) 82%, var(--surface-lowest) 18%)
  );
  --mc-battle-card-shadow: 0 14px 34px color-mix(in srgb, var(--on-surface) 14%, transparent);
  --mc-battle-card-shadow-open: 0 18px 42px color-mix(in srgb, var(--on-surface) 18%, transparent);
  --mc-battle-row-bg: color-mix(in srgb, var(--surface-container-high) 78%, var(--surface-container-low) 22%);
  --mc-battle-row-bg-hover: color-mix(in srgb, var(--surface-container-high) 66%, var(--primary-container) 34%);
  --mc-battle-row-shadow-hover: 0 14px 28px color-mix(in srgb, var(--primary-container) 24%, transparent);
  --mc-battle-row-track: color-mix(in srgb, var(--outline-variant) 22%, var(--surface-container-high));
  --mc-battle-home-value: color-mix(in srgb, var(--te-win) 80%, var(--primary-container) 20%);
  --mc-battle-away-value: color-mix(in srgb, var(--secondary) 72%, var(--primary-container) 28%);
  --mc-battle-home-gradient-strong: linear-gradient(90deg, color-mix(in srgb, var(--te-win) 78%, var(--primary-container) 22%), color-mix(in srgb, var(--te-win) 56%, var(--primary) 44%));
  --mc-battle-away-gradient-strong: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 78%, var(--primary-container) 22%), color-mix(in srgb, var(--secondary-container) 56%, var(--secondary) 44%));
  --mc-battle-glow-home: color-mix(in srgb, var(--te-win) 48%, transparent);
  --mc-battle-glow-away: color-mix(in srgb, var(--secondary) 46%, transparent);
  --mc-battle-glow-home-strong: color-mix(in srgb, var(--te-win) 68%, transparent);
  --mc-battle-glow-away-strong: color-mix(in srgb, var(--secondary) 66%, transparent);
  --mc-battle-danger-row-bg: color-mix(in srgb, var(--error) 12%, var(--surface-container-high));
  --mc-battle-danger-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--error) 82%, var(--tertiary)),
    color-mix(in srgb, var(--error) 58%, var(--surface-container-high))
  );
  --mc-battle-impact-ring: color-mix(in srgb, var(--secondary) 58%, var(--primary-container));
  --mc-battle-top-edge-ring: color-mix(in srgb, var(--primary-container) 76%, var(--te-win) 24%);

  /* ---- Lineup bench: substitute who played (darker tile vs DNP bench — readable on light surfaces) ---- */
  --lu-bench-played-bg:            color-mix(in srgb, var(--surface-highest) 72%, var(--primary-container) 22%);
  --lu-bench-played-card-shadow:   0 4px 16px color-mix(in srgb, var(--on-surface) 16%, transparent),
                                   inset 0 1px 0 color-mix(in srgb, var(--on-surface) 10%, transparent);
  --lu-bench-played-avatar-ring:  color-mix(in srgb, var(--on-surface) 88%, transparent);
  --lu-bench-played-avatar-shadow: 0 3px 12px color-mix(in srgb, var(--on-surface) 32%, transparent),
                                    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 16%, transparent);

  /* ---- Lineup events strip chips (event-color system) ---- */
  --lu-event-strip-goal:  var(--te-win);
  --lu-event-strip-card-yellow: color-mix(in srgb, #facc15 88%, var(--on-surface) 12%);
  --lu-event-strip-subst: var(--primary-container);
  --lu-event-strip-var:   color-mix(in srgb, var(--error) 44%, #facc15 56%);
  --lu-event-strip-missed-pen: var(--error);

  /* ---- Match Center restyle: hero + events timeline (LIGHT — bright stadium wash) ---- */
  --mc-hero-surface-1: #edf3fb;
  --mc-hero-surface-2: #eaf2fb;
  --mc-hero-accent-wash: color-mix(in srgb, var(--primary-container) 18%, transparent);
  --mc-hero-team-home: var(--primary-container);
  --mc-hero-team-away: var(--primary-container);
  --mc-hero-gradient:
    radial-gradient(ellipse 70% 50% at 50% 120%, color-mix(in srgb, var(--primary-container) 12%, transparent), transparent 65%),
    radial-gradient(ellipse 90% 70% at 50% -20%, #ffffff 40%, transparent 70%),
    linear-gradient(180deg, var(--mc-hero-surface-1) 0%, #e2ecf7 50%, var(--mc-hero-surface-2) 100%);
  --mc-hero-shadow: 0 40px 80px color-mix(in srgb, var(--primary-container) 14%, transparent);
  --mc-hero-on-surface: #0c1726;
  --mc-hero-on-surface-dim: color-mix(in srgb, #0c1726 58%, transparent);
  --mc-hero-divider: color-mix(in srgb, #0c1726 12%, transparent);
  --mc-hero-chip-bg: color-mix(in srgb, #0c1726 7%, transparent);
  --mc-hero-grid-line: color-mix(in srgb, var(--primary-container) 10%, transparent);
  --mc-page-gradient:
    radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--primary-container) 8%, transparent), transparent 65%),
    linear-gradient(180deg, #eff5fc 0%, #f6f9fc 60%, #f6f9fc 100%);
  --mc-card-bg: color-mix(in srgb, #ffffff 94%, var(--primary-container) 6%);
  --mc-card-ring: color-mix(in srgb, var(--primary-container) 10%, transparent);
  --mc-live-bg: color-mix(in srgb, var(--error) 14%, var(--surface-container));
  --mc-live-fg: var(--error);
  --mc-live-dot: var(--error);
  --mc-ev-axis-line: var(--surface-highest);
  --mc-ev-tile-bg: var(--surface-container-high);
  --mc-ev-minute-fg: var(--error);
  --mc-ev-dot-home: var(--error);
  --mc-ev-dot-away: var(--on-surface-variant);
  --mc-ev-dot-card: var(--te-caution);

  /* ---- Home dashboard hero + stat row (LIGHT — tonal panel, readable on page surface) ---- */
  --home-hero-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-container) 11%, var(--surface-container)) 0%,
      color-mix(in srgb, var(--primary-fixed) 8%, var(--surface-container-high)) 44%,
      var(--surface-highest) 100%
    );
  --home-hero-shadow: 0 20px 50px color-mix(in srgb, var(--primary-container) 16%, transparent);
  --home-hero-ink: var(--on-surface);
  --home-hero-deco-bg:
    radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--surface-lowest) 22%, var(--primary-fixed) 78%), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 30%, color-mix(in srgb, var(--error) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 80% 65% at 95% 80%, color-mix(in srgb, var(--primary-container) 22%, transparent), transparent 60%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--on-surface) 5%, transparent));
  --home-hero-wash-bg:
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--on-surface) 4%, transparent) 0 2px,
      transparent 2px 6px
    );
  --home-hero-wash-opacity: 0.4;
  --home-hero-wash-blend: normal;
  --home-hero-stat-bg: color-mix(in srgb, var(--on-surface) 5%, var(--surface-container));
  --home-hero-stat-bg-hover: color-mix(in srgb, var(--on-surface) 8%, var(--surface-container-high));
  --home-hero-stat-head: color-mix(in srgb, var(--on-surface-variant) 94%, var(--on-surface) 6%);
  --home-hero-stat-sub: color-mix(in srgb, var(--on-surface-variant) 90%, var(--on-surface) 10%);
  --home-hero-stat-shadow: 0 14px 30px color-mix(in srgb, var(--on-surface) 8%, transparent);
  --home-hero-stat-accent-leagues: color-mix(in srgb, var(--secondary-container) 52%, var(--primary-container) 48%);
  --home-hero-stat-accent-ranked: var(--te-win);

  /* ---- Brand (taqtiQ) — absolute, theme-invariant. Logo / wordmark Q only. ---- */
  --brand-cyan:             #00E0FF;
  --brand-green:            #2BF59A;
}

/* ============================================================
   DARK MODE — html.theme-dark
   Deep navy surfaces + Athletic Blue (DESIGN.md §2, dark extension)
   ============================================================ */
html.theme-dark {
  color-scheme: dark;

  /* ---- Surface Hierarchy ---- */
  --surface-lowest:         #0a0e17;
  --surface:                #0f131c;
  --surface-container-low:  #181c24;
  --surface-container:      #1c2029;
  --surface-container-high: #262a33;
  --surface-highest:        #31353e;

  /* ---- Accent Colors ---- */
  --primary:                #00456a;   /* darker blue — gradients (same hue as :root) */
  --primary-container:      #006492;   /* Athletic Blue (DESIGN.md §2) */
  --primary-fixed:          #5eb8e0;   /* lighter — hover / accents */
  --on-primary:             #ffffff;
  --on-primary-container:   #001d2e;

  --secondary:              #b1c5ff;   /* Tactical Blue */
  --secondary-container:    #036cfb;
  --on-secondary:           #002c70;
  --on-secondary-container: #fefcff;

  --error:                  #be1d33;   /* Analytics Red */
  --error-container:        #93000a;
  --on-error:               #690005;
  --on-error-container:     #ffdad6;

  --tertiary:               #fff9f9;
  --tertiary-container:     #ffd4d3;
  --on-tertiary:            #680013;
  --on-tertiary-container:  #be1d33;

  /* ---- Text (WCAG-friendly on navy surfaces — secondary/muted bright enough vs tabs, cards, footer) ---- */
  --on-surface:             #e8eaf4;
  --on-surface-variant:     #b4bdd1;

  /* ---- Outlines ---- */
  --outline:                #9aa5bc;
  --outline-variant:        #5c6578;

  /* ---- Glass / Nav ---- */
  --nav-glass-bg:           rgba(15, 19, 28, 0.60);
  --nav-glass-shadow:       0 40px 60px rgba(0, 0, 0, 0.08);

  /* ---- Semantic Aliases ---- */
  --te-bg:                  var(--surface);
  --te-bg-raised:           var(--surface-container-low);
  --te-card-bg:             var(--surface-container);
  --te-card-bg-hover:       var(--surface-container-high);
  --te-text:                var(--on-surface);
  --te-text-dim:            var(--on-surface-variant);
  --te-accent:              var(--primary-container);
  --te-accent-on:           var(--on-primary);
  --te-muted:               var(--outline);
  --te-border:              rgba(223, 226, 239, 0.18);
  --te-border-subtle:       rgba(223, 226, 239, 0.10);

  /* ---- Semantic tints ---- */
  --te-accent-tint:         color-mix(in srgb, var(--primary-container) 12%, transparent);
  --te-error-tint:          color-mix(in srgb, var(--error) 12%, transparent);
  --te-secondary-tint:      color-mix(in srgb, var(--secondary) 10%, transparent);

  /* ---- Ambient shadows (dark mode — deeper) ---- */
  --te-shadow-sm:           0 1px 3px rgba(0, 0, 0, 0.40);
  --te-shadow-md:           0 4px 16px rgba(0, 0, 0, 0.45);
  --te-shadow-lg:           0 8px 40px rgba(0, 0, 0, 0.50);
  --te-shadow-ambient:      0 40px 60px rgba(0, 0, 0, 0.08);

  /* ---- Form result colors (W = win green — brighter on dark surfaces) ---- */
  --te-win:                 #43c97a;
  --te-win-bg:              color-mix(in srgb, #43c97a 24%, transparent);
  --te-draw:                #e6ad58;
  --te-draw-bg:             color-mix(in srgb, #e6ad58 20%, transparent);
  --te-loss:                #ff6f7a;
  --te-loss-bg:             color-mix(in srgb, #ff6f7a 18%, transparent);

  /* ---- Live standings provisional row ---- */
  --te-caution:             #e8c24d;
  --te-live-provisional-bg: color-mix(in srgb, var(--te-caution) 14%, var(--surface-container-low));
  --te-live-provisional-bg-strong: color-mix(in srgb, var(--te-caution) 22%, var(--surface-container));

  --standings-mode-toggle-track: var(--surface-container);
  --standings-live-badge-bg: color-mix(in srgb, var(--error) 18%, var(--surface-container-low));
  --standings-live-badge-text: var(--error);
  --live-result-fg: var(--error);

  /* ---- Live standings + hero score pills (dark) ---- */
  --live-standings-changed-fg: #ff8a8e;
  --live-standings-changed-weight: 600;
  --live-team-row-bg: color-mix(in srgb, var(--te-caution) 14%, var(--surface-container-low));
  --live-team-row-shadow: 0 4px 24px color-mix(in srgb, var(--te-caution) 22%, transparent);
  --live-score-pill-win-bg: var(--te-win);
  --live-score-pill-win-fg: #0a0e17;
  --live-score-pill-lose-bg: var(--error);
  --live-score-pill-lose-fg: var(--surface-lowest);
  --live-score-pill-draw-bg: #f59e0b;
  --live-score-pill-draw-fg: #0a0e17;
  --live-rating-elite-bg: color-mix(in srgb, var(--te-win) 30%, var(--surface-container-low));
  --live-rating-elite-fg: color-mix(in srgb, var(--te-win) 92%, var(--surface-lowest) 8%);
  --live-rating-high-bg: color-mix(in srgb, var(--te-win) 22%, var(--surface-container-low));
  --live-rating-high-fg: color-mix(in srgb, var(--te-win) 82%, var(--surface-lowest) 18%);
  --live-rating-mid-bg: color-mix(in srgb, var(--outline-variant) 28%, var(--surface-container-low));
  --live-rating-mid-fg: var(--surface-lowest);
  --live-rating-low-bg: color-mix(in srgb, var(--te-caution) 24%, var(--surface-container-low));
  --live-rating-low-fg: color-mix(in srgb, var(--te-caution) 86%, var(--surface-lowest) 14%);
  --live-rating-poor-bg: color-mix(in srgb, var(--error) 24%, var(--surface-container-low));
  --live-rating-poor-fg: color-mix(in srgb, var(--error) 84%, var(--surface-lowest) 16%);

  /* ---- Live final-grace state (dark overrides) ---- */
  --live-final-surface:    var(--surface-container);
  --live-final-badge-bg:   var(--surface-container);
  --live-final-badge-fg:   var(--on-surface-variant);

  --standings-mc-tooltip-bg: color-mix(in srgb, var(--surface-container) 92%, var(--surface-lowest) 8%);
  --standings-mc-tooltip-shadow: 0 20px 56px color-mix(in srgb, var(--on-surface) 38%, transparent);

  /* ---- Match standings: focus mode (dark) ---- */
  --standings-focus-active-bg: color-mix(in srgb, var(--primary-container) 14%, var(--surface-container-low));
  --standings-focus-active-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-container) 22%, transparent) 0%,
    color-mix(in srgb, var(--surface-container-low) 96%, transparent) 100%
  );
  --standings-focus-glow: 0 14px 44px color-mix(in srgb, var(--primary-container) 28%, transparent);
  --standings-focus-border: var(--primary-fixed);

  /* ---- League table: API qualification row tints (dark — same hue roles as light) ---- */
  --standings-zone-cl-bg: color-mix(in srgb, var(--te-win) 20%, var(--surface-container-low));
  --standings-zone-cl-bar: color-mix(in srgb, var(--te-win) 80%, var(--surface-lowest) 20%);

  --standings-zone-cl-playoff-bg: color-mix(
    in srgb,
    var(--primary-container) 17%,
    color-mix(in srgb, var(--te-win) 12%, var(--surface-container-low))
  );
  --standings-zone-cl-playoff-bar: color-mix(in srgb, var(--primary-fixed) 55%, var(--te-win) 45%);

  --standings-zone-cl-eliminated-bg: color-mix(in srgb, var(--outline-variant) 14%, var(--surface-container-low));
  --standings-zone-cl-eliminated-bar: color-mix(in srgb, var(--outline) 42%, var(--surface-lowest) 58%);

  --standings-zone-el-bg: color-mix(in srgb, var(--te-caution) 26%, var(--surface-container-low));
  --standings-zone-el-bar: color-mix(in srgb, var(--te-caution) 78%, var(--surface-lowest) 22%);

  --standings-zone-ecl-bg: color-mix(in srgb, var(--secondary) 22%, var(--surface-container-low));
  --standings-zone-ecl-bar: color-mix(in srgb, var(--secondary) 62%, var(--primary-container) 38%);

  --standings-zone-relegation-bg: color-mix(in srgb, var(--error) 22%, var(--surface-container-low));
  --standings-zone-relegation-bar: var(--error);

  --standings-zone-playoff-bg: color-mix(
    in srgb,
    var(--outline-variant) 22%,
    color-mix(in srgb, var(--te-caution) 10%, var(--surface-container-low))
  );
  --standings-zone-playoff-bar: color-mix(in srgb, var(--outline) 38%, var(--te-caution) 62%);

  --standings-zone-promoted-bg: color-mix(in srgb, var(--te-win) 24%, var(--surface-container-low));
  --standings-zone-promoted-bar: color-mix(in srgb, var(--te-win) 70%, var(--primary-fixed) 30%);

  --standings-zone-promoted-playoff-bg: color-mix(
    in srgb,
    var(--primary-fixed) 14%,
    color-mix(in srgb, var(--secondary) 14%, var(--surface-container-low))
  );
  --standings-zone-promoted-playoff-bar: color-mix(in srgb, var(--primary-container) 52%, var(--secondary) 48%);

  /* ---- Probability bar gradient ---- */
  --te-bar-gradient:        linear-gradient(to right, var(--primary), var(--primary-container));

  /* ---- Glassmorphism ---- */
  --te-glass-bg:            rgba(15, 19, 28, 0.60);
  --te-glass-border:        rgba(223, 226, 239, 0.12);

  /* ---- Match stats: home/away share bar (cyan athletic blue vs cool gray — not two blues) ---- */
  --mc-stat-compare-home:    color-mix(in srgb, var(--primary-fixed) 40%, var(--primary-container) 60%);
  --mc-stat-compare-away:    color-mix(in srgb, var(--outline-variant) 55%, var(--surface-container-high) 45%);
  --mc-stat-compare-neutral: color-mix(in srgb, var(--on-surface-variant) 42%, var(--surface-container-high) 58%);
  --mc-stat-compare-track:   var(--surface-container-low);
  --mc-stat-compare-home-gradient: linear-gradient(90deg, color-mix(in srgb, var(--primary) 45%, transparent), var(--primary-container));
  --mc-stat-compare-away-gradient: linear-gradient(270deg, color-mix(in srgb, var(--secondary) 35%, transparent), color-mix(in srgb, var(--outline-variant) 50%, var(--surface-container-high) 50%));
  --mc-stat-compare-home-strong: linear-gradient(90deg, var(--primary-fixed), var(--primary-container));
  --mc-stat-compare-away-strong: linear-gradient(270deg, color-mix(in srgb, var(--secondary) 45%, transparent), color-mix(in srgb, var(--outline-variant) 48%, var(--surface-container-high) 52%));
  --mc-battle-hero-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-container) 24%, var(--surface-container-low)) 0%,
    color-mix(in srgb, var(--surface-container) 82%, var(--surface-lowest) 18%) 100%
  );
  --mc-battle-hero-shadow: 0 30px 64px color-mix(in srgb, var(--on-surface) 24%, transparent);
  --mc-battle-hero-track: color-mix(in srgb, var(--on-surface) 9%, var(--surface-container-high));
  --mc-battle-card-bg: linear-gradient(
    145deg,
    color-mix(in srgb, var(--surface-container-low) 92%, var(--surface-lowest) 8%),
    color-mix(in srgb, var(--surface-container) 84%, var(--surface-lowest) 16%)
  );
  --mc-battle-card-shadow: 0 18px 40px color-mix(in srgb, var(--on-surface) 28%, transparent);
  --mc-battle-card-shadow-open: 0 24px 50px color-mix(in srgb, var(--on-surface) 32%, transparent);
  --mc-battle-row-bg: color-mix(in srgb, var(--surface-container-high) 72%, var(--surface-container-low) 28%);
  --mc-battle-row-bg-hover: color-mix(in srgb, var(--surface-container-high) 56%, var(--primary-container) 44%);
  --mc-battle-row-shadow-hover: 0 14px 30px color-mix(in srgb, var(--primary-container) 38%, transparent);
  --mc-battle-row-track: color-mix(in srgb, var(--outline-variant) 36%, var(--surface-container-high));
  --mc-battle-home-value: color-mix(in srgb, var(--te-win) 82%, var(--primary-fixed) 18%);
  --mc-battle-away-value: color-mix(in srgb, var(--secondary) 78%, var(--primary-fixed) 22%);
  --mc-battle-home-gradient-strong: linear-gradient(90deg, color-mix(in srgb, var(--te-win) 84%, var(--primary-fixed) 16%), color-mix(in srgb, var(--te-win) 56%, var(--primary-container) 44%));
  --mc-battle-away-gradient-strong: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 84%, var(--primary-fixed) 16%), color-mix(in srgb, var(--secondary-container) 58%, var(--secondary) 42%));
  --mc-battle-glow-home: color-mix(in srgb, var(--te-win) 62%, transparent);
  --mc-battle-glow-away: color-mix(in srgb, var(--secondary) 56%, transparent);
  --mc-battle-glow-home-strong: color-mix(in srgb, var(--te-win) 78%, transparent);
  --mc-battle-glow-away-strong: color-mix(in srgb, var(--secondary) 72%, transparent);
  --mc-battle-danger-row-bg: color-mix(in srgb, var(--error) 18%, var(--surface-container-high));
  --mc-battle-danger-gradient: linear-gradient(
    90deg,
    color-mix(in srgb, var(--error) 88%, var(--tertiary)),
    color-mix(in srgb, var(--error) 60%, var(--surface-container-high))
  );
  --mc-battle-impact-ring: color-mix(in srgb, var(--secondary) 66%, var(--primary-fixed));
  --mc-battle-top-edge-ring: color-mix(in srgb, var(--primary-fixed) 78%, var(--te-win) 22%);

  /* ---- Lineup bench: substitute who played (darker tile vs DNP — stronger contrast on navy) ---- */
  --lu-bench-played-bg:            color-mix(in srgb, var(--surface-highest) 62%, var(--primary-container) 30%);
  --lu-bench-played-card-shadow:   0 4px 18px color-mix(in srgb, var(--on-surface) 26%, transparent),
                                   inset 0 1px 0 color-mix(in srgb, var(--on-surface) 12%, transparent);
  --lu-bench-played-avatar-ring:  color-mix(in srgb, var(--on-surface) 78%, transparent);
  --lu-bench-played-avatar-shadow: 0 3px 12px color-mix(in srgb, var(--on-surface) 42%, transparent),
                                    inset 0 1px 0 color-mix(in srgb, var(--on-surface) 18%, transparent);

  /* ---- Lineup events strip — event-color system (dark) ---- */
  --lu-event-strip-goal:  var(--te-win);
  --lu-event-strip-card-yellow: color-mix(in srgb, #facc15 90%, var(--surface-lowest) 10%);
  --lu-event-strip-subst: var(--primary-container);
  --lu-event-strip-var:   color-mix(in srgb, var(--error) 38%, #facc15 62%);
  --lu-event-strip-missed-pen: var(--error);

  /* ---- Match Center restyle: hero + events timeline (DARK — deep stadium with team-colored glow) ---- */
  --mc-hero-surface-1: #0a1220;
  --mc-hero-surface-2: #050811;
  --mc-hero-accent-wash: color-mix(in srgb, var(--primary-container) 22%, transparent);
  --mc-hero-team-home: var(--error);
  --mc-hero-team-away: var(--primary-container);
  --mc-hero-gradient:
    radial-gradient(ellipse 60% 100% at 0% 50%, color-mix(in srgb, var(--mc-hero-team-home) 28%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 100% at 100% 50%, color-mix(in srgb, var(--mc-hero-team-away) 28%, transparent), transparent 55%),
    linear-gradient(180deg, var(--mc-hero-surface-1) 0%, var(--mc-hero-surface-2) 100%);
  --mc-hero-shadow: 0 40px 80px color-mix(in srgb, #000000 55%, transparent);
  --mc-hero-on-surface: #eef2f7;
  --mc-hero-on-surface-dim: color-mix(in srgb, #eef2f7 65%, transparent);
  --mc-hero-divider: color-mix(in srgb, #eef2f7 14%, transparent);
  --mc-hero-chip-bg: color-mix(in srgb, #eef2f7 8%, transparent);
  --mc-hero-grid-line: color-mix(in srgb, #ffffff 4%, transparent);
  --mc-page-gradient:
    radial-gradient(ellipse 90% 50% at 50% 0%, color-mix(in srgb, var(--primary-container) 14%, transparent), transparent 65%),
    linear-gradient(180deg, #0a1020 0%, #060912 60%, #060912 100%);
  --mc-card-bg: color-mix(in srgb, var(--surface-container) 88%, var(--primary-container) 8%);
  --mc-card-ring: color-mix(in srgb, #eef2f7 8%, transparent);
  --mc-live-bg: color-mix(in srgb, var(--error) 26%, #0d1520);
  --mc-live-fg: color-mix(in srgb, var(--error) 72%, #ffffff);
  --mc-live-dot: color-mix(in srgb, var(--error) 82%, #ffffff);
  --mc-ev-axis-line: color-mix(in srgb, #eef2f7 12%, transparent);
  --mc-ev-tile-bg: var(--surface-container-high);
  --mc-ev-minute-fg: color-mix(in srgb, var(--error) 72%, #ffffff);
  --mc-ev-dot-home: color-mix(in srgb, var(--error) 82%, #ffffff);
  --mc-ev-dot-away: var(--on-surface-variant);
  --mc-ev-dot-card: var(--te-caution);

  /* ---- Home dashboard hero + stat row (DARK — deep navy wash, glass stat tiles) ---- */
  --home-hero-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-lowest) 72%, var(--primary) 28%) 0%,
      color-mix(in srgb, var(--surface-container-low) 78%, var(--primary-container) 22%) 46%,
      var(--surface-lowest) 100%
    );
  --home-hero-shadow: 0 20px 50px color-mix(in srgb, var(--surface-lowest) 58%, transparent);
  --home-hero-ink: var(--on-surface);
  --home-hero-deco-bg:
    radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--on-surface) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 30%, color-mix(in srgb, var(--error) 28%, transparent), transparent 55%),
    radial-gradient(ellipse 80% 65% at 95% 80%, color-mix(in srgb, var(--primary-container) 38%, transparent), transparent 60%),
    linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--surface-lowest) 72%, transparent));
  --home-hero-wash-bg:
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-lowest) 3%, transparent) 0 2px,
      transparent 2px 6px
    );
  --home-hero-wash-opacity: 0.15;
  --home-hero-wash-blend: screen;
  --home-hero-stat-bg: color-mix(in srgb, var(--surface-lowest) 48%, transparent);
  --home-hero-stat-bg-hover: color-mix(in srgb, var(--surface-lowest) 38%, transparent);
  --home-hero-stat-head: color-mix(in srgb, var(--on-surface) 74%, transparent);
  --home-hero-stat-sub: color-mix(in srgb, var(--on-surface) 58%, transparent);
  --home-hero-stat-shadow: 0 14px 30px color-mix(in srgb, var(--surface-lowest) 45%, transparent);
  --home-hero-stat-accent-leagues: color-mix(in srgb, var(--secondary) 58%, var(--primary-fixed) 42%);
  --home-hero-stat-accent-ranked: var(--te-win);
}

/* ============================================================
   Breadcrumb component (Rule 6.5)
   ============================================================ */
.breadcrumb-bar {
  padding: 8px 0 4px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.breadcrumb-item a {
  color: var(--te-text-dim);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--primary-container);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--outline-variant);
  margin-right: 4px;
}

.breadcrumb-item--current {
  color: var(--te-text);
}