/* ============================================================
   The Fifth Line — Design Tokens (single source of truth)
   ------------------------------------------------------------
   Modern blue, dark, sports-data aesthetic.
   Variable NAMES intentionally match the legacy fifthline_new.css
   (--accent-primary, --bg-primary, ...) so existing pages adopt
   these values automatically once this file is loaded first.
   Load order: tokens.css  ->  page/shared CSS  ->  page inline.
   ============================================================ */

:root {
  /* --- Surfaces (dark slate, slightly cool to sit under blue) --- */
  --bg-primary:    #0f141a;  /* page background        */
  --bg-secondary:  #161d26;  /* cards, tables, nav      */
  --bg-tertiary:   #212b38;  /* inputs, hovers, headers */
  --bg-elevated:   #2a3645;  /* popovers / raised hover */

  /* --- Text --- */
  --text-primary:   #e6edf3; /* body                    */
  --text-secondary: #9aa7b4; /* muted / labels          */
  --text-accent:    #ffffff; /* emphasis / headings     */

  /* --- Brand accent: BLUE (primary identity color) --- */
  --accent-primary:        #2f81f7; /* modern, vivid blue      */
  --accent-primary-darker: #1f6feb; /* hover / pressed         */
  --accent-primary-soft:   rgba(47, 129, 247, 0.15); /* tints  */
  --accent-secondary:      #58a6ff; /* lighter blue, links     */

  /* --- Semantic data colors (green/red kept ONLY for meaning) --- */
  --accent-positive: #3fb950; /* price up / gain / complete */
  --accent-negative: #f85149; /* price down / loss          */
  --accent-warning:  #d29922; /* unlimited / caution        */

  /* --- Borders & shadows --- */
  --border-color:   #2d3744;
  --border-strong:  #3d4a5c;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 4px 14px rgba(47, 129, 247, 0.25);
  --shadow-color: rgba(0, 0, 0, 0.35); /* legacy alias used by fifthline_new.css */

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius:    6px;   /* default (matches legacy --border-radius) */
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-radius: var(--radius); /* legacy alias */

  /* --- Type --- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Mono for money/stats so decimals align like a terminal (Direction A).
     The font is loaded per-page via the Google Fonts link in head.hbs. */
  --font-numeric: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
  --font-display: 'Saira Condensed', 'Inter', sans-serif;

  /* Type scale (1.250 major-third), rem-based */
  --text-xs:   0.75rem;   /* 12px — labels, badges     */
  --text-sm:   0.875rem;  /* 14px — table body, meta   */
  --text-base: 1rem;      /* 16px — body               */
  --text-lg:   1.25rem;   /* 20px — sub-headings       */
  --text-xl:   1.563rem;  /* 25px — section titles     */
  --text-2xl:  1.953rem;  /* 31px — page headings      */
  --text-3xl:  2.441rem;  /* 39px — hero               */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --leading-tight: 1.2;
  --leading-base:  1.6;

  /* --- Spacing scale (4px base) --- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-8: 3rem;     /* 48 */

  /* --- Layout --- */
  --container-max: 1400px;
  --transition: 0.2s ease;
}

/* Numeric helper: money/stats render in the mono numeric font with
   tabular figures so columns align and read like a terminal (Direction A).
   These shared classes are used across highlights/player/sets/moments/
   leaderboard, so this single rule brings the terminal look everywhere.
   The mono font loads per-page via head.hbs; pages that don't load it
   fall back to the next family in --font-numeric. */
.tabular,
.dollar-amount,
.dollar-amount-true,
.offer-amount,
.count-amount,
.edition-amount,
.fmv-amount {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}