/* ==========================================================================
   SugarBets Design System — Colors & Type
   Dark-native analytics aesthetic. Blue-lead accent, semantic green/red/amber.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Surface / background scale (cool neutral, not pure black) ---- */
  --sb-bg:           #0b0e14;   /* page */
  --sb-surface:      #111520;   /* cards, header */
  --sb-surface-2:    #161b28;   /* nested / hover */
  --sb-surface-3:    #1c2235;   /* chips, inputs, pressed */
  --sb-border:       #252d42;   /* default 1px border */
  --sb-border-light: #2e3850;   /* hover / emphasized border */

  /* ---------- Foreground scale ------------------------------------------- */
  --sb-fg-1:   #e1e4ea;   /* primary text */
  --sb-fg-2:   #8892a6;   /* secondary / labels */
  --sb-fg-3:   #5a6478;   /* faint / captions / axis ticks */

  /* ---------- Brand / accent --------------------------------------------- */
  --sb-accent:       #3b82f6;   /* SugarBets blue — action, emphasis */
  --sb-accent-hover: #2563eb;
  --sb-accent-soft:  rgba(59, 130, 246, 0.12);

  /* ---------- Semantic (signals) ----------------------------------------- */
  --sb-green:     #22c55e;                      /* +EV, recommended, hot */
  --sb-green-dim: rgba(34, 197, 94, 0.12);
  --sb-red:       #ef4444;                      /* -EV, fade, cold */
  --sb-red-dim:   rgba(239, 68, 68, 0.12);
  --sb-amber:     #f59e0b;                      /* thin edge, caution, totals */
  --sb-amber-dim: rgba(245, 158, 11, 0.12);
  --sb-purple:    #a855f7;                      /* weather / context flag */
  --sb-purple-dim: rgba(168, 85, 247, 0.12);

  /* ---------- Confidence tiers ------------------------------------------- */
  --sb-tier-a: var(--sb-green);     /* A = strong bet */
  --sb-tier-b: var(--sb-accent);    /* B = solid */
  --sb-tier-c: var(--sb-amber);     /* C = thin / price sensitive */
  --sb-tier-monitor: var(--sb-fg-2);

  /* ---------- Type ------------------------------------------------------- */
  --sb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sb-font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Scale — compact analytics: small by default, bold where it matters */
  --sb-fs-micro: 10px;   /* adj-badge, workload chip */
  --sb-fs-caption: 11px; /* table headers, stat labels */
  --sb-fs-small: 12px;   /* table body, select */
  --sb-fs-body: 13px;    /* nav, buttons, dense body */
  --sb-fs-base: 14px;    /* body default */
  --sb-fs-h4: 16px;      /* section h2 */
  --sb-fs-h3: 18px;      /* header title */
  --sb-fs-h2: 22px;      /* team abbrev, stat-value */
  --sb-fs-h1: 28px;      /* sim-prob hero */
  --sb-fs-display: 40px; /* dashboard KPI display */

  --sb-lh-tight: 1.15;
  --sb-lh-snug:  1.35;
  --sb-lh-body:  1.5;

  --sb-tracking-tight:  -0.02em; /* headings, numeric display */
  --sb-tracking-normal: 0;
  --sb-tracking-wide:   0.04em;  /* uppercase labels */
  --sb-tracking-wider:  0.08em;  /* tier pills, VS labels */

  /* ---------- Spacing / radius / shadow ---------------------------------- */
  --sb-space-1: 4px;
  --sb-space-2: 8px;
  --sb-space-3: 12px;
  --sb-space-4: 16px;
  --sb-space-5: 20px;
  --sb-space-6: 24px;
  --sb-space-8: 32px;

  --sb-radius-sm: 4px;   /* chips, small buttons, inputs */
  --sb-radius:    8px;   /* cards, panels */
  --sb-radius-lg: 12px;  /* report sections */
  --sb-radius-pill: 999px;

  --sb-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --sb-shadow-2: 0 4px 12px rgba(0,0,0,0.35);
  --sb-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.35);

  --sb-transition: 150ms ease;
}

/* ==========================================================================
   Semantic element styles — use these classes or @extend patterns
   ========================================================================== */

.sb-body {
  font-family: var(--sb-font-body);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-body);
  color: var(--sb-fg-1);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sb-h1 { font-family: var(--sb-font-body); font-size: var(--sb-fs-h1); font-weight: 700; letter-spacing: var(--sb-tracking-tight); line-height: var(--sb-lh-tight); }
.sb-h2 { font-family: var(--sb-font-body); font-size: var(--sb-fs-h2); font-weight: 700; letter-spacing: var(--sb-tracking-tight); line-height: var(--sb-lh-tight); }
.sb-h3 { font-family: var(--sb-font-body); font-size: var(--sb-fs-h3); font-weight: 700; letter-spacing: var(--sb-tracking-tight); line-height: var(--sb-lh-snug); }
.sb-h4 { font-family: var(--sb-font-body); font-size: var(--sb-fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: var(--sb-lh-snug); }

.sb-p      { font-size: var(--sb-fs-base); line-height: var(--sb-lh-body); color: var(--sb-fg-1); }
.sb-meta   { font-size: var(--sb-fs-body); color: var(--sb-fg-2); }
.sb-caption{ font-family: var(--sb-font-mono); font-size: var(--sb-fs-caption); color: var(--sb-fg-2); text-transform: uppercase; letter-spacing: var(--sb-tracking-wide); }
.sb-micro  { font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro); color: var(--sb-fg-3); text-transform: uppercase; letter-spacing: var(--sb-tracking-wide); }

/* Numeric display — mono, tabular figures, so columns line up */
.sb-num       { font-family: var(--sb-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.sb-num-hero  { font-family: var(--sb-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--sb-fs-display); letter-spacing: var(--sb-tracking-tight); }
.sb-num-large { font-family: var(--sb-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--sb-fs-h1); letter-spacing: var(--sb-tracking-tight); }
.sb-num-stat  { font-family: var(--sb-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--sb-fs-h2); }

.sb-code  { font-family: var(--sb-font-mono); font-size: var(--sb-fs-small); background: var(--sb-surface-3); padding: 1px 6px; border-radius: 2px; color: var(--sb-fg-1); }

/* Semantic value colors — applied to numbers, pills, deltas */
.sb-positive { color: var(--sb-green); }
.sb-negative { color: var(--sb-red); }
.sb-neutral  { color: var(--sb-amber); }
.sb-muted    { color: var(--sb-fg-2); }
.sb-faint    { color: var(--sb-fg-3); }