/* Design tokens: light is the default, dark via prefers-color-scheme or an
   explicit [data-theme="dark"] override (toggle sets this attribute). */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.65);
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --border: rgba(0, 0, 0, 0.08);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --success: #1e8e3e;
  --danger: #d93025;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --surface-glass: rgba(28, 28, 30, 0.65);
    --ink: #f5f5f7;
    --ink-soft: #98989d;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #2997ff;
    --accent-soft: rgba(41, 151, 255, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme='dark'] {
  --bg: #000000;
  --bg-elevated: #1c1c1e;
  --surface-glass: rgba(28, 28, 30, 0.65);
  --ink: #f5f5f7;
  --ink-soft: #98989d;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #2997ff;
  --accent-soft: rgba(41, 151, 255, 0.16);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}

:root[data-theme='light'] {
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.65);
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --border: rgba(0, 0, 0, 0.08);
  --accent: #0071e3;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}