/* ============================================================
   DESIGN TOKENS — ZankinsIQ Trading App Aesthetic
   Bloomberg Terminal + Robinhood Design System
   ============================================================ */

:root {
  /* === COLORS === */
  --bg-primary:    #0d0d0d;
  --bg-secondary:  #1a1a1a;
  --bg-tertiary:   #252525;
  --text-primary:  #f0f0f0;
  --text-secondary:#b0b0b0;
  --text-tertiary: #808080;

  --semantic-high:    #22c55e;   /* green — high confidence, wins */
  --semantic-medium:  #eab308;   /* yellow — medium */
  --semantic-low:     #ef4444;   /* red — low confidence, losses */
  --semantic-neutral: #6b7280;   /* gray — pushes, neutral */

  --border: #2a2a2a;

  /* === TYPOGRAPHY === */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: Monaco, 'Courier New', monospace;

  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-base:14px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* === SPACING === */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* === TRANSITIONS === */
  --transition: 150ms ease;

  /* === CONFIDENCE COLORS (semantic aliases) === */
  --conf-extreme: #22c55e;
  --conf-high:    #22c55e;
  --conf-medium:  #eab308;
  --conf-low:     #ef4444;
}

/* === RESET === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* === UTILITIES === */
.font-mono      { font-family: var(--font-mono); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-green     { color: var(--semantic-high); }
.text-yellow    { color: var(--semantic-medium); }
.text-red       { color: var(--semantic-low); }
.border-b       { border-bottom: 1px solid var(--border); }
.border-t       { border-top: 1px solid var(--border); }
.mb-sm          { margin-bottom: var(--space-sm); }
.mb-md          { margin-bottom: var(--space-md); }
.mb-lg          { margin-bottom: var(--space-lg); }
.mb-xl          { margin-bottom: var(--space-xl); }
.mt-sm          { margin-top: var(--space-sm); }
.mt-md          { margin-top: var(--space-md); }
.mt-lg          { margin-top: var(--space-lg); }
.uppercase      { text-transform: uppercase; letter-spacing: 0.08em; }
.mono-data      { font-family: var(--font-mono); font-size: var(--font-size-sm); }

/* === LEGACY COMPAT (used by pricing/bankroll/bet_slip templates) === */
.display-font   { font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.number-font    { font-family: var(--font-mono); }
.sport-hub      { width: 100%; }

/* Old color vars — fallback aliases so un-migrated templates don't break */
:root {
  --color-text:        var(--text-primary);
  --color-text-muted:  var(--text-secondary);
  --color-text-dim:    var(--text-tertiary);
  --color-surface:     var(--bg-secondary);
  --color-surface-2:   var(--bg-tertiary);
  --color-border:      var(--border);
  --color-bg:          var(--bg-primary);
  --color-green:       var(--semantic-high);
  --color-red:         var(--semantic-low);
  --color-nba:         var(--semantic-high);
  --color-mlb:         var(--semantic-medium);
  --color-golf:        var(--semantic-neutral);
  --font-display:      var(--font-sans);
  --radius-md:         0px;
}