:root { --mq-bg: #f6f4f0; --mq-bg-alt: #ecebe6; --mq-surface: #ffffff; --mq-surface-alt: #f1efea; --mq-border: #d8d5cd; --mq-border-strong: #b6b1a6; --mq-text: #2a2823; --mq-text-muted: #6b6759; --mq-text-faint: #97927f; --mq-accent: #a85a1f; --mq-accent-soft: #f0d9bc; --mq-accent-text: #ffffff; --mq-done: #4f7a3d; --mq-done-soft: #d6e7c8; --mq-warn: #b87600; --mq-warn-soft: #f5e3b6; --mq-danger: #a14545; --mq-danger-soft: #f0cfcf; --mq-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05); --mq-shadow-strong: 0 6px 24px rgba(0, 0, 0, 0.18); --mq-radius-sm: 4px; --mq-radius: 8px; --mq-radius-lg: 14px; --mq-space-1: 4px; --mq-space-2: 8px; --mq-space-3: 12px; --mq-space-4: 16px; --mq-space-5: 24px; --mq-space-6: 32px; --mq-space-7: 48px; --mq-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mq-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --mq-fs-xs: 12px; --mq-fs-sm: 13px; --mq-fs-base: 15px; --mq-fs-lg: 18px; --mq-fs-xl: 22px; --mq-fs-xxl: 30px; --mq-nav-height: 52px; --mq-max-content: 920px; } /* Dark theme variables, used both for system preference auto-mode AND when the user has explicitly chosen dark via prefs. The explicit selector wins when set on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mq-bg: #1d1c19; --mq-bg-alt: #26241f; --mq-surface: #2a2823; --mq-surface-alt: #34312a; --mq-border: #3f3c34; --mq-border-strong: #5b5749; --mq-text: #ece8dd; --mq-text-muted: #b3ad9b; --mq-text-faint: #807a68; --mq-accent: #d68645; --mq-accent-soft: #5b3b22; --mq-accent-text: #1d1c19; --mq-done: #8ab373; --mq-done-soft: #3b4a2f; --mq-warn: #e0a64a; --mq-warn-soft: #4d3a17; --mq-danger: #d28282; --mq-danger-soft: #4a2a2a; --mq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4); --mq-shadow-strong: 0 6px 24px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --mq-bg: #1d1c19; --mq-bg-alt: #26241f; --mq-surface: #2a2823; --mq-surface-alt: #34312a; --mq-border: #3f3c34; --mq-border-strong: #5b5749; --mq-text: #ece8dd; --mq-text-muted: #b3ad9b; --mq-text-faint: #807a68; --mq-accent: #d68645; --mq-accent-soft: #5b3b22; --mq-accent-text: #1d1c19; --mq-done: #8ab373; --mq-done-soft: #3b4a2f; --mq-warn: #e0a64a; --mq-warn-soft: #4d3a17; --mq-danger: #d28282; --mq-danger-soft: #4a2a2a; --mq-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4); --mq-shadow-strong: 0 6px 24px rgba(0, 0, 0, 0.6); } /* :root[data-theme="light"] uses the defaults defined above — no overrides needed. */