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

:root,
[data-theme="dark"] {
  --bg-base: #101319;
  --bg-surface: #171c24;
  --bg-elevated: #202632;
  --bg-hover: #252c3a;
  --border: rgba(255,255,255,0.09);
  --border-focus: rgba(41, 182, 161, 0.46);
  --text-primary: #edf2f7;
  --text-secondary: #b7c2d1;
  --text-muted: #8794a7;
  --accent-action: #29b6a1;
  --accent-action-bg: rgba(41, 182, 161, 0.12);
  --accent-action-lt: #55d2c1;
  --accent-nav: #5d7cfa;
  --accent-nav-lt: #8aa0ff;
  --accent-nav-bg: rgba(93, 124, 250, 0.14);
  --accent-warm: #d69b4c;
  --accent-warm-bg: rgba(214, 155, 76, 0.14);
  --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: #f6f8fb;
  --bg-surface: #ffffff;
  --bg-elevated: #eef2f7;
  --bg-hover: #e7edf5;
  --border: rgba(20,31,48,0.12);
  --border-focus: rgba(24, 150, 132, 0.42);
  --text-primary: #142033;
  --text-secondary: #435169;
  --text-muted: #66748a;
  --accent-action: #189684;
  --accent-action-bg: rgba(24, 150, 132, 0.10);
  --accent-action-lt: #29b6a1;
  --accent-nav: #405fd6;
  --accent-nav-lt: #5d7cfa;
  --accent-nav-bg: rgba(64, 95, 214, 0.10);
  --accent-warm: #a76f24;
  --accent-warm-bg: rgba(167, 111, 36, 0.11);
  --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;
}