/** * Site-wide theme: colour system, typography, and styling for every control * currently rendered by src/view/*.tsx (Stage 10 — see AGENTS.md/the stage * brief; DESIGN.md §5.1 for the dark/light contract, §9 for the palette and * texture direction). * * --------------------------------------------------------------------------- * Cascade contract (DESIGN.md §5.1) — read this before touching the tokens. * --------------------------------------------------------------------------- * Three rules define colour, in source order: * * 1. `:root { ... }` (light defaults) * 2. `@media (prefers-color-scheme: dark) { * :root:not([data-theme="light"]) { ... } * }` (system dark) * 3. `:root[data-theme="dark"] { ... }` (explicit dark) * * Specificity: `:root` alone is (0,1,0). `:root[data-theme="dark"]` is * (0,2,0) (one pseudo-class + one attribute selector). Rule 2's selector, * `:root:not([data-theme="light"])`, is *also* (0,2,0) — `:not()`'s * specificity is that of its argument, so it contributes the same one * attribute-selector's worth as rule 3 plus `:root` itself. Equal specificity * means source order decides ties, which is why rule 3 is written *last*: * it wins over rule 2 whenever both match the same element. * * Working through the four states: * - no `data-theme`, system light -> only rule 1 matches. Light. * - no `data-theme`, system dark -> rules 1 and 2 match; 2 overrides. Dark. * - `data-theme="light"`, any system -> rule 2's `:not([data-theme="light"])` * guard excludes it even under system dark; only rule 1 matches. Light — * explicit choice beats system preference. * - `data-theme="dark"`, any system -> rule 3 always matches (nothing * excludes it), and being last-in-source among equal-specificity rules, * it wins even when rule 2 also happens to match (system dark too). * Dark — explicit choice beats system preference in the other direction. * * So: system preference works with zero JS (rule 2 alone), and an explicit * `data-theme` (set by the tiny inline script in , or by the toggle * button's click handler — see src/view/SiteChrome.tsx / * src/client/theme-toggle.ts) wins in both directions. Verified above by * specificity + order, not assumed. */ /* ---------------------------------------------------------------------- */ /* 1. Colour tokens */ /* ---------------------------------------------------------------------- */ :root { /* Light -- "paper" */ --color-ground: #faf7f2; --color-surface: #fffdf8; --color-text: #2e2724; --color-text-muted: #6b5d54; --color-border: #ddd0bd; --color-shadow: rgba(120, 78, 48, 0.18); --color-accent: #b4522e; --color-accent-hover: #963f22; --color-accent-contrast: #fff8f4; --color-secondary: #6f7d45; --color-secondary-hover: #5c6938; --color-secondary-contrast: #fbfbf5; /* Group-accent triad -- paprika / olive / plum, all warm. Low saturation for backgrounds, full saturation for rules/borders (DESIGN.md §9). */ --accent-1: #b4522e; --accent-1-bg: #f3e2d8; --accent-2: #74782f; --accent-2-bg: #eef0dd; --accent-3: #7c3f63; --accent-3-bg: #f2e2ea; --font-serif: ui-serif, Georgia, "Times New Roman", serif; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 10px; --transition-fast: 150ms ease; } /* System dark (rule 2 -- see the contract note above). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-ground: #1c1917; --color-surface: #262220; --color-text: #ede8e2; --color-text-muted: #b8aba0; --color-border: #4a4038; --color-shadow: transparent; /* shadows don't read on dark grounds -- use borders instead */ --color-accent: #e2764f; --color-accent-hover: #ef8b66; --color-accent-contrast: #241109; --color-secondary: #a3b378; --color-secondary-hover: #b3c28c; --color-secondary-contrast: #1e2413; --accent-1: #e2764f; --accent-1-bg: #3b2a20; --accent-2: #b3bd6e; --accent-2-bg: #34331d; --accent-3: #c884a8; --accent-3-bg: #3a2732; } } /* Explicit dark (rule 3 -- last in source, wins ties per the contract note). */ :root[data-theme="dark"] { --color-ground: #1c1917; --color-surface: #262220; --color-text: #ede8e2; --color-text-muted: #b8aba0; --color-border: #4a4038; --color-shadow: transparent; --color-accent: #e2764f; --color-accent-hover: #ef8b66; --color-accent-contrast: #241109; --color-secondary: #a3b378; --color-secondary-hover: #b3c28c; --color-secondary-contrast: #1e2413; --accent-1: #e2764f; --accent-1-bg: #3b2a20; --accent-2: #b3bd6e; --accent-2-bg: #34331d; --accent-3: #c884a8; --accent-3-bg: #3a2732; } /* ---------------------------------------------------------------------- */ /* 2. Reset & base */ /* ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-ground); color: var(--color-text); font-family: var(--font-sans); line-height: 1.55; } main, .page { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 3rem; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; color: var(--color-text); } a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: var(--color-accent-hover); } button { font-family: inherit; cursor: pointer; } /* Screen-reader-only accessible labels (theme toggle, etc.). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------- */ /* 3. Site bar & theme toggle (shared across home / tag / recipe pages) */ /* ---------------------------------------------------------------------- */ .site-bar { display: flex; align-items: center; justify-content: space-between; max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem; } .site-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; color: var(--color-text); text-decoration: none; } .site-title:hover { color: var(--color-accent); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 1.15rem; line-height: 1; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .theme-toggle:hover { border-color: var(--color-accent); } .theme-toggle[aria-pressed="true"] { background: var(--color-accent); } /* ---------------------------------------------------------------------- */ /* 4. Recipe header, flags, tags */ /* ---------------------------------------------------------------------- */ header { position: relative; background: var(--color-surface); border-radius: var(--radius); box-shadow: 0 6px 18px -6px var(--color-shadow); border: 1px solid transparent; padding: 1.5rem 1.5rem 1.25rem; margin: 0 auto 1.5rem; max-width: 46rem; } .reset-page-button { position: absolute; top: 0.9rem; right: 0.9rem; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.8rem; transition: background-color var(--transition-fast), color var(--transition-fast); } .reset-page-button:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } :root[data-theme="dark"] header { border-color: var(--color-border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header { border-color: var(--color-border); } } header h1 { font-size: 1.85rem; margin: 0.6rem 0 0.35rem; } header .recipe-time { margin: 0 0 0.35rem; color: var(--color-accent); font-weight: 600; } .recipe-summary { max-width: 46rem; margin: -0.75rem auto 1.5rem; color: var(--color-text-muted); } .flag-badge { border-radius: 999px; border: 1px solid var(--color-border); object-fit: cover; } .flag-icon { border-radius: 50%; vertical-align: -2px; margin-right: 0.3em; } ul.tags, ul.categories { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0.75rem 0 0; padding: 0; } ul.tags li a, ul.categories li a { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-ground); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.85rem; font-family: var(--font-sans); text-decoration: none; transition: border-color var(--transition-fast), color var(--transition-fast); } ul.tags li a:hover, ul.categories li a:hover { color: var(--color-accent); border-color: var(--color-accent); } /* ---------------------------------------------------------------------- */ /* 5. Servings widget */ /* ---------------------------------------------------------------------- */ .servings-widget { display: flex; align-items: center; gap: 1rem; max-width: 46rem; margin: 0 auto 1.25rem; padding: 0 0.25rem; } .servings-widget button { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: none; background: var(--color-accent); color: var(--color-accent-contrast); font-size: 1.3rem; line-height: 1; transition: background-color var(--transition-fast); } .servings-widget button:hover { background: var(--color-accent-hover); } .servings-value { min-width: 8rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; } /* ---------------------------------------------------------------------- */ /* 6. Unit toggle */ /* ---------------------------------------------------------------------- */ .unit-toggle { display: inline-flex; gap: 0.25rem; max-width: 46rem; margin: 0 auto 1.25rem; padding: 0.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; } .unit-toggle button { border: none; background: transparent; color: var(--color-text-muted); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem; text-transform: capitalize; transition: background-color var(--transition-fast), color var(--transition-fast); } .unit-toggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-contrast); } /* ---------------------------------------------------------------------- */ /* 7. Substitution badges */ /* ---------------------------------------------------------------------- */ .substitutions { max-width: 46rem; margin: 0 auto 1.25rem; } .substitution-badge { border: 1px solid var(--color-secondary); background: transparent; color: var(--color-secondary); padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.9rem; margin: 0 0.4rem 0.4rem 0; transition: background-color var(--transition-fast), color var(--transition-fast); } .substitution-badge::before { content: ""; } .substitution-badge[aria-pressed="true"] { background: var(--color-secondary); color: var(--color-secondary-contrast); } .substitution-badge[aria-pressed="true"]::before { content: "✓ "; } /* Substituted ingredient rows (ingredients list + mise-en-place list). */ li.substituted { background: var(--color-secondary); background: color-mix(in srgb, var(--color-secondary) 18%, transparent); border-radius: 6px; } /* ---------------------------------------------------------------------- */ /* 8. Ingredients list */ /* ---------------------------------------------------------------------- */ #ingredients-list, .ingredient-list { max-width: 46rem; } .ingredient-list { list-style: none; margin: 0 auto; padding: 0; font-variant-numeric: tabular-nums; } .ingredient-list li { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); font-family: var(--font-serif); } .ingredient-list li:last-child { border-bottom: none; } /* ---------------------------------------------------------------------- */ /* 9. Steps-view switcher */ /* ---------------------------------------------------------------------- */ .steps-view-switcher { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 auto 1rem; max-width: 46rem; } .steps-view-switcher button { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.9rem; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .steps-view-switcher button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); } /* ---------------------------------------------------------------------- */ /* 10. Group-accent tokens (data-accent="accent-1|2|3") */ /* ---------------------------------------------------------------------- */ [data-accent="accent-1"] { --accent-color: var(--accent-1); --accent-bg: var(--accent-1-bg); } [data-accent="accent-2"] { --accent-color: var(--accent-2); --accent-bg: var(--accent-2-bg); } [data-accent="accent-3"] { --accent-color: var(--accent-3); --accent-bg: var(--accent-3-bg); } /* ---------------------------------------------------------------------- */ /* 11. Steps views -- Grouped / Timeline / Mise en place / Kitchen mode */ /* ---------------------------------------------------------------------- */ .steps-grouped, .steps-timeline, .steps-mise, .steps-kitchen-checklist, .steps-kitchen-single { max-width: 46rem; margin: 0 auto; } /* Trims the browser's default