:root,
:root[data-theme="dark"] {
  --bg-primary: #131313;
  --bg-secondary: #1C1C1C;
  --bg-card: #1C1C1C;
  --bg-card-hover: #232323;
  --skeleton-base: #2E2E2E;
  --skeleton-highlight: #4C484A;
  --bg-card-header: #232323;
  --bg-header: #131313;
  --bg-footer: #2D0054;
  --bg-input: #1C1C1C;
  --bg-topbar: #1A0035;
  --bg-pill: rgba(255, 255, 255, 0.06);
  /* "Who will win?" poll result fill overlays (match-detail fan zone) */
  --poll-fill-bg: rgba(255, 255, 255, 0.10);
  --poll-fill-bg-strong: rgba(255, 255, 255, 0.38);
  --text-primary: #FFFFFF;
  --text-secondary: #81797C;
  --text-tertiary: #B5ABAF;
  --text-white: #ffffff;
  --text-muted: #A59C9F;
  --text-on-accent: #2D0054;
  --color-accent: #CCFF00;
  --color-live: #E53935;
  --color-ended: #A59C9F;
  --color-upcoming: #CCFF00;
  --accent-primary: #CCFF00;
  --accent-primary-bg: rgba(204, 255, 0, 0.15);
  --accent-primary-subtle: rgba(204, 255, 0, 0.05);
  --accent-purple: #6D00CC;
  --accent-purple-dark: #6D00CC;
  --accent-blue: #6D00CC;
  --accent-teal: #CCFF00;
  --accent-green: #4caf50;
  --accent-red: #E53935;
  --accent-red-bg: rgba(217, 45, 32, 0.2);
  --accent-red-border: rgba(255, 56, 60, 0.5);
  --accent-yellow: #ffc107;
  /* Shirt-number badge lime (Figma 40000251:4672 fill_1MO12A) */
  --accent-lime: #CCFF00;
  /* Top-scorer medal palette (Figma 40002017:8239) */
  --rank-gold: #FFEB3B;
  --rank-silver: #CDC7C9;
  --rank-bronze: #FF853B;
  /* Standings zone palette + form-guide tints (Figma 40000191:5250) */
  --zone-ucl: #4CAF50;
  --zone-uel: #FFEB3B;
  --zone-uecl: #1E88E5;
  --zone-ucl-bg: rgba(0, 200, 100, 0.1);
  --zone-uel-bg: rgba(255, 200, 0, 0.09);
  --zone-uecl-bg: rgba(79, 195, 247, 0.06);
  --zone-rel-bg: rgba(255, 60, 60, 0.1);
  --zone-r32: #AB47BC;
  --zone-r32-bg: rgba(171, 71, 188, 0.1);
  --form-win-bg: rgba(0, 200, 100, 0.22);
  --form-draw-bg: rgba(140, 140, 160, 0.18);
  --form-loss-bg: rgba(217, 45, 32, 0.1);
  /* Rating & lineup semantic colors */
  --rating-good: #2196f3;
  --rating-avg: #ff9800;
  --border-injured: #ef5350;
  --border-questionable: #ffa726;
  --pitch-border-home: rgba(79, 195, 247, 0.85);
  --pitch-border-away: rgba(239, 83, 80, 0.85);
  --coach-photo-border: rgba(79, 195, 247, 0.7);
  /* News category badge tinted backgrounds */
  --badge-teal-bg: rgba(57, 219, 191, 0.15);
  --badge-blue-bg: rgba(13, 110, 253, 0.15);
  --badge-yellow-bg: rgba(255, 193, 7, 0.15);
  --badge-red-bg: rgba(255, 71, 87, 0.15);
  --stat-bar-home: #3A006B;
  --stat-bar-away: #BAE900;
  --border-color: #2E2E2E;
  --border-light: #2E2E2E;
  /* Strong hairline dividers, e.g. player hero info strip (Figma fill_L0OGJN) */
  --border-strong: #4C484A;
  --bg-app-banner-overlay: linear-gradient(98deg, rgba(13, 0, 30, 1) 11%, rgba(13, 0, 30, 0) 41%);
  /* Profile hero banner (Figma 40000560:11080 fill_XQIYGX) — stays dark purple in both themes */
  --profile-hero-gradient: linear-gradient(90deg, rgba(13, 0, 30, 1) 0%, rgba(13, 0, 30, 0.53) 61%, rgba(13, 0, 30, 1) 100%);
  --match-live-bg: rgba(229, 57, 53, 0.2);
  --match-ended-bg: rgba(165, 156, 159, 0.05);
  --font-family: 'Montserrat', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --header-height: 60px;
  --container-max-width: 1200px;
  --border-radius-card: 14px;
  --border-radius-pill: 20px;
  --border-radius-btn: 10px;
  /* Match highlights cards and carousel controls */
  --highlights-gap: 12px;
  --highlights-padding: 16px;
  --highlights-space-xs: 4px;
  --highlights-space-sm: 8px;
  --highlights-thumbnail-width: 112px;
  --highlights-control-size: 32px;
  --highlights-dot-size: 7px;
  --highlights-dot-target: 24px;
  --highlights-focus-width: 2px;
  --highlights-play-bg: rgba(0, 0, 0, 0.45);
  /* Elevation for anchored popovers/modals — matches the filter modal card */
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  --bg-primary: #f0f2f5;
  --bg-secondary: #e8eaed;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f9fa;
  --skeleton-base: #e8eaed;
  --skeleton-highlight: #f8f9fa;
  --bg-card-header: #f0f2f5;
  --bg-header: #ffffff;
  --bg-footer: #2D0054;
  --bg-input: #f0f2f5;
  --bg-topbar: #1A0035;
  --bg-pill: rgba(0, 0, 0, 0.06);
  /* "Who will win?" poll result fill overlays (match-detail fan zone) */
  --poll-fill-bg: rgba(0, 0, 0, 0.07);
  --poll-fill-bg-strong: rgba(0, 0, 0, 0.16);
  --text-primary: #2d3436;
  --text-secondary: #81797C;
  --text-tertiary: #7a7a7a;
  --text-white: #ffffff;
  --text-muted: #b2bec3;
  /* --text-on-accent: #2D0054; */
  --text-on-accent: #ffffff;
  --color-accent: #6D00CC;
  --color-live: #E53935;
  --color-ended: #999999;
  --color-upcoming: #6D00CC;
  --accent-primary: #6D00CC;
  --accent-primary-bg: rgba(109, 0, 204, 0.149);
  --accent-primary-subtle: rgba(109, 0, 204, 0.05);
  --accent-purple: #6D00CC;
  --accent-purple-dark: #6D00CC;
  --accent-blue: #6D00CC;
  --accent-teal: #6D00CC;
  --accent-green: #4caf50;
  --accent-red: #E53935;
  --accent-red-bg: rgba(217, 45, 32, 0.15);
  --accent-red-border: rgba(255, 56, 60, 0.5);
  --accent-yellow: #ffc107;
  /* Shirt-number badge lime — hero stays dark in light theme, keep same value */
  --accent-lime: #CCFF00;
  /* Top-scorer medal palette (Figma 40002017:8239) */
  --rank-gold: #FFEB3B;
  --rank-silver: #CDC7C9;
  --rank-bronze: #FF853B;
  /* Standings zone palette + form-guide tints (Figma 40000191:5250) */
  --zone-ucl: #4CAF50;
  --zone-uel: #FFEB3B;
  --zone-uecl: #1E88E5;
  --zone-ucl-bg: rgba(0, 200, 100, 0.1);
  --zone-uel-bg: rgba(255, 200, 0, 0.09);
  --zone-uecl-bg: rgba(79, 195, 247, 0.06);
  --zone-rel-bg: rgba(255, 60, 60, 0.1);
  --zone-r32: #AB47BC;
  --zone-r32-bg: rgba(171, 71, 188, 0.1);
  --form-win-bg: rgba(0, 200, 100, 0.22);
  --form-draw-bg: rgba(140, 140, 160, 0.18);
  --form-loss-bg: rgba(217, 45, 32, 0.1);
  /* Rating & lineup semantic colors */
  --rating-good: #2196f3;
  --rating-avg: #ff9800;
  --border-injured: #ef5350;
  --border-questionable: #ffa726;
  --pitch-border-home: rgba(79, 195, 247, 0.85);
  --pitch-border-away: rgba(239, 83, 80, 0.85);
  --coach-photo-border: rgba(79, 195, 247, 0.7);
  /* News category badge tinted backgrounds */
  --badge-teal-bg: rgba(57, 219, 191, 0.15);
  --badge-blue-bg: rgba(13, 110, 253, 0.15);
  --badge-yellow-bg: rgba(255, 193, 7, 0.15);
  --badge-red-bg: rgba(255, 71, 87, 0.15);
  --stat-bar-home: #3A006B;
  --stat-bar-away: #BAE900;
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  /* Strong hairline dividers — softer mauve-gray for light surfaces */
  --border-strong: #CDC4C8;
  --bg-app-banner-overlay: linear-gradient(98deg, rgba(13, 0, 30, 1) 11%, rgba(13, 0, 30, 0) 41%);
  /* Profile hero banner (Figma 40000560:11080 fill_XQIYGX) — stays dark purple in both themes */
  --profile-hero-gradient: linear-gradient(90deg, rgba(13, 0, 30, 1) 0%, rgba(13, 0, 30, 0.53) 61%, rgba(13, 0, 30, 1) 100%);
  --match-live-bg: rgba(229, 57, 53, 0.08);
  --match-ended-bg: rgba(153, 153, 153, 0.2);
  --font-family: 'Montserrat', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --header-height: 60px;
  --container-max-width: 1200px;
  --border-radius-card: 14px;
  --border-radius-pill: 20px;
  --border-radius-btn: 10px;
  /* Match highlights cards and carousel controls */
  --highlights-gap: 12px;
  --highlights-padding: 16px;
  --highlights-space-xs: 4px;
  --highlights-space-sm: 8px;
  --highlights-thumbnail-width: 112px;
  --highlights-control-size: 32px;
  --highlights-dot-size: 7px;
  --highlights-dot-target: 24px;
  --highlights-focus-width: 2px;
  --highlights-play-bg: rgba(0, 0, 0, 0.45);
  /* Elevation for anchored popovers/modals — softer on light surfaces */
  --shadow-popover: 0 8px 32px rgba(0, 0, 0, 0.14);
}