:root {
  --color-bg: #f4f4f5;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-text: #18181b;
  --color-muted: #60646c;
  --color-border: #d4d4d8;
  --color-border-muted: rgba(0, 0, 0, 0.12);
  --color-link: #1d4ed8;
  --color-primary: #1d4ed8;
  --color-danger: #b42318;
  --color-warning: #a15c07;
  --color-success: #067647;
  --color-focus: #2563eb;
  --color-log-bg: #f8fafc;
  --color-log-text: #18181b;

  --space-base: 0.25rem;
  --space-xs: var(--space-base);
  --space-s: calc(var(--space-base) * 2);
  --space-m: calc(var(--space-base) * 3);
  --space-l: calc(var(--space-base) * 4);
  --space-xl: calc(var(--space-base) * 6);
  --space-2xl: calc(var(--space-base) * 8);

  --radius-base: 0.25rem;
  --radius-s: var(--radius-base);
  --radius-m: calc(var(--radius-base) * 2);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --line: 1px solid var(--color-border);
  --line-soft: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);

  /* Filled buttons stay saturated in both themes — white text needs a deep
     background to read. Don't redefine these in the dark-mode block. */
  --color-button-primary: #1d4ed8;
  --color-button-danger: #b42318;

  /* Editor (CodeMirror 6) palette — light. */
  --syntax-keyword: #cc4488;
  --syntax-string:  #2f8b3a;
  --syntax-comment: #888;
  --syntax-number:  #884488;
  --cm-bg: var(--color-surface);
  --cm-fg: var(--color-text);
  --cm-selection: rgba(60, 130, 220, 0.2);
  --cm-keyword: var(--syntax-keyword);
  --cm-string:  var(--syntax-string);
  --cm-comment: var(--syntax-comment);
  --cm-number:  var(--syntax-number);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #18181b;
    --color-surface: #27272a;
    --color-surface-muted: #1f1f23;
    --color-text: #f4f4f5;
    --color-muted: #a1a1aa;
    --color-border: #3f3f46;
    --color-border-muted: rgba(255, 255, 255, 0.12);
    --color-link: #93c5fd;
    --color-primary: #93c5fd;
    --color-danger: #fca5a5;
    --color-warning: #fcd34d;
    --color-success: #86efac;
    --color-focus: #bfdbfe;
    --color-log-bg: #111827;
    --color-log-text: #e5e7eb;

    /* Editor (CodeMirror 6) palette — dark overrides. --cm-bg / --cm-fg
       cascade automatically through --color-surface / --color-text. */
    --syntax-keyword: #ff80c0;
    --syntax-string:  #87d96a;
    --syntax-comment: #888;
    --syntax-number:  #c890ff;
    --cm-selection: rgba(120, 170, 255, 0.25);
  }
}

a {
  color: var(--color-link);
}