:root {
  color-scheme: light dark;
  --color-canvas: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #edf1f7;
  --color-line: #e1e6ee;
  --color-ink: #0d1526;
  --color-slate: #566174;
  --color-muted: #8a94a6;
  --color-brand: #8fb0cd;
  --color-primary: #3e6a91;
  --color-primary-hover: #355d82;
  --color-on-primary: #ffffff;
  --color-primary-soft: #e8eff6;
  --color-glow: #f2b544;
  --color-success: #17795a;
  --color-danger: #c8423b;
  --color-warning: #93600e;
  --space-page: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --space-section: clamp(1.75rem, 1.2rem + 2vw, 3.5rem);
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --radius-control: 10px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --size-tap: 44px;
  --size-mark: 2.5rem;
  --measure: 65ch;
  --line-width: 1px;
  --focus-width: 2px;
  --type-display: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --type-h1: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --type-h3: 1.0625rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #0a101b;
  --color-surface: #111a29;
  --color-surface-2: #172235;
  --color-line: #22304a;
  --color-ink: #e9eef6;
  --color-slate: #a2adbf;
  --color-muted: #6b778c;
  --color-brand: #8fb0cd;
  --color-primary: #8fb0cd;
  --color-primary-hover: #a9c3da;
  --color-on-primary: #0a101b;
  --color-primary-soft: #1a2738;
  --color-glow: #f2be5c;
  --color-success: #4cc29b;
  --color-danger: #f07a72;
  --color-warning: #f2be5c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #0a101b;
    --color-surface: #111a29;
    --color-surface-2: #172235;
    --color-line: #22304a;
    --color-ink: #e9eef6;
    --color-slate: #a2adbf;
    --color-muted: #6b778c;
    --color-brand: #8fb0cd;
    --color-primary: #8fb0cd;
    --color-primary-hover: #a9c3da;
    --color-on-primary: #0a101b;
    --color-primary-soft: #1a2738;
    --color-glow: #f2be5c;
    --color-success: #4cc29b;
    --color-danger: #f07a72;
    --color-warning: #f2be5c;
  }
}