:root[data-zen-theme="paper"] {
  color-scheme: light;
  --zen-color-canvas: var(--zen-color-neutral-100);
  --zen-color-surface: var(--zen-color-neutral-50);
  --zen-color-surface-raised: var(--zen-color-neutral-50);
  --zen-color-surface-muted: var(--zen-color-neutral-100);
  --zen-color-surface-sunken: var(--zen-color-neutral-200);
  --zen-color-text: var(--zen-color-neutral-950);
  --zen-color-text-muted: var(--zen-color-neutral-600);
  --zen-color-text-subtle: var(--zen-color-neutral-500);
  --zen-color-border: var(--zen-color-neutral-800);
  --zen-color-border-muted: var(--zen-color-neutral-300);
  --zen-color-accent: var(--zen-color-amber-400);
  --zen-color-accent-hover: var(--zen-color-amber-300);
  --zen-color-accent-muted: var(--zen-color-amber-100);
  --zen-color-info: var(--zen-color-blue-600);
  --zen-color-success: var(--zen-color-green-600);
  --zen-color-warning: var(--zen-color-orange-600);
  --zen-color-danger: var(--zen-color-red-600);
  --zen-color-focus: var(--zen-color-violet-600);
}

:root[data-zen-theme="ink"] {
  color-scheme: dark;
  --zen-color-canvas: var(--zen-color-neutral-950);
  --zen-color-surface: var(--zen-color-neutral-900);
  --zen-color-surface-raised: var(--zen-color-neutral-800);
  --zen-color-surface-muted: var(--zen-color-neutral-800);
  --zen-color-surface-sunken: var(--zen-color-neutral-950);
  --zen-color-text: var(--zen-color-neutral-50);
  --zen-color-text-muted: var(--zen-color-neutral-300);
  --zen-color-text-subtle: var(--zen-color-neutral-400);
  --zen-color-border: var(--zen-color-neutral-200);
  --zen-color-border-muted: var(--zen-color-neutral-700);
  --zen-color-accent: var(--zen-color-amber-300);
  --zen-color-accent-hover: var(--zen-color-amber-200);
  --zen-color-accent-muted: var(--zen-color-amber-800);
  --zen-color-info: var(--zen-color-blue-300);
  --zen-color-success: var(--zen-color-green-300);
  --zen-color-warning: var(--zen-color-orange-300);
  --zen-color-danger: var(--zen-color-red-300);
  --zen-color-on-info: var(--zen-color-neutral-950);
  --zen-color-on-success: var(--zen-color-neutral-950);
  --zen-color-on-warning: var(--zen-color-neutral-950);
  --zen-color-on-danger: var(--zen-color-neutral-950);
  --zen-color-focus: var(--zen-color-violet-300);
  --zen-color-on-accent: var(--zen-color-neutral-950);
  --zen-color-text-inverse: var(--zen-color-neutral-950);
}

:root[data-zen-theme="playful"] {
  color-scheme: light;
  --zen-color-canvas: var(--zen-color-rose-100);
  --zen-color-surface: var(--zen-color-amber-50);
  --zen-color-surface-raised: var(--zen-color-neutral-50);
  --zen-color-surface-muted: var(--zen-color-orange-100);
  --zen-color-surface-sunken: var(--zen-color-violet-100);
  --zen-color-text: var(--zen-color-blue-900);
  --zen-color-text-muted: var(--zen-color-violet-700);
  --zen-color-text-subtle: var(--zen-color-blue-600);
  --zen-color-border: var(--zen-color-violet-700);
  --zen-color-border-muted: var(--zen-color-rose-300);
  --zen-color-accent: var(--zen-color-orange-300);
  --zen-color-accent-hover: var(--zen-color-amber-300);
  --zen-color-accent-muted: var(--zen-color-orange-100);
  --zen-color-info: var(--zen-color-blue-600);
  --zen-color-success: var(--zen-color-green-600);
  --zen-color-warning: var(--zen-color-amber-600);
  --zen-color-danger: var(--zen-color-rose-600);
  --zen-color-on-success: var(--zen-color-neutral-50);
  --zen-color-on-warning: var(--zen-color-neutral-50);
  --zen-color-focus: var(--zen-color-violet-500);
  --zen-color-on-accent: var(--zen-color-blue-950);
  --zen-radius-sm: 0.65rem;
  --zen-radius-md: 1rem;
  --zen-radius-lg: 1.5rem;
}

:root[data-zen-theme="paper"] {
  --zenbu-sys-font-family-ui: var(
    --zenbu-font-editorial,
    var(--zenbu-ref-font-family-sans)
  );
  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100);
  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100);
  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50);
  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200);
  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200);
  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700);
  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-500);
  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300);
  --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500);
  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600);
  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus);
}

:root[data-zen-theme="ink"],
:root[data-zen-theme="dark"] {
  --zenbu-sys-font-family-ui: var(
    --zenbu-font-editorial,
    var(--zenbu-ref-font-family-sans)
  );
  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
  --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
  --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger-300);
  --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-500);
  --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-600);
  --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
  --zenbu-sys-color-info-background: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-300);
  --zenbu-sys-color-success-background: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success-300);
  --zenbu-sys-color-warning-background: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning-300);
  --zenbu-sys-color-danger-background: var(--zenbu-ref-color-neutral-800);
  --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger-300);
}

:root[data-zen-theme="playful"] {
  --zenbu-sys-font-family-ui: var(
    --zenbu-font-playful,
    var(--zenbu-ref-font-family-sans)
  );
  --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
  --zenbu-sys-color-surface-page: var(--zenbu-ref-color-rose-100);
  --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-rose-100);
  --zenbu-sys-color-surface-default: var(--zenbu-ref-color-amber-50);
  --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-orange-100);
  --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
  --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-violet-100);
  --zenbu-sys-color-text-primary: var(--zenbu-ref-color-blue-900);
  --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-violet-700);
  --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-blue-600);
  --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-rose-300);
  --zenbu-sys-color-border-default: var(--zenbu-ref-color-violet-500);
  --zenbu-sys-color-border-strong: var(--zenbu-ref-color-violet-700);
  --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-orange-300);
  --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-300);
  --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
  --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-blue-950);
  --zenbu-sys-color-text-link: var(--zenbu-ref-color-blue-600);
  --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-violet-500);
  --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2);
  --zenbu-sys-radius-control: var(--zenbu-ref-radius-4);
  --zenbu-sys-radius-container: var(--zenbu-ref-radius-5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-zen-theme]) {
    --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
    --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
    --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
    --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
    --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
    --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
    --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
    --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
    --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
    --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
    --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
    --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
    --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
    --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
    --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
  }
}

@media (forced-colors: active) {
  :root,
  :root[data-zen-theme],
  :root:not([data-zen-theme]) {
    --zenbu-sys-color-surface-page: Canvas;
    --zenbu-sys-color-surface-canvas: Canvas;
    --zenbu-sys-color-surface-default: Canvas;
    --zenbu-sys-color-surface-subtle: Canvas;
    --zenbu-sys-color-surface-raised: Canvas;
    --zenbu-sys-color-surface-overlay: Canvas;
    --zenbu-sys-color-surface-sunken: Canvas;
    --zenbu-sys-color-text-primary: CanvasText;
    --zenbu-sys-color-text-secondary: CanvasText;
    --zenbu-sys-color-text-tertiary: GrayText;
    --zenbu-sys-color-text-disabled: GrayText;
    --zenbu-sys-color-text-link: LinkText;
    --zenbu-sys-color-border-subtle: CanvasText;
    --zenbu-sys-color-border-default: CanvasText;
    --zenbu-sys-color-border-strong: CanvasText;
    --zenbu-sys-color-action-primary-background: Highlight;
    --zenbu-sys-color-action-primary-background-hover: Highlight;
    --zenbu-sys-color-action-primary-background-pressed: Highlight;
    --zenbu-sys-color-action-primary-foreground: HighlightText;
    --zenbu-sys-color-action-primary-border: Highlight;
    --zenbu-sys-color-focus-inner: Canvas;
    --zenbu-sys-color-focus-outer: CanvasText;
    --zenbu-sys-shadow-subtle: none;
    --zenbu-sys-shadow-raised: none;
    --zenbu-sys-shadow-overlay: none;
    --zenbu-sys-shadow-dialog: none;
  }
}