/* BetterYou+ design tokens — the single source of colour, type and spacing. * * PALETTE: the operator's approved board, 2026-08-28. These supersede the values sampled from * the logo artwork, on the rule that the latest explicit operator approval wins. * * CRIMSON #E53935 · BURGUNDY #7B1E2D · CORAL #FF6B5B · SUNSET #FF9A4D * CHARCOAL #111111 · WARM GRAY #6B6B6B · SOFT IVORY #FAF7F2 * * THEME STATE — the bug this file previously caused. * * Soledad owns day/night through a BODY CLASS (`pclight-mode` / `pcdark-mode`), set by * darkmode.js. The old tokens keyed off `prefers-color-scheme` and `[data-theme]` instead, so * a reader whose OS was dark while Soledad sat in light mode got DARK tokens painted on a * LIGHT theme: pale grey text on ivory, hierarchy gone. That is exactly the washed-out day * mode the operator caught. * * There is now ONE state authority: Soledad's class. Light is the default and the primary * design; dark is a deliberate inverse, not a filter or an inversion. * * MEASURED CONTRAST on soft ivory: charcoal 17.67 · burgundy 9.51 · warm gray 4.99 · * crimson 3.96 (large text and buttons only, never small body) · coral 2.62 and sunset 1.97 * (surfaces and accents only, never text). */ :root { /* ---- ground and ink: LIGHT is the primary design ----------------------- */ --byp-canvas: #FAF7F2; /* soft ivory — the page is NOT white */ --byp-paper: #F3EEE6; /* recessed blocks, boxes, tinted bands */ --byp-card: #FFFFFF; /* raised surfaces sit ABOVE the ivory */ --byp-ink: #111111; /* charcoal. 17.67:1 on ivory */ --byp-ink-2: #3B3733; --byp-meta: #6B6B6B; /* warm gray. 4.99:1 */ --byp-rule: #E3DBCF; --byp-rule-soft: #EFE8DD; /* ---- brand ------------------------------------------------------------- */ --byp-crimson: #E53935; /* Crimson clears 4.5:1 against neither cream nor white. The note above says "buttons only" — but a 14px/700 white label on crimson measures 4.18:1, and the large-text exception starts at 18.66px bold. This is crimson darkened until white text on it measures 4.78:1, and it is the fill for any solid brand button whose label is small. Decorative crimson (rules, icons, borders) is unaffected. */ --byp-crimson-aa: #D6332E; --byp-burgundy: #7B1E2D; --byp-coral: #FF6B5B; --byp-sunset: #FF9A4D; /* ---- semantic (hue-separated from brand on purpose) -------------------- */ --byp-evidence: #12615F; --byp-try: #2C6B3F; --byp-caution: #8A5A06; --byp-myth: #7B1E2D; /* = burgundy: authority correcting an error */ /* ---- section semantics: accents, never page washes --------------------- * Chosen for >=4.5:1 on soft ivory so a label reads as text, and hue-separated * from each other so five sections are distinguishable at chip size. */ --byp-section-relationships: #9B2242; /* burgundy-rose */ --byp-section-family: #A9541B; /* sunset, darkened to carry text */ --byp-section-work-money: #2C6B3F; /* forest */ --byp-section-health: #1B5E8A; /* azure */ --byp-section-yourself: #6A3B8F; /* plum */ --byp-franchise-behavior: #B0433A; /* coral, darkened */ /* ---- roles: the ONLY things components should reference ---------------- */ --byp-authority: var(--byp-burgundy); /* links, section rules, CTAs */ --byp-accent: var(--byp-crimson); /* labels, active nav, energy */ --byp-interactive: var(--byp-crimson); /* buttons, hover, focus */ --byp-on-accent: #FFFFFF; /* text ON a crimson button */ --byp-tint: #FBF1EE; /* faintest brand wash for surfaces */ --byp-tint-strong: #F7E4E0; /* ---- charts: 40 degrees minimum hue separation ------------------------- */ --byp-chart-1: #7B1E2D; --byp-chart-2: #12615F; --byp-chart-3: #8A5A06; --byp-chart-4: #2C6B3F; --byp-chart-5: #413A82; --byp-chart-grid: var(--byp-rule); /* ---- type -------------------------------------------------------------- */ --byp-display: "Fraunces", Georgia, "Times New Roman", serif; --byp-body: "Newsreader", Georgia, serif; --byp-ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --byp-measure: 68ch; --byp-body-size: 19px; --byp-body-size-mob: 16.5px; --byp-body-leading: 1.68; /* ---- spacing and shape ------------------------------------------------- */ --byp-gap: 1.5rem; --byp-radius-card: 12px; --byp-radius-rail: 10px; --byp-radius-box: 0 9px 9px 0; --byp-box-rule: 3px; --byp-hero-max: 52vh; --byp-shadow: 0 1px 2px rgba(17,17,17,.04), 0 10px 28px -14px rgba(17,17,17,.14); } /* DARK — bound to Soledad's own state class, the single authority. Only tokens are redefined; no component rule changes between themes. `:root.pcdark-mode` is not redundant. The appearance boot script stamps the class on BEFORE exists, precisely so the first paint is already correct; if the dark tokens only existed on `body`, everything painted between that stamp and DOMContentLoaded would use LIGHT values — a flash of the wrong theme on exactly the readers this is for. */ :root.pcdark-mode, body.pcdark-mode { /* ---- ground and ink: BetterYou+ Navy, approved 2026-08-28 --------------- * Replaces the warm #15100E. The masthead already used the board's navy, so the page and * the header now form one system instead of meeting at a visible seam. * * This is a HUE change, not a lightness change: navy and the warm dark it replaces differ * by about 5% in relative luminance, so every ink, brand and section value carried over * unchanged and was re-measured rather than assumed. Nothing became illegible. * * ELEVATION IS PRESERVED, not flattened. The warm scheme ran canvas < card < paper by * luminance; so does this one, at comparable steps — a card still lifts off the ground and * a tinted band still separates from both. A single navy slab would have been the easy * change and the wrong one. */ --byp-canvas: #0F172A; /* page ground — Navy */ --byp-card: #16213A; /* raised surfaces */ --byp-paper: #1B2842; /* tinted bands and boxes */ --byp-ink: #F8FAFC; /* cooled to match the ground; 17.06:1 */ --byp-ink-2: #CBD5E1; /* 12.02:1 */ --byp-meta: #94A3B8; /* 6.96:1 */ --byp-rule: #24324B; --byp-rule-soft: #1A2436; /* ---- brand: deliberately still WARM ------------------------------------ * Warm marks on a cool ground is what the approved board shows, and it is what makes the * dark mode look like BetterYou+ rather than like a generic dark theme. Burgundy stays * lifted: the print value measures 1.9:1 here and is invisible. */ --byp-crimson: #FF6A5E; --byp-burgundy: #F0868E; --byp-coral: #FF8478; --byp-sunset: #FFA85F; --byp-evidence: #5FC9C4; --byp-try: #7FCB92; --byp-caution: #E3A93C; --byp-myth: #F0868E; --byp-section-relationships: #F2879F; --byp-section-family: #F0A263; --byp-section-work-money: #7FCB92; --byp-section-health: #74B9E7; --byp-section-yourself: #C39BE8; --byp-franchise-behavior: #FF8478; --byp-authority: var(--byp-coral); --byp-crimson-aa: var(--byp-crimson); /* dark fills carry dark ink: 8.4:1, nothing to fix */ --byp-accent: var(--byp-crimson); --byp-interactive: var(--byp-crimson); --byp-on-accent: #0F172A; /* text ON a brand fill — the ground, not warm black */ /* Brand washes on navy. The first attempt mixed navy with crimson straight and landed on a violet that read cool — the opposite of the brief. These lift the RED channel much harder than the blue, so the panel reads as a warm plum sitting on a cool ground. */ --byp-tint: #1A1F33; --byp-tint-strong: #33213A; --byp-chart-1: #F0868E; --byp-chart-2: #5FC9C4; --byp-chart-3: #E3A93C; --byp-chart-4: #7FCB92; --byp-chart-5: #A9A2E8; --byp-shadow: 0 1px 2px rgba(0,0,0,.55), 0 12px 32px -16px rgba(0,0,0,.85); } /* The BetterYou+ surfaces paint their own ground, so they never inherit the theme's default white and never depend on Soledad's own body background. */ .byp-d, .byp-cat { background: var(--byp-canvas); color: var(--byp-ink); } .byp-num, .byp-stat__n, table td.byp-n { font-variant-numeric: tabular-nums; } .byp-d :focus-visible, .byp-experience :focus-visible { outline: 2px solid var(--byp-interactive); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .byp-d *, .byp-d *::before, .byp-d *::after, .byp-experience *, .byp-experience *::before, .byp-experience *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ================================================================ MASTHEAD * * The dark-mode logo swap that used to live here — `content: url(...)` on `img.penci-logo` — * is gone. The child theme now renders the masthead's logo itself, and the approved boards * use the SAME full-colour mark on both grounds, so there is nothing to swap. Keeping a * `content` override would have quietly replaced the new logo with a retired placeholder in * dark mode. */ /* The body itself was painting BLACK behind everything, which showed through as bands wherever a BetterYou+ surface did not cover the full width. The page ground is the publication's ground, in both states. */ body, body.pclight-mode, body.pcdark-mode { background-color: var(--byp-canvas); } body.pcdark-mode { color: var(--byp-ink); } /* ---------- appearance control (SYSTEM / LIGHT / DARK) ---------- */ .byp-appearance { display: flex; align-items: center; } .byp-appearance__btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--byp-ui); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--byp-meta); background: transparent; border: 1px solid var(--byp-rule); border-radius: 999px; padding: 5px 12px 5px 9px; line-height: 1; transition: border-color .12s, color .12s; } .byp-appearance__btn:hover { border-color: var(--byp-crimson); color: var(--byp-crimson); } .byp-appearance__icon { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; border: 2px solid currentColor; position: relative; } /* SYSTEM: half-filled disc. LIGHT: open disc with rays. DARK: filled crescent. */ .byp-appearance[data-mode="system"] .byp-appearance__icon { background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); } .byp-appearance[data-mode="light"] .byp-appearance__icon { background: transparent; } .byp-appearance[data-mode="light"] .byp-appearance__icon::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; } .byp-appearance[data-mode="dark"] .byp-appearance__icon { background: currentColor; } .byp-appearance[data-mode="dark"] .byp-appearance__icon::after { content: ""; position: absolute; top: -2px; right: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--byp-canvas); } /* ================================================================ SOLEDAD BRIDGE * Soledad drives its own chrome from --pc* variables. Rather than override element by * element, map its variables onto the BetterYou+ tokens once — the nav, header, footer and * every theme component then inherit the brand in both states, from one place. * * ## Specificity, and why the first attempt lost * * Soledad's values are not in a stylesheet. The customizer prints them in an INLINE