/* ================================================================
   SportsFathom — each league's theme (docs/design-system.md)

   <html data-sport="nba"> (theme.js before the first paint, then app.js on
   every sport change) gives the page that league's accent (--accent, with
   --accent-ink for text on it), its page-header band colour (--band) and the
   band's motif (--motif, a mask drawn in the accent at low contrast). MLS is
   soccer's engine with data-league="usa.1". No data-sport (or "all") is the
   brand theme; so are the landing page, dialogs and the information pages
   (styles.css: .sf-brand). Generated, with every pair checked for WCAG AA
   (4.5:1) on the theme's surfaces: dark accents read on --bg..--surface-2
   and carry dark ink, light accents read on white..--surface-3 and carry
   white ink. The dark accent is also backend/sports.py's registry accent.
   ================================================================ */

/* the motifs, one per sport family */
:root {
  --motif-basketball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 20H720' stroke-opacity='.45'/%3E%3Cpath d='M0 40H720' stroke-opacity='.45'/%3E%3Cpath d='M0 60H720' stroke-opacity='.45'/%3E%3Cpath d='M0 80H720' stroke-opacity='.45'/%3E%3Cpath d='M0 100H720' stroke-opacity='.45'/%3E%3Cpath d='M0 120H720' stroke-opacity='.45'/%3E%3Cpath d='M0 140H720' stroke-opacity='.45'/%3E%3Cpath d='M40 0v20' stroke-opacity='.45'/%3E%3Cpath d='M160 0v20' stroke-opacity='.45'/%3E%3Cpath d='M280 0v20' stroke-opacity='.45'/%3E%3Cpath d='M400 0v20' stroke-opacity='.45'/%3E%3Cpath d='M520 0v20' stroke-opacity='.45'/%3E%3Cpath d='M640 0v20' stroke-opacity='.45'/%3E%3Cpath d='M100 20v20' stroke-opacity='.45'/%3E%3Cpath d='M220 20v20' stroke-opacity='.45'/%3E%3Cpath d='M340 20v20' stroke-opacity='.45'/%3E%3Cpath d='M460 20v20' stroke-opacity='.45'/%3E%3Cpath d='M580 20v20' stroke-opacity='.45'/%3E%3Cpath d='M700 20v20' stroke-opacity='.45'/%3E%3Cpath d='M40 40v20' stroke-opacity='.45'/%3E%3Cpath d='M160 40v20' stroke-opacity='.45'/%3E%3Cpath d='M280 40v20' stroke-opacity='.45'/%3E%3Cpath d='M400 40v20' stroke-opacity='.45'/%3E%3Cpath d='M520 40v20' stroke-opacity='.45'/%3E%3Cpath d='M640 40v20' stroke-opacity='.45'/%3E%3Cpath d='M100 60v20' stroke-opacity='.45'/%3E%3Cpath d='M220 60v20' stroke-opacity='.45'/%3E%3Cpath d='M340 60v20' stroke-opacity='.45'/%3E%3Cpath d='M460 60v20' stroke-opacity='.45'/%3E%3Cpath d='M580 60v20' stroke-opacity='.45'/%3E%3Cpath d='M700 60v20' stroke-opacity='.45'/%3E%3Cpath d='M40 80v20' stroke-opacity='.45'/%3E%3Cpath d='M160 80v20' stroke-opacity='.45'/%3E%3Cpath d='M280 80v20' stroke-opacity='.45'/%3E%3Cpath d='M400 80v20' stroke-opacity='.45'/%3E%3Cpath d='M520 80v20' stroke-opacity='.45'/%3E%3Cpath d='M640 80v20' stroke-opacity='.45'/%3E%3Cpath d='M100 100v20' stroke-opacity='.45'/%3E%3Cpath d='M220 100v20' stroke-opacity='.45'/%3E%3Cpath d='M340 100v20' stroke-opacity='.45'/%3E%3Cpath d='M460 100v20' stroke-opacity='.45'/%3E%3Cpath d='M580 100v20' stroke-opacity='.45'/%3E%3Cpath d='M700 100v20' stroke-opacity='.45'/%3E%3Cpath d='M40 120v20' stroke-opacity='.45'/%3E%3Cpath d='M160 120v20' stroke-opacity='.45'/%3E%3Cpath d='M280 120v20' stroke-opacity='.45'/%3E%3Cpath d='M400 120v20' stroke-opacity='.45'/%3E%3Cpath d='M520 120v20' stroke-opacity='.45'/%3E%3Cpath d='M640 120v20' stroke-opacity='.45'/%3E%3Cpath d='M100 140v20' stroke-opacity='.45'/%3E%3Cpath d='M220 140v20' stroke-opacity='.45'/%3E%3Cpath d='M340 140v20' stroke-opacity='.45'/%3E%3Cpath d='M460 140v20' stroke-opacity='.45'/%3E%3Cpath d='M580 140v20' stroke-opacity='.45'/%3E%3Cpath d='M700 140v20' stroke-opacity='.45'/%3E%3Ccircle cx='720' cy='80' r='150'/%3E%3Cpath d='M560 30H720M560 130H720M560 30V130'/%3E%3Ccircle cx='560' cy='80' r='40'/%3E%3Ccircle cx='690' cy='80' r='26'/%3E%3C/svg%3E");
  --motif-football: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M60 0V160'/%3E%3Cpath d='M120 0V160'/%3E%3Cpath d='M180 0V160'/%3E%3Cpath d='M240 0V160'/%3E%3Cpath d='M300 0V160'/%3E%3Cpath d='M360 0V160'/%3E%3Cpath d='M420 0V160'/%3E%3Cpath d='M480 0V160'/%3E%3Cpath d='M540 0V160'/%3E%3Cpath d='M600 0V160'/%3E%3Cpath d='M660 0V160'/%3E%3Cpath d='M720 0V160'/%3E%3Cpath d='M0 50H720M0 110H720' stroke-width='10' stroke-dasharray='1.5 10.5'/%3E%3C/svg%3E");
  --motif-baseball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='590' cy='150' r='175'/%3E%3Cpath d='M590 150L662 78L590 6L518 78Z'/%3E%3Cpath d='M590 150L420 -20M590 150L760 -20'/%3E%3Ccircle cx='590' cy='82' r='10'/%3E%3Cpath d='M656 72h12v12h-12zM584 0h12v12h-12zM512 72h12v12h-12z'/%3E%3C/svg%3E");
  --motif-hockey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='160' y='10' width='640' height='140' rx='64'/%3E%3Cpath d='M600 10V150' stroke-width='5'/%3E%3Cpath d='M470 10V150' stroke-width='4'/%3E%3Ccircle cx='600' cy='80' r='44'/%3E%3Ccircle cx='300' cy='46' r='24'/%3E%3Ccircle cx='300' cy='114' r='24'/%3E%3Ccircle cx='600' cy='80' r='3'/%3E%3C/svg%3E");
  --motif-soccer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M430 0V160'/%3E%3Ccircle cx='430' cy='80' r='52'/%3E%3Ccircle cx='430' cy='80' r='3'/%3E%3Cpath d='M720 22H600V138H720M720 56H682V104H720'/%3E%3Cpath d='M600 52A48 48 0 0 0 600 108'/%3E%3Ccircle cx='646' cy='80' r='3'/%3E%3C/svg%3E");
  --motif-mma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='719.0,125.2 655.2,189.0 564.8,189.0 501.0,125.2 501.0,34.8 564.8,-29.0 655.2,-29.0 719.0,34.8'/%3E%3Cpolygon points='702.4,118.3 648.3,172.4 571.7,172.4 517.6,118.3 517.6,41.7 571.7,-12.4 648.3,-12.4 702.4,41.7'/%3E%3Ccircle cx='610' cy='80' r='24'/%3E%3C/svg%3E");
  --motif-tennis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='250' y='14' width='500' height='132'/%3E%3Cpath d='M250 32H750M250 128H750'/%3E%3Cpath d='M380 32V128M620 32V128M380 80H620'/%3E%3Cpath d='M500 6V154' stroke-width='4' stroke-dasharray='6 4'/%3E%3C/svg%3E");
  --motif-golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M600 46c40 0 70 14 70 34s-30 34-70 34-72-12-72-34 32-34 72-34z'/%3E%3Cpath d='M596 22c62 0 110 24 110 58s-48 58-110 58-114-22-114-58 52-58 114-58z'/%3E%3Cpath d='M590 -2c86 0 150 36 150 82s-64 82-150 82-158-34-158-82 72-82 158-82z'/%3E%3Cpath d='M580 -26c112 0 196 48 196 106s-84 106-196 106-206-46-206-106 94-106 206-106z'/%3E%3Cpath d='M600 80V44l18 8-18 8'/%3E%3C/svg%3E");
  --motif-motorsport: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='600' y='40' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='640' y='40' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='680' y='40' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='620' y='60' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='660' y='60' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='700' y='60' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='600' y='80' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='640' y='80' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='680' y='80' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='620' y='100' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='660' y='100' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='700' y='100' width='20' height='20' fill='url(%23f)' stroke='none'/%3E%3Crect x='600' y='40' width='120' height='80'/%3E%3Cpath d='M160 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M220 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M280 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M340 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M400 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M460 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M520 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M580 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M640 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3Cpath d='M700 156l12-14h18l-12 14z' fill='url(%23f)' stroke='none'/%3E%3C/svg%3E");
  --motif-esports: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0V160' stroke-opacity='.4'/%3E%3Cpath d='M32 0V160' stroke-opacity='.4'/%3E%3Cpath d='M64 0V160' stroke-opacity='.4'/%3E%3Cpath d='M96 0V160' stroke-opacity='.4'/%3E%3Cpath d='M128 0V160' stroke-opacity='.4'/%3E%3Cpath d='M160 0V160' stroke-opacity='.4'/%3E%3Cpath d='M192 0V160' stroke-opacity='.4'/%3E%3Cpath d='M224 0V160' stroke-opacity='.4'/%3E%3Cpath d='M256 0V160' stroke-opacity='.4'/%3E%3Cpath d='M288 0V160' stroke-opacity='.4'/%3E%3Cpath d='M320 0V160' stroke-opacity='.4'/%3E%3Cpath d='M352 0V160' stroke-opacity='.4'/%3E%3Cpath d='M384 0V160' stroke-opacity='.4'/%3E%3Cpath d='M416 0V160' stroke-opacity='.4'/%3E%3Cpath d='M448 0V160' stroke-opacity='.4'/%3E%3Cpath d='M480 0V160' stroke-opacity='.4'/%3E%3Cpath d='M512 0V160' stroke-opacity='.4'/%3E%3Cpath d='M544 0V160' stroke-opacity='.4'/%3E%3Cpath d='M576 0V160' stroke-opacity='.4'/%3E%3Cpath d='M608 0V160' stroke-opacity='.4'/%3E%3Cpath d='M640 0V160' stroke-opacity='.4'/%3E%3Cpath d='M672 0V160' stroke-opacity='.4'/%3E%3Cpath d='M704 0V160' stroke-opacity='.4'/%3E%3Cpath d='M0 16H720' stroke-opacity='.4'/%3E%3Cpath d='M0 48H720' stroke-opacity='.4'/%3E%3Cpath d='M0 80H720' stroke-opacity='.4'/%3E%3Cpath d='M0 112H720' stroke-opacity='.4'/%3E%3Cpath d='M0 144H720' stroke-opacity='.4'/%3E%3Cpath d='M384 144L512 112L576 48L704 16' stroke-width='3'/%3E%3Cpath d='M380 140h8v8h-8zM508 108h8v8h-8zM572 44h8v8h-8zM700 12h8v8h-8z'/%3E%3C/svg%3E");
  --motif-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 160' fill='none' stroke='url(%23f)' stroke-width='2'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='720' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='720' cy='160' r='60'/%3E%3Ccircle cx='720' cy='160' r='104'/%3E%3Ccircle cx='720' cy='160' r='148'/%3E%3Ccircle cx='720' cy='160' r='192'/%3E%3Ccircle cx='720' cy='160' r='236'/%3E%3Ccircle cx='720' cy='160' r='280'/%3E%3Ccircle cx='720' cy='160' r='324'/%3E%3Ccircle cx='720' cy='160' r='368'/%3E%3C/svg%3E");
  --motif: var(--motif-brand);
}

.sf-brand, .landing, #modalCard, .legal { --motif: var(--motif-brand); }

/* dark (the default) */
:root[data-sport="mlb"] { --accent: #f0844f; --accent-ink: #10151d; --band: #33233a; --motif: var(--motif-baseball); }  /* MLB: clay red-orange on navy */
:root[data-sport="cbb"] { --accent: #e9a15c; --accent-ink: #10151d; --band: #2c2a3c; --motif: var(--motif-baseball); }  /* College baseball: clay amber on navy */
:root[data-sport="nfl"] { --accent: #86a9ff; --accent-ink: #10151d; --band: #17305a; --motif: var(--motif-football); }  /* NFL: navy with field green yard lines */
:root[data-sport="ncaaf"] { --accent: #efc35a; --accent-ink: #10151d; --band: #4a1726; --motif: var(--motif-football); }  /* NCAAF: gold on crimson */
:root[data-sport="nba"] { --accent: #f28c3e; --accent-ink: #10151d; --band: #3e2716; --motif: var(--motif-basketball); }  /* NBA: hardwood orange */
:root[data-sport="wnba"] { --accent: #ff8f73; --accent-ink: #10151d; --band: #43211d; --motif: var(--motif-basketball); }  /* WNBA: orange-coral */
:root[data-sport="ncaab"] { --accent: #f6a54e; --accent-ink: #10151d; --band: #1b2b55; --motif: var(--motif-basketball); }  /* NCAAB: orange on navy */
:root[data-sport="ncaaw"] { --accent: #f7a7a0; --accent-ink: #10151d; --band: #22305a; --motif: var(--motif-basketball); }  /* NCAAW: coral on navy */
:root[data-sport="nhl"] { --accent: #6ec8f2; --accent-ink: #10151d; --band: #163a52; --motif: var(--motif-hockey); }  /* NHL: ice blue */
:root[data-sport="soccer"] { --accent: #53c97f; --accent-ink: #10151d; --band: #163e2a; --motif: var(--motif-soccer); }  /* Soccer (Europe): pitch green */
:root[data-sport="soccer"][data-league="usa.1"] { --accent: #3fcdbd; --accent-ink: #10151d; --band: #133f3c; --motif: var(--motif-soccer); }  /* MLS: teal */
:root[data-sport="ucl"] { --accent: #9db0ff; --accent-ink: #10151d; --band: #18245e; --motif: var(--motif-soccer); }  /* Champions League: royal blue with silver */
:root[data-sport="ufc"] { --accent: #f4735f; --accent-ink: #10151d; --band: #45191a; --motif: var(--motif-mma); }  /* UFC: octagon red */
:root[data-sport="atp"] { --accent: #cfe34d; --accent-ink: #10151d; --band: #1b2b4f; --motif: var(--motif-tennis); }  /* ATP: tennis-ball yellow-green on navy */
:root[data-sport="wta"] { --accent: #bba2ff; --accent-ink: #10151d; --band: #2d2155; --motif: var(--motif-tennis); }  /* WTA: violet */
:root[data-sport="pga"] { --accent: #dcc58e; --accent-ink: #10151d; --band: #1d3b26; --motif: var(--motif-golf); }  /* PGA Tour: sand on fairway green */
:root[data-sport="f1"] { --accent: #ff5a5a; --accent-ink: #10151d; --band: #2b2e34; --motif: var(--motif-motorsport); }  /* Formula 1: racing red on carbon */
:root[data-sport="cs2"] { --accent: #f4b23a; --accent-ink: #10151d; --band: #3a2c13; --motif: var(--motif-esports); }  /* CS2: amber */
:root[data-sport="valorant"] { --accent: #ff7591; --accent-ink: #10151d; --band: #441c2b; --motif: var(--motif-esports); }  /* Valorant: red-pink */
:root[data-sport="dota2"] { --accent: #f0857c; --accent-ink: #10151d; --band: #401c1b; --motif: var(--motif-esports); }  /* Dota 2: crimson */
:root[data-sport="lol"] { --accent: #d9b65e; --accent-ink: #10151d; --band: #123a3e; --motif: var(--motif-esports); }  /* League of Legends: gold with teal */

/* light */
:root[data-theme="light"][data-sport="mlb"] { --accent: #b3441b; --accent-ink: #ffffff; --band: #f6e4dc; }
:root[data-theme="light"][data-sport="cbb"] { --accent: #99460f; --accent-ink: #ffffff; --band: #f5e8d8; }
:root[data-theme="light"][data-sport="nfl"] { --accent: #1f45a0; --accent-ink: #ffffff; --band: #dfe7f6; }
:root[data-theme="light"][data-sport="ncaaf"] { --accent: #9c1c33; --accent-ink: #ffffff; --band: #f4dfe2; }
:root[data-theme="light"][data-sport="nba"] { --accent: #a3480a; --accent-ink: #ffffff; --band: #f6e6d6; }
:root[data-theme="light"][data-sport="wnba"] { --accent: #be3d24; --accent-ink: #ffffff; --band: #f8e2dc; }
:root[data-theme="light"][data-sport="ncaab"] { --accent: #1f3b8a; --accent-ink: #ffffff; --band: #e0e6f5; }
:root[data-theme="light"][data-sport="ncaaw"] { --accent: #2a4a8f; --accent-ink: #ffffff; --band: #e2e8f5; }
:root[data-theme="light"][data-sport="nhl"] { --accent: #0b6894; --accent-ink: #ffffff; --band: #dcedf6; }
:root[data-theme="light"][data-sport="soccer"] { --accent: #14713f; --accent-ink: #ffffff; --band: #dcefe3; }
:root[data-theme="light"][data-sport="soccer"][data-league="usa.1"] { --accent: #0d7168; --accent-ink: #ffffff; --band: #d9efec; }
:root[data-theme="light"][data-sport="ucl"] { --accent: #2440b0; --accent-ink: #ffffff; --band: #e1e6f8; }
:root[data-theme="light"][data-sport="ufc"] { --accent: #b52f1d; --accent-ink: #ffffff; --band: #f7e0dc; }
:root[data-theme="light"][data-sport="atp"] { --accent: #4c6600; --accent-ink: #ffffff; --band: #ecf2d6; }
:root[data-theme="light"][data-sport="wta"] { --accent: #6a3fcc; --accent-ink: #ffffff; --band: #ebe4fa; }
:root[data-theme="light"][data-sport="pga"] { --accent: #2f6a3b; --accent-ink: #ffffff; --band: #e3eee2; }
:root[data-theme="light"][data-sport="f1"] { --accent: #c41126; --accent-ink: #ffffff; --band: #f3e0e0; }
:root[data-theme="light"][data-sport="cs2"] { --accent: #8c560a; --accent-ink: #ffffff; --band: #f6ead4; }
:root[data-theme="light"][data-sport="valorant"] { --accent: #bd1d4d; --accent-ink: #ffffff; --band: #f8dfe6; }
:root[data-theme="light"][data-sport="dota2"] { --accent: #9c2318; --accent-ink: #ffffff; --band: #f5e0de; }
:root[data-theme="light"][data-sport="lol"] { --accent: #7f6118; --accent-ink: #ffffff; --band: #f2ead6; }

/* The band's motif: drawn in the accent through the motif as a mask, faded
   in from the left, behind the page title. Nothing moves. */
.view-head:not(.sub)::before, .home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--accent);
  -webkit-mask-image: var(--motif); mask-image: var(--motif);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: right center; mask-position: right center;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  opacity: .22;
}
:root[data-theme="light"] .view-head:not(.sub)::before,
:root[data-theme="light"] .home-hero::before { opacity: .3; }
@media (max-width: 620px) {
  .view-head:not(.sub)::before, .home-hero::before { opacity: .14; }
}