:root { color-scheme: light; --ui-canvas: #f3f4f6; --ui-ink: #202b3b; }
html[data-theme="classic"] { --ui-canvas: #f3f4f6; --ui-surface: #fff; --ui-inset: #f2f5fa; --ui-border: #e1e5eb; --ui-ink: #202b3b; --ui-muted: #526174; --ui-accent: #1768c5; --ui-accent-soft: #eaf0fd; }
html[data-theme="ocean"] { --ui-canvas: #edf5f7; --ui-surface: #fbfefe; --ui-inset: #e7f1f4; --ui-border: #cddfe5; --ui-ink: #19343e; --ui-muted: #476573; --ui-accent: #076b83; --ui-accent-soft: #dceff4; }
html[data-theme="forest"] { --ui-canvas: #eff4ee; --ui-surface: #fcfefb; --ui-inset: #e7efe5; --ui-border: #d1dfcd; --ui-ink: #263927; --ui-muted: #50654f; --ui-accent: #32683c; --ui-accent-soft: #e0eddd; }
html[data-theme="midnight"] { color-scheme: dark; --ui-canvas: #101724; --ui-surface: #192334; --ui-inset: #233047; --ui-border: #34445c; --ui-ink: #edf3fc; --ui-muted: #b2bfd3; --ui-accent: #8ebaff; --ui-accent-soft: #293d5e; --ui-danger: #ffacb5; }
html[data-theme="charcoal"] { color-scheme: dark; --ui-canvas: #171819; --ui-surface: #222426; --ui-inset: #303336; --ui-border: #45494d; --ui-ink: #f3f3ef; --ui-muted: #bfc3c5; --ui-accent: #b5d8b6; --ui-accent-soft: #334738; --ui-danger: #ffacb5; }
html, body { margin: 0; min-height: 100%; background: var(--ui-canvas); color: var(--ui-ink); }

/* Independent, theme-aware workspace decoration; surfaces stay opaque. */
html, body, .workspace-shell, .ui-loading {
  background-image: var(--workspace-background-image, none);
  background-size: var(--workspace-background-size, auto);
  background-attachment: fixed;
}
[data-background="default"] { --workspace-background-image: none; --workspace-background-size: auto; }
[data-background="aurora"] {
  --workspace-background-image: radial-gradient(ellipse at 5% 0%, color-mix(in srgb, var(--ui-accent) 38%, transparent), transparent 70%), radial-gradient(ellipse at 95% 100%, color-mix(in srgb, var(--ui-accent) 28%, transparent), transparent 70%);
  --workspace-background-size: 100% 100%;
}
[data-background="dots"] {
  --workspace-background-image: radial-gradient(circle, color-mix(in srgb, var(--ui-ink) 42%, transparent) 1.5px, transparent 1.5px);
  --workspace-background-size: 20px 20px;
}
[data-background="grid"] {
  --workspace-background-image: linear-gradient(color-mix(in srgb, var(--ui-ink) 24%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ui-ink) 24%, transparent) 1px, transparent 1px);
  --workspace-background-size: 32px 32px;
}
[data-background="stripes"] {
  --workspace-background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ui-ink) 15%, transparent) 0 2px, transparent 2px 18px);
  --workspace-background-size: auto;
}
[data-background="diamonds"] {
  --workspace-background-image: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ui-ink) 22%, transparent) 0 1px, transparent 1px 24px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ui-ink) 22%, transparent) 0 1px, transparent 1px 24px);
  --workspace-background-size: auto;
}
[data-background="glow"] {
  --workspace-background-image: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--ui-accent) 45%, transparent), transparent 65%);
  --workspace-background-size: 100% 100%;
}
[data-background="checker"] {
  --workspace-background-image: conic-gradient(color-mix(in srgb, var(--ui-ink) 10%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--ui-ink) 10%, transparent) 0 75%, transparent 0);
  --workspace-background-size: 48px 48px;
}
@media (forced-colors: active) {
  html, body, .workspace-shell, .ui-loading { background-image: none; }
}