/* ============================================================
 * PressBox Analytics — Brand Tokens
 * ============================================================
 * Source of truth for every visual decision.
 * Every HTML page imports this BEFORE any inline styles.
 *
 * Rules:
 *  - No hardcoded color/size/spacing values in pages.
 *    If you need a value that isn't here, add the token first.
 *  - --sage and --rust are scoped to DATA VIZ ONLY
 *    (charts, W/L results, win-rate displays, line deltas).
 *    Do NOT use them on nav, buttons, page headers, or general UI.
 *  - Team identity colors live in team-colors.css, NOT here.
 * ============================================================ */

:root {

  /* ============================================================
   * COLORS — Brand palette
   * ============================================================ */

  /* — Cream scale (backgrounds, surfaces, dividers) — */
  --cream:        #F8F5EE;   /* page bg, surfaces */
  --cream-dark:   #EFE9DC;   /* subtle bg, hover surfaces */
  --cream-mid:    #E8E1D3;   /* divider, soft borders */
  --border:       #DDD6C8;   /* lines, card borders */

  /* — Ink scale (text, dark surfaces) — */
  --ink:          #0F0E0A;   /* primary text, dark UI surfaces */
  --text-mid:     #6B6455;   /* secondary text */
  --text-light:   #A39A88;   /* tertiary text, captions, meta */

  /* — Gold scale (accents, brand) — */
  --gold:         #B8922A;   /* primary accent */
  --gold-light:   #D4A83A;   /* hover, highlights */
  --gold-pale:    #F5EDD0;   /* gold bg fills */

  /* — Silver (A-tier badge fill) — */
  --silver:       #C0C5CC;

  /* — Sage scale (DATA VIZ ONLY — wins, positive outcomes) — */
  --sage:         #4A7A4A;
  --sage-light:   #6BA06B;
  --sage-pale:    #E8F0E8;
  --sage-mid:     #B8D2B8;   /* goldilocks badge fill */

  /* — Rust scale (DATA VIZ ONLY — losses, negative outcomes) — */
  --rust:         #B85A2A;
  --rust-light:   #D17A4A;
  --rust-pale:    #FBEFE0;

  /* — Semantic data-viz tokens — */
  --win:          var(--sage);
  --loss:         var(--rust);
  --push:         var(--text-light);


  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */

  --serif:        'Libre Baskerville', Georgia, serif;
  --sans:         'Source Sans 3', system-ui, sans-serif;

  /* — Type scale (11px floor) — */
  --text-eyebrow: 11px;   /* eyebrows, badges (uppercase + letter-spacing) */
  --text-micro:   11px;   /* metadata, captions, ticker */
  --text-sm:      12px;   /* fine print, table cells */
  --text-base:    13px;   /* nav links, secondary body */
  --text-md:      15px;   /* body paragraph */
  --text-lg:      18px;   /* subheads */
  --text-xl:      22px;   /* section heads */
  --text-2xl:     28px;   /* page heads */
  --text-3xl:     42px;   /* hero / display */
  --text-hero:    72px;   /* max display */

  /* — Weights — */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;


  /* ============================================================
   * SPACING (4px rhythm)
   * ============================================================ */

  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;     /* default container side padding */
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;


  /* ============================================================
   * RADII
   * ============================================================ */

  --radius-sm:    2px;
  --radius-md:    4px;     /* default */
  --radius-lg:    8px;
  --radius-full:  50%;     /* circles, avatars */


  /* ============================================================
   * LAYOUT
   * ============================================================ */

  --max-width:    1200px;
  --nav-height:   80px;


  /* ============================================================
   * MOTION
   * ============================================================ */

  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    300ms ease;

}


/* ============================================================
 * RESET / BASE
 * ============================================================ */

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}