/* ============================================================
   Champions of Fantasy — theme
   Black base with gold / silver / bronze medal accents.

   Design rule: the metals are SEMANTIC, not decorative.
     gold   = 1st / champion / elite tier / primary brand
     silver = 2nd / strong
     bronze = 3rd / solid
   Using them as generic ornament dilutes the rank language.
   For neutral UI chrome, use the --ink-* and --line-* tokens.
   ============================================================ */

:root {
  /* --- metal ramps ---------------------------------------- */
  /* each metal has a bright (text//on-black), base (fills),
     and deep (borders, shadow, on-light text) stop           */

  --gold-bright: #E8C25A;
  --gold:        #D4AF37;
  --gold-deep:   #A8801C;
  --gold-shadow: #6B5210;

  --silver-bright: #D8DDE3;
  --silver:        #A8B0B8;
  --silver-deep:   #6E767E;
  --silver-shadow: #454B51;

  --bronze-bright: #DB9155;
  --bronze:        #C87B3A;
  --bronze-deep:   #8A5223;
  --bronze-shadow: #57331538;

  /* metallic gradients — for medals, trophies, seed badges   */
  --grad-gold:   linear-gradient(145deg, #F2D98A 0%, #D4AF37 45%, #9C7518 100%);
  --grad-silver: linear-gradient(145deg, #EDF1F5 0%, #A8B0B8 45%, #6E767E 100%);
  --grad-bronze: linear-gradient(145deg, #E9AE79 0%, #C87B3A 45%, #7E4A1F 100%);
}

/* ============================================================
   DARK  —  the primary look. Black is the brand.
   ============================================================ */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* warm near-black, not #000 — gold sits badly on pure black */
  --bg:          #0B0A08;
  --panel:       #16140F;
  --panel-alt:   #1E1B15;
  --panel-hover: #262218;

  --line:        #2A2621;
  --line-strong: #3D3830;

  --ink:         #F0EBE0;   /* warm off-white, pairs with gold */
  --ink-muted:   #9A9384;
  --ink-faint:   #6B6659;

  --accent:        var(--gold-bright);
  --accent-solid:  var(--gold);
  --accent-soft:   #2A2110;
  --accent-line:   var(--gold-deep);

  --rank-1: var(--gold-bright);
  --rank-2: var(--silver-bright);
  --rank-3: var(--bronze-bright);

  --rank-1-bg: #241C0C;
  --rank-2-bg: #1D2126;
  --rank-3-bg: #251708;

  /* state */
  --win:      #52C285;
  --win-bg:   #12291D;
  --loss:     #E5726B;
  --loss-bg:  #2E1A18;
  --locked:   #57534A;
  --locked-bg:#141310;

  --shadow:    0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.6);
  --glow-gold: 0 0 0 1px var(--gold-deep), 0 0 16px -4px var(--gold);
}

/* ============================================================
   LIGHT  —  parchment, not white. Metals deepen for contrast.
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #FAF7F0;
  --panel:       #FFFFFF;
  --panel-alt:   #F3EFE5;
  --panel-hover: #EBE5D8;

  --line:        #E0D9C9;
  --line-strong: #C9C0AB;

  --ink:         #17150F;
  --ink-muted:   #5E584A;
  --ink-faint:   #8B8474;

  /* deepened so they clear 4.5:1 as text on parchment */
  --accent:        #7A5F0F;   /* 5.65:1 on --bg */
  --accent-solid:  var(--gold-deep);
  --accent-soft:   #F5E9C4;
  --accent-line:   var(--gold);

  --rank-1: #7A5F0F;
  --rank-2: #4A5258;
  --rank-3: #7A4419;

  --rank-1-bg: #F7EDCE;
  --rank-2-bg: #E8EBEE;
  --rank-3-bg: #F6E3D2;

  --win:      #1F7A4C;
  --win-bg:   #DCEEE2;
  --loss:     #B03A34;
  --loss-bg:  #F7DEDC;
  --locked:   #9A9484;
  --locked-bg:#F0ECE2;

  --shadow:    0 1px 2px rgba(30,24,10,.08);
  --shadow-lg: 0 8px 24px rgba(30,24,10,.14);
  --glow-gold: 0 0 0 1px var(--gold-deep);
}

/* ============================================================
   Position colors — one set for both themes.
   Deep and saturated with white ink. The earlier pale set was a
   structural consequence of dark text on a chip: that forces high
   lightness and low saturation. Inverting fixes it, and these all
   clear 4.5:1 against white so light mode needs no variant.
   ============================================================ */

:root {
  --pos-qb:  #2563EB;
  --pos-rb:  #0F766E;
  --pos-wr:  #DC2626;
  --pos-te:  #7C3AED;
  --pos-k:   #52525B;
  --pos-pk:  #52525B;
  --pos-dst: #15803D;
  --chip-ink: #FFFFFF;
}

/* ============================================================
   Medal / seed badge
   ============================================================ */

.medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #1A1206;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}

.medal--1 { background: var(--grad-gold); }
.medal--2 { background: var(--grad-silver); }
.medal--3 { background: var(--grad-bronze); }

/* seeds 4-6 still make the playoffs but get no metal */
.medal--out {
  background: var(--panel-alt);
  color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* first-round bye — seeds 1 and 2 only */
.seed-bye {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  border: 1px solid var(--gold-deep);
  background: var(--accent-soft);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ============================================================
   Assurance pills — "no account, no email"
   Neutral chrome on purpose: the metals carry rank meaning, so a
   row of gold pills would read as tiers. Only the tick is gold.
   ============================================================ */

.assurances {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.assurances li {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

.assurances li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
  margin-right: 5px;
}

/* ============================================================
   Salary cap meter — gold while affordable, red when over
   ============================================================ */

.cap-meter {
  height: 6px;
  border-radius: 3px;
  background: var(--panel-alt);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}

.cap-meter__fill {
  height: 100%;
  background: var(--grad-gold);
  transition: width .18s ease, background .18s ease;
}

.cap-meter--over .cap-meter__fill { background: var(--loss); }

.cap-remaining      { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.cap-remaining--over{ color: var(--loss); }

/* ============================================================
   Locked player (late swap) — a locked slot is inert but must
   stay readable; it is not an error state.
   ============================================================ */

.slot--locked {
  background: var(--locked-bg);
  color: var(--locked);
  border-color: var(--line);
}

.slot--locked .slot__salary { text-decoration: none; opacity: .7; }

.slot--swappable {
  border-color: var(--accent-line);
  box-shadow: var(--glow-gold);
}