/* UI semantics are theme-dependent. Paper/canvas tokens describe authored content,
   intentionally independent of the surrounding application theme and print exports. */
:root {
  --status-overdue: var(--ui-bad-fg);
  --status-pending: var(--ui-medium-fg);
  --status-completed: var(--ui-good-fg);
  --status-neutral: var(--text-secondary);
  --calendar-today-bg: var(--accent-sand);
  --calendar-today-fg: var(--on-accent);
  --focus-ring: var(--accent-sand);
  --field-error: var(--ui-bad-fg);
  --danger-bg: var(--ui-bad-fg);
  --on-danger: var(--bg-card);
  --ui-panel-bg: var(--bg-card);
  --ui-panel-radius: 8px;
  --ui-control-height: 36px;
  --ui-gap: 12px;
  --ui-section-gap: 20px;
  --ui-label-size: 12px;
  --ui-font-page: 700 26px/1.2 var(--font-display);
  --ui-font-section: 700 20px/1.25 var(--font-display);
  --ui-font-title: 600 14px/1.5 var(--font-text);
  --ui-font-body: 400 14px/1.5 var(--font-text);
  --ui-font-control: 400 13px/1.5 var(--font-text);
  --ui-font-label: 600 12px/1.5 var(--font-text);
  --ui-font-meta: 400 12px/1.5 var(--font-text);
  --ui-font-data: 500 12px/1.5 var(--font-mono);
  --ui-font-stat: 700 32px/1.15 var(--font-display);
  --ui-good-fg: color-mix(in srgb, var(--good) 60%, var(--text));
  --ui-medium-fg: color-mix(in srgb, var(--medium) 60%, var(--text));
  --ui-bad-fg: color-mix(in srgb, var(--bad) 60%, var(--text));
  --ui-info-fg: color-mix(in srgb, var(--info) 60%, var(--text));
  --ui-purple-fg: color-mix(in srgb, var(--purple) 60%, var(--text));
  --ui-neutral-fg: var(--text);
  --document-paper: #ffffff;
  --document-ink: #111827;
  --document-muted: #475569;
  --document-desk: #d9dde3;
  --document-page-break: #cfd4dc;
  --document-rule: #64748b;
  --document-border: #94a3b8;
  --document-code-bg: #f3f4f6;
  --document-heading-bg: #f1f5f9;
  --document-link: #0563c1;
  --document-selection: #b3d4fc;
  --canvas-bg: #f8f9fb;
  --canvas-ink: #334155;
  --canvas-muted: #64748b;
  --canvas-focus: #2563eb;
  --canvas-guide: #a21caf;
  --canvas-success: #15803d;
  --canvas-handle: #ffffff;
  --canvas-grid-minor: rgba(15,23,42,.07);
  --canvas-grid-major: rgba(15,23,42,.13);
  --document-shadow: 0 2px 14px rgba(15, 23, 42, .28);
  --on-scrim: #ffffff;
}
:root:is([data-theme="night"],[data-theme="github"]) { --on-accent: var(--bg-inset); }
@media (max-width: 720px) {
  :root {
    --ui-font-page: 700 24px/1.2 var(--font-display);
    --ui-font-stat: 700 28px/1.15 var(--font-display);
  }
}