/* * Lifegen design tokens — the semantic layer. * * theme.json says WHAT COLOURS EXIST. This file says WHAT THEY ARE FOR. * Components in style.css may only reference the --lg-* roles below; * they must never name a colour directly. * * TWO MODES * --------- * :root -> Clinical (light), the default. * :root[data-theme="dark"] -> Midnight (dark). * * LIGHT is the default: a visitor with no stored preference gets Clinical, * regardless of their OS setting. `prefers-color-scheme` is deliberately * *not* consulted -- flip that only as a considered decision. * * The mode is a `data-theme` attribute on , written before first * paint by the inline script in functions.php, and remembered in * localStorage. Nothing is rendered per-visitor server-side, so LiteSpeed * page caching is unaffected. * * The light values live in theme.json, so the block editor offers the * colours the site actually uses; dark is the override layer below. * Every role in :root must also be set in the dark block -- * scripts/verify-design-tokens.sh enforces that, so a token cannot be * added to one mode and silently forgotten in the other. * * See the theme README for the recipes. */ :root { /* ---- ground ---- */ --lg-ground: var(--wp--preset--color--ground); /* The utility bar's dark navy. Named "deep" from when the palette was dark; it is now the one anchor colour on a light page. */ --lg-ground-deep: var(--wp--preset--color--ground-deep); --lg-band: var(--wp--preset--color--band); --lg-card: var(--wp--preset--color--card); /* Content cards and FAQ panels, as opposed to product cards. A separate role because the card surface and the page ground are both white, so content panels would otherwise be defined by nothing but their 1px border. Resolves to the band grey — the system has one grey, not two. */ --lg-card-soft: var(--wp--preset--color--band); /* ---- ink ---- */ --lg-ink: var(--wp--preset--color--ink); /* 16.5:1 on white */ --lg-muted: var(--wp--preset--color--muted); /* 5.3:1 on white */ /* ---- accent ---- */ --lg-accent: var(--wp--preset--color--accent); /* 5.3:1 on white */ /* White on the accent blue is 5.3:1. */ --lg-on-accent: var(--wp--preset--color--paper); /* ---- page-header title ---- Its own role because it does not track --lg-ink: it is the deep brand navy sampled from the bottle artwork, 13.8:1 on the band. */ --lg-page-title: var(--wp--preset--color--brand-navy); /* ---- structure ---- */ --lg-rule: var(--wp--preset--color--rule); --lg-rule-strong: var(--wp--preset--color--rule-strong); /* ---- chrome surfaces ---- Separate roles from --lg-ground so the header and footer bands can be re-tinted without touching the page ground. */ --lg-chrome: var(--wp--preset--color--ground); --lg-chrome-foot: var(--wp--preset--color--band); /* ---- form fields ---- A recessed input surface. Its own role rather than sharing --lg-ground-deep, which is the dark anchor band: sharing one token is what once made every select and text input a dark box. */ --lg-field: var(--wp--preset--color--paper); /* ---- product imagery ---- Product photos are shot on a white sweep, so a white card would let them dissolve into it; the well is a faint tint that defines the image area instead. Phase 2 (transparent shots) changes this to `transparent`. */ --lg-photo-well: var(--wp--preset--color--band); /* ---- status ---- */ --lg-danger: var(--wp--preset--color--danger); --lg-success: var(--wp--preset--color--success); --lg-warning: var(--wp--preset--color--warning); /* ---- elevation ---- Hairline rules do the separating. Shadow only where something genuinely floats above the page (dropdowns, modals). No glows. */ --lg-shadow-float: 0 12px 30px rgb(11 32 51 / 0.16); /* ---- type ---- */ --lg-font: var(--wp--preset--font-family--sans); --lg-font-mono: var(--wp--preset--font-family--mono); /* Display face, used only for the page-header band so it stays distinct from every other heading on the page. */ --lg-font-display: var(--wp--preset--font-family--display); --lg-weight-body: 400; --lg-weight-strong: 600; --lg-weight-head: 680; /* ---- shape ---- Square-ish corners read institutional. No pills anywhere. */ --lg-radius: 3px; --lg-radius-card: 4px; /* ---- layout ---- */ --lg-container: 1100px; --lg-gutter: var(--wp--preset--spacing--50); /* ---- browser UI (scrollbars, form controls) ---- */ color-scheme: light; } /* ============================================================ MIDNIGHT (dark) Only colour roles change. Type, shape, spacing and layout are shared, which is what keeps the two modes one design rather than two sites. These are literals rather than presets because theme.json now carries the light palette -- it is the one the block editor offers, and the one a visitor sees by default. ============================================================ */ :root[data-theme="dark"] { --lg-ground: #060E18; --lg-ground-deep: #030910; --lg-band: #0A1523; --lg-card: #0C1A2A; /* The raised navy already separates from the ground here, so the soft surface and the card surface are the same value. */ --lg-card-soft: #0C1A2A; --lg-ink: #E4EDF5; --lg-muted: #8FA6BA; --lg-accent: #5FB0E8; /* Inverted from light: white on this blue is 2.7:1 and fails, so the primary button is dark text on light blue. */ --lg-on-accent: #060E18; /* The brand navy would be about 1.5:1 on the dark band, so the page title falls back to the normal ink. */ --lg-page-title: #E4EDF5; --lg-rule: #16283C; --lg-rule-strong: #254059; --lg-chrome: #030910; --lg-chrome-foot: #030910; --lg-field: #030910; /* Product shots are on a white sweep, so on a dark card the well is a deliberate white panel rather than a bright square left floating. */ --lg-photo-well: #FFFFFF; --lg-danger: #FF8B8B; --lg-success: #5FD3A0; --lg-warning: #F0B857; --lg-shadow-float: 0 12px 34px rgb(0 0 0 / 0.5); color-scheme: dark; } /* NOTE ON THE `:root:not([data-theme="dark"]) ` PREFIX BELOW Two jobs in one selector. It scopes these blocks to light mode: in dark mode the utility bar just uses the ordinary dark roles, and the calculator block is left on its own dark palette, which is what it ships. It also carries the specificity they need. These blocks re-point variables that their own author *also* sets on the same class, and at equal specificity source order decides -- the calculator block ships an inline