/* * ZayedMD design tokens — light + dark mode CSS variables. * * Source-of-truth: docs/design/canvas-source/01-theme.jsx (PALETTE, ACCENTS, TYPE). * Locked decisions: docs/design/DECISIONS.md (Terracotta accent, light default, * 640px reading column, dark mode is a token swap on the same templates). * * Light mode is the default load. Dark mode activates when * is set (boot script in functions.php reads * localStorage('zmd-theme') before first paint). */ :root { /* Light-mode palette (default). */ --paper: #FBFAF6; --paper-subtle: #F4F0E7; --paper-deep: #E9E3D4; --ink: #0B1B2B; --ink-soft: #1F2D3D; --muted: #6E6A60; --muted-soft: #9A9588; --rule: #E0DACA; --rule-strong: #C9C2B0; /* Accent — Terracotta locked per DECISIONS.md. Brass / Antique Tan / Oxblood are preserved as alternates in docs/design/canvas-source/01-theme.jsx but Terracotta is production. */ --accent: #B85C3A; /* Type stack. Web fonts load via Google Fonts in functions.php; the fallback chain renders immediately under display=swap. */ --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Iowan Old Style", Cambria, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --arabic: "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif; --mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Reading-column width. 640px on desktop; mobile templates override to 100% with 24px gutters in Phase 7. */ --col: 640px; } [data-theme="dark"] { /* Dark-mode palette. Trust-core stays deep navy in BOTH modes — in light it is the foreground/ink; in dark it is the background that pulls the eye into the reading column. */ --paper: #0B1B2B; --paper-subtle: #102639; --paper-deep: #163049; --ink: #EDE6D6; --ink-soft: #C9C2B0; --muted: #8E9AA8; --muted-soft: #5C6B7C; --rule: #1F324A; --rule-strong: #2A4060; --accent: #D67A57; }