/* =============================================================
   NCAA Dynasty — Design Tokens
   Single source of truth for the UI redesign (design_handoff README).
   FIXED tokens live in :root. The --team-* tokens are THEMEABLE per
   school: theme() in ui.js overrides them from each team's colors.
   The defaults below are the Oregon reference from the spec.
   ============================================================= */
:root {
  /* — Surfaces & structure — */
  --bg-app:           #0e1013;
  --bg-app-alt:       #0b120e;   /* Stadium Night home variant */
  --surface-panel:    #15181d;   /* cards, panels, rows, inputs */
  --surface-inset:    #0e1013;   /* inset fields on a panel */
  --border-hairline:  rgba(255,255,255,.06);  /* row dividers */
  --border-panel:     rgba(255,255,255,.08);  /* card/panel borders */
  --border-control:   rgba(255,255,255,.12);  /* outlined buttons/inputs */

  /* — Team brand (THEMEABLE — overridden per school by theme()) — */
  --team-primary-dark:  #1c5b3a;  /* header gradient / button start */
  --team-primary:       #2f7d4f;  /* button end, fills */
  --team-primary-light: #6fcf97;  /* accents, positive text on dark */
  --team-gold:          #f7d417;  /* gold accent, Accept/Advance CTAs */
  --team-gold-deep:     #f0b400;  /* gold gradient end */

  /* — Text — */
  --text-hi:    #f1f3f5;
  --text-body:  #c2c8d0;
  --text-muted: #9aa3af;
  --text-faint: #7c8492;
  --text-label: #5c636e;

  /* — Status / semantic — */
  --status-positive: #6fcf97;  /* happy, secure, leading, Keep */
  --status-neutral:  #f0c64a;  /* neutral mood, caution */
  --status-negative: #e0897a;  /* unhappy, transfer out */
  --status-warning:  #f0a23a;  /* warnings, intel, thin depth */

  /* — Unit colors (roster badges / gameplan sections) — */
  --unit-off-text: #7fd6a0; --unit-off-bg: rgba(47,125,79,.16);  --unit-off-border: rgba(111,207,151,.30);
  --unit-def-text: #8fb6e0; --unit-def-bg: rgba(59,110,165,.18);  --unit-def-border: rgba(143,182,224,.30);
  --unit-st-text:  #f0c64a; --unit-st-bg:  rgba(247,212,23,.14);  --unit-st-border:  rgba(247,212,23,.32);

  /* — OVR / rating tiers — */
  --ovr-elite: #7fd6a0;  /* 85+  */
  --ovr-solid: #b9d96a;  /* 80-84 */
  --ovr-dev:   #f0c64a;  /* 74-79 */
  --ovr-raw:   #e0897a;  /* <74  */

  /* — Radius — */
  --r-card:    16px;
  --r-control: 12px;
  --r-pill:    20px;
  --r-badge:   6px;
  --r-bar:     4px;

  /* — Spacing (4px grid) — */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --pad-screen: 16px;
  --pad-card:   14px;

  /* — Gradients (themeable via the team-* vars) — */
  --grad-primary:  linear-gradient(135deg, var(--team-primary-dark), var(--team-primary));
  --grad-advance:  linear-gradient(100deg, var(--team-primary-dark) 0%, color-mix(in srgb, var(--team-primary) 55%, var(--team-gold)) 46%, var(--team-gold) 100%);
  --grad-header:   radial-gradient(135% 120% at 0% 0%, var(--team-primary-dark), color-mix(in srgb, var(--team-primary-dark) 45%, var(--bg-app)) 48%, var(--bg-app));
  --grad-progress: linear-gradient(90deg, var(--team-primary-dark), var(--team-primary-light));
  --grad-race:     linear-gradient(90deg, var(--team-primary-dark), var(--team-primary-light) 70%, var(--team-gold));

  /* — Shadow — */
  --shadow-gold-cta: 0 12px 32px -10px rgba(247,212,23,.45);

  /* — Type families (loaded in index.html) — */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
}

/* =============================================================
   Redesign scope wrapper. A redesigned screen opts in with class
   "rd": it gets the new background, body font and base text color,
   without touching the ~20 not-yet-redesigned screens. Display
   font (Saira) is applied only through the .t-* utilities.
   ============================================================= */
.rd { font-family: var(--font-body); color: var(--text-body); background: var(--bg-app); -webkit-font-smoothing: antialiased; }
.rd p { line-height: 1.5; text-wrap: pretty; }

/* — Type-scale utilities (size / weight / tracking from the spec table) — */
.t-stat-hero { font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: .01em; line-height: 1; color: var(--text-hi); }
.t-team      { font-family: var(--font-display); font-size: 25px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1.02; color: var(--text-hi); }
.t-section   { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--text-hi); }
.t-stat      { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: .02em; line-height: 1; color: var(--text-hi); }
.t-name      { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .01em; color: var(--text-hi); }
.t-name-row  { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text-hi); }
.t-btn       { font-family: var(--font-display); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.t-body      { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-body); }
.t-meta      { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--text-muted); }
.t-eyebrow   { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.t-micro     { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }

/* — OVR tier color helpers (encode the rule once) — */
.ovr-elite { color: var(--ovr-elite); }
.ovr-solid { color: var(--ovr-solid); }
.ovr-dev   { color: var(--ovr-dev); }
.ovr-raw   { color: var(--ovr-raw); }