/* ===================================================================== Nutrition Gnome - brand tokens Direction: apothecary garden almanac. Palette + serif come from the logo (the brief). Signature: stamp/seal motif + sprig dividers. This file is the portable "brand DNA": colors, type, shadows, radii. It has no component rules in it, so it can be dropped into a new project on its own. See components.css for the site's component library, which is built on top of these variables. --------------------------------------------------------------------- DARK THEME --------------------------------------------------------------------- Every color token gets a dark-mode counterpart below. This isn't a mechanical invert: lightness/saturation were re-tuned per swatch so the brand still reads as terracotta/forest/gold, and so text keeps WCAG AA contrast (4.5:1 body, 3:1 large text/UI) against whatever it sits on in each theme. Three color tokens are intentionally NOT symmetric with their obvious sibling because one CSS variable can't serve two contrast-incompatible jobs at once: - --terracotta is the "background-safe" shade: dark/saturated enough that white button text on top of it still hits 4.5:1. It's what .btn--primary / .nav-cta / .tier-ribbon / .cta-band use. - --terracotta-text is the "foreground-safe" shade: bright enough to read as body/label text against the page background. It's what .eyebrow / .seal / nav link hover / post-tag / etc. use. In light mode it equals the original --terracotta value (no visual change); in dark mode it's brightened so it still hits 4.5:1 against the near-black page background. - --cream-fixed-rgb is a constant (never redefined below). A few sections of the site (the philosophy "band", the footer) are *always* a dark forest surface with pale parchment-toned text, regardless of site theme - they don't invert, by design, the same way a printed almanac's ribbon marker doesn't change with the light. Components that live inside those fixed-dark bands use this constant instead of the theme-following --parchment-rgb. Cascade order matters, and there are only two blocks. :root holds the light values plus every token that isn't a color; one higher-specificity block below re-points the colors to dark. Dark is what a page gets unless data-theme="light" is on , which makes dark the default for a new visitor and leaves the light palette written once, reachable only by choosing it. The OS setting is deliberately not consulted: prefers-color-scheme reports light for most visitors, so honoring it would mean most people never see the version of this site worth showing them first. ===================================================================== */ :root { --parchment: #F3ECDB; --parchment-2: #EDE3CC; --cream-card: #FBF6EA; --cream-card-2: #F1E7D2; --ink: #3A2C20; --ink-soft: #6E5B49; --ink-body: #463729; --terracotta: #BD4B33; --terracotta-dark: #9C3B27; --terracotta-text: #BD4B33; --forest: #55683E; --forest-deep: #2E3826; --gold: #C8993B; --gold-dark: #B9882F; --verdigris: #3E7168; --verdigris-text: #356058; --input-bg: #FFFFFF; --line: rgba(58, 44, 32, 0.16); --line-strong: rgba(58, 44, 32, 0.28); /* RGB channel tuples so decorative tints can theme via rgba(var(--x-rgb), a) */ --ink-rgb: 58, 44, 32; --parchment-rgb: 243, 236, 219; --terracotta-rgb: 189, 75, 51; --terracotta-text-rgb: 189, 75, 51; --forest-rgb: 85, 104, 62; --gold-rgb: 200, 153, 59; --verdigris-rgb: 62, 113, 104; /* Constant - see note above. Not redefined in the dark blocks. */ --cream-fixed: #F3ECDB; --cream-fixed-rgb: 243, 236, 219; /* Constant for the same reason, and sampled rather than chosen: it is the rust the 404 illustration is painted in. The button sitting in that picture has to match the art around it, and the art does not invert with the theme, so this one cannot either. Everywhere else on the site wanting a terracotta fill wants --terracotta, which does. */ --terracotta-fixed: #A7472A; --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --display: "Oswald", "Arial Narrow", system-ui, sans-serif; --serif-accent: "Playfair Display", Georgia, "Times New Roman", serif; --shadow-sm: 0 1px 2px rgba(58, 44, 32, 0.06), 0 2px 8px rgba(58, 44, 32, 0.06); --shadow-md: 0 6px 18px rgba(58, 44, 32, 0.10), 0 2px 6px rgba(58, 44, 32, 0.06); --shadow-lg: 0 18px 50px rgba(58, 44, 32, 0.16); --radius: 12px; --radius-lg: 20px; /* Caps the nav, footer, hero shell, and every card grid. Prose is capped separately and much narrower (.container--narrow at 760px, .faq-inner at 800px, and per-block `ch` measures), so raising this widens the layout without pushing text past a readable line length. */ --maxw: 1320px; color-scheme: light; } /* ---------- dark theme: the default, and anything short of a forced light ---------- :not() rather than [data-theme="dark"] so one block covers all three states that should be dark: the attribute absent entirely (JavaScript off, since the inline script in base.html is what sets it), set to "dark" by that script for a visitor who has never chosen, and set to "dark" by the toggle. Specificity (0,2,0) beats :root's (0,1,0); light comes back by this selector simply not matching, which is why the light palette above is written only once. */ :root:not([data-theme="light"]) { --parchment: #211812; --parchment-2: #2A2018; --cream-card: #322619; --cream-card-2: #3B2C1C; --ink: #F1E6D3; --ink-soft: #C7B394; --ink-body: #D8C6A9; --terracotta: #B7472F; --terracotta-dark: #9C3B27; --terracotta-text: #E97256; --forest: #8FB06B; --forest-deep: #2E3826; --gold: #D9AE5C; --gold-dark: #E8C077; --verdigris: #7FBFB2; --verdigris-text: #8FD0C2; --input-bg: #241B12; --line: rgba(241, 230, 211, 0.16); --line-strong: rgba(241, 230, 211, 0.30); --ink-rgb: 241, 230, 211; --parchment-rgb: 33, 24, 18; --terracotta-rgb: 183, 71, 47; --terracotta-text-rgb: 233, 114, 86; --forest-rgb: 143, 176, 107; --gold-rgb: 217, 174, 92; --verdigris-rgb: 127, 191, 178; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); color-scheme: dark; }