/* ============================================================
   VINCO SPORT — COLOR TOKENS
   Dark-first broadcast palette. Brand red ("Digital") is the
   single hero accent against deep neutral surfaces.
   ============================================================ */

:root {
  /* ---- Brand red ramp (anchor = --red-500 = #c53919 "Digital") ---- */
  --red-50:  #fbe9e3;
  --red-100: #f7d9cf;
  --red-200: #efb3a0;
  --red-300: #e58a6c;
  --red-400: #d95f3c;
  --red-500: #c53919; /* brand anchor — RGB 197,57,25 */
  --red-600: #a72d12; /* press / darker */
  --red-700: #84230d;
  --red-800: #5e1809;
  --red-900: #3a0f05;

  /* ---- Neutral ramp (cool near-black → white) ---- */
  --neutral-0:   #ffffff;
  --neutral-25:  #f6f7f9;
  --neutral-50:  #eceef2;
  --neutral-100: #d7dbe1;
  --neutral-200: #b4bbc6;
  --neutral-300: #8c95a3;
  --neutral-400: #69727f;
  --neutral-500: #4c545f;
  --neutral-600: #353b44;
  --neutral-700: #242a31;
  --neutral-800: #1a1e24;
  --neutral-850: #15181d;
  --neutral-900: #101317;
  --neutral-950: #0a0c0f;

  /* ---- Secondary accent ramp: GOLD (anchor = --gold-500 = #f0b310) ----
     The brand's warm secondary, drawn from parent brand "Athletic". Pairs
     with the vermillion red without competing. SECONDARY / ACCENT USE ONLY:
     highlights, selected/active states, data viz, the occasional chip,
     medals/PR moments. Never a second primary; the red always leads. */
  --gold-50:  #fef6e0;
  --gold-100: #fdecbf;
  --gold-200: #fadd86;
  --gold-300: #f7cb4f;
  --gold-400: #f3bd28;
  --gold-500: #f0b310; /* secondary anchor — Athletic gold */
  --gold-600: #cc9408;
  --gold-700: #a3760a;
  --gold-800: #7a5808;
  --gold-900: #4d3905;

  /* ---- Functional hues ---- */
  --green-500:  #1f9d57; /* success / "PB" */
  --green-400:  #2bbd6b;
  --amber-500:  #e8a317; /* warning / "heat" */
  --amber-400:  #f5b73f;
  --blue-500:   #2f7fe0; /* info */
  --blue-400:   #4f97ee;
  --live-500:   #ff2d20; /* broadcast LIVE — brighter than brand red */
  --live-glow:  rgba(255, 45, 32, 0.45);

  /* ============================================================
     SEMANTIC ALIASES — default (dark) theme
     ============================================================ */

  /* Surfaces (low → high elevation) */
  --bg-base:        var(--neutral-950);
  --surface-1:      var(--neutral-900);
  --surface-2:      var(--neutral-850);
  --surface-3:      var(--neutral-800);
  --surface-raised: var(--neutral-700);
  --surface-overlay: rgba(10, 12, 15, 0.72);
  --scrim:          rgba(5, 6, 8, 0.78);

  /* Text */
  --text-primary:   #f4f6f8;
  --text-secondary: #aab2bf;
  --text-muted:     #868f9d;
  --text-disabled:  #4d545e;
  --text-inverse:   #101317;
  --text-on-accent: #ffffff;
  --text-link:      var(--red-400);

  /* Accent (brand) */
  --accent:          var(--red-500);
  --accent-hover:    var(--red-400);
  --accent-press:    var(--red-600);
  --accent-subtle:   rgba(197, 57, 25, 0.14);
  --accent-border:   rgba(197, 57, 25, 0.40);
  --on-accent:       #ffffff;

  /* Secondary accent (gold) — USE SPARINGLY, never as a second primary.
     For highlights, selected/active accents, data viz, medal/PR moments. */
  --secondary:        var(--gold-500);
  --secondary-hover:  var(--gold-400);
  --secondary-press:  var(--gold-600);
  --secondary-subtle: rgba(240, 179, 16, 0.14);
  --secondary-border: rgba(240, 179, 16, 0.40);
  --on-secondary:     #2a1f04;

  /* Borders & dividers */
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-focus:   var(--red-400);

  /* Status */
  --success:     var(--green-500);
  --success-bg:  rgba(31, 157, 87, 0.16);
  --warning:     var(--amber-500);
  --warning-bg:  rgba(232, 163, 23, 0.16);
  --danger:      var(--red-500);
  --danger-bg:   rgba(197, 57, 25, 0.16);
  --info:        var(--blue-500);
  --info-bg:     rgba(47, 127, 224, 0.16);
  --live:        var(--live-500);

  /* Fills for inputs / chips on dark */
  --fill-subtle:   rgba(255, 255, 255, 0.05);
  --fill-default:  rgba(255, 255, 255, 0.08);
  --fill-strong:   rgba(255, 255, 255, 0.14);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(217, 95, 60, 0.45);
}

/* ============================================================
   LIGHT THEME — opt-in scope for editorial / print surfaces
   ============================================================ */
.theme-light {
  --bg-base:        var(--neutral-25);
  --surface-1:      #ffffff;
  --surface-2:      var(--neutral-25);
  --surface-3:      var(--neutral-50);
  --surface-raised: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.78);
  --scrim:          rgba(16, 19, 23, 0.55);

  --text-primary:   #14171c;
  --text-secondary: #4c545f;
  --text-muted:     #79828f;
  --text-disabled:  #aab2bf;
  --text-inverse:   #f4f6f8;
  --text-link:      var(--red-600);

  --accent-subtle:  rgba(197, 57, 25, 0.10);
  --accent-border:  rgba(197, 57, 25, 0.30);

  /* Secondary accent (gold) on light surfaces */
  --secondary:        var(--gold-600);
  --secondary-hover:  var(--gold-500);
  --secondary-press:  var(--gold-700);
  --secondary-subtle: rgba(240, 179, 16, 0.16);
  --secondary-border: rgba(204, 148, 8, 0.34);
  --on-secondary:     #2a1f04;

  --border-subtle:  rgba(16, 19, 23, 0.08);
  --border-default: rgba(16, 19, 23, 0.14);
  --border-strong:  rgba(16, 19, 23, 0.26);

  --fill-subtle:   rgba(16, 19, 23, 0.04);
  --fill-default:  rgba(16, 19, 23, 0.06);
  --fill-strong:   rgba(16, 19, 23, 0.10);
}