/* Design tokens */
:root {
  /* Tells browser to render native UI (scrollbars, form controls, focus
     rings) in dark by default. Overridden per theme below. */
  color-scheme: dark;

  /* Colors - Dark theme */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --bg-glass: rgba(22, 27, 34, 0.7);

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #484f58;

  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-dim: rgba(88, 166, 255, 0.15);

  --recording: #da3633;
  --recording-dim: rgba(218, 54, 51, 0.15);

  --success: #238636;
  --success-dim: rgba(35, 134, 54, 0.15);

  --warning: #d29922;
  --error: #f85149;

  --border: #30363d;
  --border-hover: #484f58;

  /* Semantic colors (theme-aware) */
  --segment-summary: #4ade80;
  --segment-summary-border: rgba(74, 222, 128, 0.38);
  --topic-badge-bg: rgba(136, 132, 216, 0.12);
  --topic-badge-text: #b4b0e0;
  --caution: #ffc107;
  --caution-bg: rgba(255, 193, 7, 0.08);
  --caution-border: rgba(255, 193, 7, 0.25);
  --meter-bg: rgba(33, 38, 45, 0.6);
  --savings-bg: rgba(74, 222, 128, 0.06);

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;

  /* Font */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.5rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Z-index */
  --z-base: 1;
  --z-header: 100;
  --z-panel: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

/* ── Soft Dark theme ─────────────────────────────────────────────────── */
[data-theme="soft-dark"] {
  color-scheme: dark;
  --bg-primary: #1a1b2e;
  --bg-secondary: #22243d;
  --bg-tertiary: #2a2d4a;
  --bg-overlay: rgba(10, 10, 30, 0.7);
  --bg-glass: rgba(34, 36, 61, 0.75);
  --text-primary: #e0e0f0;
  --text-secondary: #9090b0;
  --text-muted: #5a5a7a;
  --accent: #7c8cf5;
  --accent-hover: #9aa5ff;
  --accent-dim: rgba(124, 140, 245, 0.15);
  --recording: #e05555;
  --recording-dim: rgba(224, 85, 85, 0.15);
  --success: #2ea043;
  --success-dim: rgba(46, 160, 67, 0.15);
  --warning: #d4a030;
  --error: #f06050;
  --border: #353560;
  --border-hover: #4a4a78;
  --segment-summary: #5ae088;
  --segment-summary-border: rgba(90, 224, 136, 0.35);
  --topic-badge-bg: rgba(140, 150, 245, 0.12);
  --topic-badge-text: #a0a8e8;
  --caution: #d4a030;
  --caution-bg: rgba(212, 160, 48, 0.08);
  --caution-border: rgba(212, 160, 48, 0.25);
  --meter-bg: rgba(26, 27, 46, 0.6);
  --savings-bg: rgba(90, 224, 136, 0.06);
}

/* ── Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-tertiary: #eaeef2;
  --bg-overlay: rgba(0, 0, 0, 0.4);
  --bg-glass: rgba(246, 248, 250, 0.8);
  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #8b949e;
  --accent: #0969da;
  --accent-hover: #0550ae;
  --accent-dim: rgba(9, 105, 218, 0.1);
  --recording: #cf222e;
  --recording-dim: rgba(207, 34, 46, 0.1);
  --success: #1a7f37;
  --success-dim: rgba(26, 127, 55, 0.1);
  --warning: #bf8700;
  --error: #cf222e;
  --border: #d0d7de;
  --border-hover: #8c959f;
  /* Semantic colors for light theme */
  --segment-summary: #1a7f37;
  --segment-summary-border: rgba(26, 127, 55, 0.35);
  --topic-badge-bg: rgba(9, 105, 218, 0.1);
  --topic-badge-text: #0969da;
  --caution: #bf8700;
  --caution-bg: rgba(191, 135, 0, 0.08);
  --caution-border: rgba(191, 135, 0, 0.3);
  --meter-bg: rgba(234, 238, 242, 0.8);
  --savings-bg: rgba(26, 127, 55, 0.06);
}