.tasks-page--detail-cozy,
.tasks-page--editor {
  --task-font-display: var(--site-font-display, var(--cl-font-display, Georgia, serif));
  --task-font-ui: var(--site-font-body, var(--cl-font-body, "Segoe UI", sans-serif));
  --task-font-mono: var(--site-font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
  --task-canvas: #f5f8fd;
  --task-paper: #fffdf8;
  --task-paper-soft: #fbfaf6;
  --task-ink: #102f57;
  --task-copy: #2d4f78;
  --task-muted: #7188a6;
  --task-rule: #d7e1ee;
  --task-rule-strong: #c6d4e5;
  --task-blue-soft: var(--site-accent-soft);
  --task-primary: var(--site-accent);
  --task-primary-hover: var(--site-accent-hover);
  --task-gold: #d79e2d;
  --task-green: #2eab9a;
  --task-danger: #b54a58;
  --task-link: var(--site-accent);
  --task-link-hover: var(--site-accent-hover);
  --task-link-active: var(--site-accent-hover);
  --task-note: var(--site-accent);
  --task-icon-muted: #a5b5c9;
  --task-easy: #34a68f;
  --task-hard: #d96767;
  --task-success: #24856c;
  --task-error: #b44856;
  --task-status: var(--site-accent);
  --task-code-bg: #082a50;
  --task-code-text: #eff5ff;
  --task-code-gutter: #8398b7;
  --task-window-red: #e57b7b;
  --task-window-yellow: #e5b358;
  --task-window-green: #57b8a8;
  --task-button-start: var(--site-accent);
  --task-button-end: var(--site-accent-hover);
  --task-button-hover-start: var(--site-accent-hover);
  --task-button-hover-end: var(--site-accent-hover);
  --task-button-dark: var(--site-accent-hover);
  --task-white: var(--site-on-accent);
  --task-page-glow-a: color-mix(in srgb, var(--site-accent) 9%, transparent);
  --task-page-glow-b: color-mix(in srgb, var(--site-accent-hover) 7%, transparent);
  --task-hero-glow: color-mix(in srgb, var(--site-accent-soft) 68%, transparent);
  --task-paper-line: rgba(198, 211, 226, .22);
  --task-paper-line-soft: rgba(198, 211, 226, .18);
  --task-grid-line: rgba(128, 156, 194, .11);
  --task-code-rule: rgba(185, 205, 232, .13);
  --task-focus-ring: var(--site-accent-focus);
  --task-input-focus-ring: color-mix(in srgb, var(--site-accent-focus) 42%, transparent);
  --task-shadow: 0 14px 34px rgba(46, 72, 111, .08);
  --task-control-shadow: 0 4px 14px rgba(48, 74, 111, .035);
  --task-button-shadow: 0 7px 16px color-mix(in srgb, var(--site-accent) 18%, transparent);
}

[data-theme="dark"] .tasks-page--detail-cozy,
[data-theme="dark"] .tasks-page--editor {
  --task-canvas: #111a29;
  --task-paper: #182438;
  --task-paper-soft: #152033;
  --task-ink: #edf3ff;
  --task-copy: #c6d4e8;
  --task-muted: #9bacc4;
  --task-rule: #33455f;
  --task-rule-strong: #435873;
  --task-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.task-scratchpad--compact .task-scratchpad__header h2,
.task-editor-hero__note span,
.task-editor-live-preview__copy > span,
.task-editor-repeater > [data-repeater]:empty::before {
  font-family: var(--task-font-display);
  font-style: italic;
  font-weight: 400;
}