:root {
  /* Apple-style typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Light theme (default) */
  --c-bg: #ffffff;
  --c-bg-elevated: #ffffff;
  --c-surface: #f5f5f7;
  --c-surface-2: #ebebef;
  --c-text: #1d1d1f;
  --c-text-strong: #000000;
  --c-muted: #6e6e73;
  --c-muted-soft: #86868b;
  --c-accent: #0071e3;
  --c-accent-strong: #0058b8;
  --c-danger: #ff3b30;
  --c-success: #34c759;
  --c-border: #d2d2d7;
  --c-border-soft: #e6e6eb;
  --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --c-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --c-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
  --c-led-on: #34c759;
  --c-led-off: #d2d2d7;
  --c-pane-tint: rgba(0, 0, 0, 0.02);
  --c-accent-bg: rgba(0, 113, 227, 0.10);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 980px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  --caption-size: 40px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #000000;
    --c-bg-elevated: #1c1c1e;
    --c-surface: #1c1c1e;
    --c-surface-2: #2c2c2e;
    --c-text: #f5f5f7;
    --c-text-strong: #ffffff;
    --c-muted: #98989d;
    --c-muted-soft: #6e6e73;
    --c-accent: #2997ff;
    --c-accent-strong: #5fb0ff;
    --c-danger: #ff453a;
    --c-success: #30d158;
    --c-border: #38383a;
    --c-border-soft: #2c2c2e;
    --c-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --c-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --c-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --c-led-on: #30d158;
    --c-led-off: #2c2c2e;
    --c-pane-tint: rgba(255, 255, 255, 0.02);
    --c-accent-bg: rgba(41, 151, 255, 0.16);
  }
}

body.theme-light {
  color-scheme: light;
  --c-bg: #ffffff;
  --c-bg-elevated: #ffffff;
  --c-surface: #f5f5f7;
  --c-surface-2: #ebebef;
  --c-text: #1d1d1f;
  --c-text-strong: #000000;
  --c-muted: #6e6e73;
  --c-accent: #0071e3;
  --c-accent-strong: #0058b8;
  --c-border: #d2d2d7;
  --c-border-soft: #e6e6eb;
  --c-led-off: #d2d2d7;
  --c-pane-tint: rgba(0, 0, 0, 0.02);
}

body.theme-dark {
  color-scheme: dark;
  --c-bg: #000000;
  --c-bg-elevated: #1c1c1e;
  --c-surface: #1c1c1e;
  --c-surface-2: #2c2c2e;
  --c-text: #f5f5f7;
  --c-text-strong: #ffffff;
  --c-muted: #98989d;
  --c-accent: #2997ff;
  --c-accent-strong: #5fb0ff;
  --c-border: #38383a;
  --c-border-soft: #2c2c2e;
  --c-led-off: #2c2c2e;
  --c-pane-tint: rgba(255, 255, 255, 0.02);
}