:root {
  color-scheme: light;

  --zen-color-canvas: #f7f3e8;
  --zen-color-surface: #fffdf6;
  --zen-color-surface-raised: #ffffff;
  --zen-color-text: #171a21;
  --zen-color-text-muted: #5f6470;
  --zen-color-border: #272b35;
  --zen-color-accent: #ffb000;
  --zen-color-accent-hover: #ffca4a;
  --zen-color-info: #2764d7;
  --zen-color-on-info: #ffffff;
  --zen-color-success: #18794e;
  --zen-color-on-success: #ffffff;
  --zen-color-warning: #9a5b00;
  --zen-color-on-warning: #ffffff;
  --zen-color-danger: #c62f3e;
  --zen-color-on-danger: #ffffff;
  --zen-color-focus: #7c3aed;

  --zen-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zen-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --zen-font-size-xs: 0.75rem;
  --zen-font-size-sm: 0.875rem;
  --zen-font-size-md: 1rem;
  --zen-font-size-lg: 1.25rem;
  --zen-font-size-xl: clamp(1.75rem, 4vw, 3rem);
  --zen-line-height: 1.55;

  --zen-space-1: 0.25rem;
  --zen-space-2: 0.5rem;
  --zen-space-3: 0.75rem;
  --zen-space-4: 1rem;
  --zen-space-5: 1.5rem;
  --zen-space-6: 2rem;
  --zen-space-7: 3rem;

  --zen-radius-sm: 0.35rem;
  --zen-radius-md: 0.7rem;
  --zen-radius-lg: 1rem;
  --zen-border-width: 2px;
  --zen-shadow-sm: 3px 3px 0 rgba(23, 26, 33, 0.16);
  --zen-shadow-md: 7px 7px 0 rgba(23, 26, 33, 0.16);
  --zen-motion-fast: 120ms;
  --zen-content-width: 76rem;
}

:root[data-zen-theme="dark"] {
  color-scheme: dark;
  --zen-color-canvas: #101218;
  --zen-color-surface: #181b23;
  --zen-color-surface-raised: #222631;
  --zen-color-text: #f5f1e8;
  --zen-color-text-muted: #b9bdc7;
  --zen-color-border: #f5f1e8;
  --zen-color-accent: #ffc247;
  --zen-color-accent-hover: #ffd77d;
  --zen-color-info: #8ab4ff;
  --zen-color-on-info: #171a21;
  --zen-color-success: #65d6a3;
  --zen-color-on-success: #171a21;
  --zen-color-warning: #ffc66d;
  --zen-color-on-warning: #171a21;
  --zen-color-danger: #ff8792;
  --zen-color-on-danger: #171a21;
  --zen-color-focus: #c4a5ff;
  --zen-shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.5);
  --zen-shadow-md: 7px 7px 0 rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-zen-theme="light"]) {
    color-scheme: dark;
    --zen-color-canvas: #101218;
    --zen-color-surface: #181b23;
    --zen-color-surface-raised: #222631;
    --zen-color-text: #f5f1e8;
    --zen-color-text-muted: #b9bdc7;
    --zen-color-border: #f5f1e8;
    --zen-color-accent: #ffc247;
    --zen-color-accent-hover: #ffd77d;
    --zen-color-info: #8ab4ff;
    --zen-color-on-info: #171a21;
    --zen-color-success: #65d6a3;
    --zen-color-on-success: #171a21;
    --zen-color-warning: #ffc66d;
    --zen-color-on-warning: #171a21;
    --zen-color-danger: #ff8792;
    --zen-color-on-danger: #171a21;
    --zen-color-focus: #c4a5ff;
  }
}