/* AUTO-GENERATED — do not edit. Synced from styling/ via:
   npm run sync:tokens  (frontend/scripts/sync-styling-tokens.mjs)
*/

/* FlamesVision Design Tokens
   Calgary Flames Hockey Operations — internal design system
   Variables + utilities only. Optional document reset: base.css
   Web fonts: fonts.css (must load before other CSS). */

:root {
  /* ---- Surfaces ---- */
  --fv-bg:             #F4F2EE;  /* page background */
  --fv-surface:        #FFFFFF;  /* card */
  --fv-surface-inset:  #FAF8F4;  /* nested card / inset panel */
  --fv-surface-dark:   #141210;  /* sidebar */
  --fv-track:          #EFEBE4;  /* segmented-control track */

  /* ---- Lines ---- */
  --fv-border:         #E7E3DC;  /* card border */
  --fv-border-input:   #E2DDD5;  /* input border */
  --fv-rule:           #F2EFE9;  /* table row rule */
  --fv-rule-strong:    #EEEAE3;  /* table header rule */

  /* ---- Text ---- */
  --fv-text:           #1A1714;  /* primary */
  --fv-text-2:         #3E3A34;  /* secondary */
  --fv-text-3:         #6E6862;  /* tertiary / body support */
  --fv-text-muted:     #8B857D;  /* labels, eyebrows */
  --fv-text-faint:     #9A948C;  /* de-emphasized numerals */
  --fv-on-dark:        #F2EFE9;  /* text on sidebar */
  --fv-on-dark-idle:   #B7B1A8;  /* inactive sidebar row */
  --fv-on-dark-label:  #6B655D;  /* sidebar section label */

  /* ---- Accent & semantic ---- */
  --fv-red:            #c00000;  /* UI accent, links, negative */
  --fv-red-brand:      #C8102E;  /* Flames brand mark only */
  --fv-red-tint:       rgba(192,0,0,.07); /* own-team row highlight */
  --fv-green:          #1F8A5B;  /* positive / gain */
  --fv-teal:           #1F6F63;  /* at-or-above-target chart segment */
  --fv-gold:           #C9A227;  /* visit / annotation marker */
  --fv-orange:         #B5601E;  /* comparable-player reference line */

  /* ---- Type families ---- */
  --fv-font-display:   'Archivo', system-ui, sans-serif;
  --fv-font-body:      'IBM Plex Sans', system-ui, sans-serif;
  --fv-font-mono:      'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Radii ---- */
  --fv-radius-card:    14px;
  --fv-radius-inset:   11px;
  --fv-radius-control:  8px;

  /* ---- Elevation ---- */
  --fv-shadow-card:    0 1px 2px rgba(20,17,15,.04);
  --fv-shadow-raised:  0 4px 14px rgba(0,0,0,.42);

  /* ---- Spacing scale (4px base) ---- */
  --fv-space-1: 4px;   --fv-space-2: 8px;   --fv-space-3: 12px;
  --fv-space-4: 16px;  --fv-space-5: 20px;  --fv-space-6: 26px;
  --fv-space-7: 30px;  --fv-space-8: 44px;

  /* ---- Motion ---- */
  --fv-ease:           cubic-bezier(.4,0,.2,1);
  --fv-duration:       .28s;
}

/* All numeric columns / stat readouts */
.fv-tnum { font-variant-numeric: tabular-nums; }

/* ---- Type ramp ---- */
.fv-page-title { font: 800 27px/1.1 var(--fv-font-display); letter-spacing: -.015em; }
.fv-eyebrow    { font: 600 10.5px/1 var(--fv-font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fv-text-muted); }
.fv-card-title { font: 700 15px/1 var(--fv-font-display); }
.fv-kpi        { font: 800 30px/1 var(--fv-font-display); letter-spacing: -.01em; }
.fv-kpi-label  { font: 600 10.5px/1 var(--fv-font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--fv-text-muted); }
.fv-th         { font: 600 9.5px/1 var(--fv-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--fv-text-muted); }
.fv-td         { font: 400 12px/1.4 var(--fv-font-body); }
.fv-name       { font: 600 13px/1.3 var(--fv-font-body); }
.fv-link       { font: 600 11px/1 var(--fv-font-mono); color: var(--fv-red); }

/* ---- Card ---- */
.fv-card {
  background: var(--fv-surface);
  border: 1px solid var(--fv-border);
  border-radius: var(--fv-radius-card);
  box-shadow: var(--fv-shadow-card);
  padding: 18px 20px;
}