/* =============================================================================
   TN STARS FLAG — Brand & Theme Tokens
   -----------------------------------------------------------------------------
   This is the SINGLE PLACE to edit colors, fonts, and core look-and-feel
   values for the entire TN Stars Flag scoreboard.

   Brand: pink (#E0306F) + Carolina blue (#3D8BCC) — derived from the official
   shield logo. Three white stars echo the Tennessee tri-star state symbol.

   How to change a color:
     1. Find the variable below.
     2. Change the hex value.
     3. Save, redeploy. Every page updates.

   Powered by SidelineOS.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   DARK MODE (default)
   ----------------------------------------------------------------------------- */
:root {

  /* ---- Brand colors ---- */
  --accent:      #FF4A8B;   /* PRIMARY HIGHLIGHT — bracket borders, mode bars, active tab, pick pills.
                              Slightly punchier than the logo pink so it pops on a dark navy field. */
  --cyan:        #5BA3D9;   /* Logo + headline gradient stop. Carolina blue from the shield. */
  --purple:      #E0306F;   /* Secondary brand accent — wordmark gradient end (TN Stars pink). */
  --green:       #2BD680;   /* Wins / positive / "good" stat color */
  --red:         #FF5C7A;   /* Losses / negative / "bad" stat color */
  --orange:      #FFA84A;   /* Warning / upcoming highlight */
  --yellow:      #FFD43B;   /* Locked seed badge */
  --amber:       #F59E0B;   /* Secondary warning */

  /* ---- Surfaces ---- */
  --navy:        #0E1A2E;   /* App background — deep navy with pink/blue undertone */
  --bg:          var(--navy);
  --dark-bg:     #08111F;
  --card:        #16243E;   /* Card background — game cards, standings rows, team detail panels */
  --card-hover:  #1D2E4C;
  --surface:     rgba(255,255,255,0.06);

  /* ---- Text ---- */
  --text:        #F1F5FB;
  --dim:         #8AA0BC;
  --muted:       var(--dim);

  /* ---- Borders ---- */
  --border:      rgba(138,160,188,0.18);

  /* ---- Typography ---- */
  --font-body:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'Space Mono', ui-monospace, monospace;
  --font-head:   'Anton', var(--font-body); /* Sports-broadcast display face for big numbers + headlines */

  /* ---- Geometry ---- */
  --radius:      14px;
  --radius-sm:   8px;
  --transition:  180ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* -----------------------------------------------------------------------------
   LIGHT MODE
   ----------------------------------------------------------------------------- */
body.light {

  /* ---- Brand accent (deeper pink for white backgrounds) ---- */
  --accent:      #C2255A;

  /* ---- Surfaces ---- */
  --navy:        #FBF5F8;   /* Soft pink-tinted white — echoes the cream on the marketing site */
  --card:        #FFFFFF;
  --card-hover:  #F4E8EF;
  --dark-bg:     #ECDCE5;
  --surface:     rgba(0,0,0,0.04);

  /* ---- Text ---- */
  --text:        #15203A;
  --dim:         #5C6C84;

  /* ---- Borders ---- */
  --border:      rgba(15,32,58,0.12);
}