/* ============================================================
   Design Tokens - managed by design-system skill
   ============================================================ */

:root,
[data-theme="dark"] {
  --bg-base: #0f1117;
  --bg-surface: #161b27;
  --bg-elevated: #1c2233;
  --bg-hover: #1a2035;
  --border: rgba(255,255,255,0.07);
  --border-focus: rgba(16,185,129,0.4);
  --text-primary: #e2e8f0;
  --text-secondary: #a8b3c4;
  --text-muted: #94a3b8;
  --accent-action: #10b981;
  --accent-action-bg: rgba(16,185,129,0.10);
  --accent-action-lt: #34d399;
  --text-on-action: #062d22;
  --accent-nav: #6366f1;
  --accent-nav-lt: #818cf8;
  --accent-nav-bg: rgba(99,102,241,0.15);
  --accent-warm: #f59e0b;
  --accent-warm-lt: #fbbf24;
  --accent-warm-bg: rgba(245,158,11,0.10);
  --accent-danger: #ef4444;
  --accent-danger-bg: rgba(239,68,68,0.10);
  --auth-button-surface: #ffffff;
  --auth-button-text: #1f1f1f;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.32);
}

[data-theme="light"] {
  --bg-base: #e9eef4;
  --bg-surface: #ffffff;
  --bg-elevated: #f6f8fb;
  --bg-hover: #eef2f7;
  --border: rgba(15,23,42,0.14);
  --border-focus: rgba(16,185,129,0.4);
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-action: #10b981;
  --accent-action-bg: rgba(16,185,129,0.08);
  --accent-action-lt: #34d399;
  --text-on-action: #062d22;
  --accent-nav: #6366f1;
  --accent-nav-lt: #818cf8;
  --accent-nav-bg: rgba(99,102,241,0.08);
  --accent-warm: #f59e0b;
  --accent-warm-lt: #fbbf24;
  --accent-warm-bg: rgba(245,158,11,0.08);
  --accent-danger: #ef4444;
  --accent-danger-bg: rgba(239,68,68,0.08);
  --auth-button-surface: #ffffff;
  --auth-button-text: #1f1f1f;
  --shadow-sm: 0 1px 3px rgba(20,31,48,0.08);
  --shadow-md: 0 8px 24px rgba(20,31,48,0.14);
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}