/* =====================================================================
   THEME TOKENS — spec §45
   Every colour and type decision in the app resolves to a variable here.
   At runtime, js/theme.js overwrites --brand-* from app_settings.branding,
   so rebranding is a database update, not a code change.
   ===================================================================== */

:root {
  /* --- surface ramp: deep blue-black, not pure black.
         Pure #000 kills the glass/elevation effect on a TV. --- */
  --bg:            #0C0E12;
  --surface:       #14171D;
  --surface-2:     #1B1F26;
  --surface-3:     #242932;
  --line:          #272C35;
  --line-bright:   #3A414D;

  /* --- text --- */
  --text:          #ECEEF2;
  --text-dim:      #A9B0BC;
  --muted:         #737C8A;

  /* --- brand: taken from the logo. Orange for action, chrome for
         achievement. Overwritten at runtime from the tenant's
         organizations.settings.branding. --- */
  --brand:         #F86B0A;
  --brand-hot:     #FC6000;   /* deepest orange in the mark */
  --brand-soft:    #F86B0A1F;
  --brand-line:    #F86B0A66;
  --brand-glow:    #FC600055;

  /* Chrome, the logo's other half. Used where the old palette used gold:
     achievement and emphasis, never for ordinary controls. */
  --accent:        #E8ECF1;
  --accent-soft:   #E8ECF11A;

  /* --- status ---
     Warning amber sits deliberately close to the brand orange. They stay
     apart because they never share a context: the brand appears as the
     logo and as filled buttons, warnings as small outlined chips and
     text. Amber is lighter and yellower than #F86B0A, which reads as
     caution rather than as identity — and it is easier on the eye across
     a long shift than a hard yellow. --- */
  --up:            #34D399;
  --down:          #F43F5E;
  --warn:          #FB923C;
  --info:          #38BDF8;
  --flat:          #6F8296;

  /* --- podium: gold / silver / bronze, for the gamification module.
     Gold is pushed yellower than the brand orange so first place stays
     unmistakable on a TV across a sales floor. --- */
  --gold:          #FBBF24;
  --silver:        #CBD5E1;
  --bronze:        #D08B45;

  /* --- type ---
     Barlow Condensed carries ranks and figures: it is the broadcast
     lower-third face, which is exactly the register §44 asks for.
     Barlow (regular width) handles body so the family stays cohesive. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  /* --- scale --- */
  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2.125rem;
  --step-4:  3rem;
  --step-5:  4.5rem;

  /* --- geometry --- */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --gap:  16px;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.45);

  --sidebar-w: 232px;
  --topbar-h:  60px;
}

/* Tabular figures everywhere numbers are compared vertically.
   Without this a leaderboard's digits jitter between rows. */
.tnum, table, .metric, .rank {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}