/* ============================================================
   variables.css — CSS custom properties (design tokens)
   All colors, radii, and nav height live here.
   No other file may use hardcoded hex values.
   ============================================================ */

:root {
  /* ── Backgrounds ── */
  --bg:        #08080E;
  --surface:   #0F0F1A;
  --surface-2: #141426;
  --surface-3: #1A1A33;   /* third elevation: card hover, tooltips */

  /* ── Borders ── */
  --border:        #1C1C30;
  --border-subtle: #16162A;  /* lighter dividers inside cards */
  --border-accent: rgba(99, 102, 241, 0.28);

  /* ── Text ── */
  --text:           #EEEEF6;
  --text-secondary: #8686A6;
  --text-muted:     #6A6A88;

  /* ── Brand — Indigo (interactive) ── */
  /* Use for: CTAs, buttons, links, active states, emphasis text */
  --indigo:       #6366F1;
  --indigo-hover: #4F46E5;
  --indigo-dim:   rgba(99, 102, 241, 0.12);
  --indigo-glow:  rgba(99, 102, 241, 0.06);

  /* ── Brand — Slate Indigo (logo tone) ── */
  /* Use for: section labels, week markers, icons, decorative accents — branded but not clickable */
  --brand-muted:     #5B6099;
  --brand-muted-dim: rgba(91, 96, 153, 0.18);

  /* ── Semantic ── */
  --green: #34D399;
  --red:   #EF4444;

  /* Button text white — used only for text on indigo backgrounds */
  --white: #fff;

  /* ── Typography ── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;

  /* ── Radii ── */
  --radius:    10px;
  --radius-lg: 16px;

  /* ── Nav ── */
  --nav-height: 64px;
}