/* ===================================================================== Paras Interiors — DESIGN SYSTEM TOKENS (single source of truth) --------------------------------------------------------------------- Two tiers: TIER 1 — the raw palette. Named pigments. These never flip with the theme; components must not paint surfaces with them directly. ink #191B19 deep charcoal ink-soft #4A544F muted green-gray paper #FAF8F4 warm off-white ivory #F4F1EC gallery-wall white accent #C29A5B champagne bronze accent-dk #A47E42 antique bronze sepia #7A5C42 drafting sepia wa #25D366 WhatsApp brand — never decorative TIER 2 — semantic roles, defined once with light-dark(). THIS is what every stylesheet consumes. The role says what the color is FOR; the light/dark pair says what it looks like in each theme. Retune the whole site — or its dark mode — by editing this file only. THEME SELECTION :root carries `color-scheme: light dark`, so with no stored choice the site follows the OS. js/theme-toggle.js stamps html[data-pi-theme="light|dark"] (persisted in localStorage) which forces color-scheme and thereby resolves every light-dark() token. The boot snippet in functions.php applies the stored choice before first paint, and also mirrors the RESOLVED theme onto html.pi-dark — dark-compat.css uses that class to override legacy hardcoded colors that predate the token system. Legacy exceptions that stay raw ON PURPOSE: - Google brand colors (the "G", stars) — brand marks don't theme. - rgba(ink) scrims laid over photographs — a photo needs the same scrim in both themes. ===================================================================== */ :root{ /* DARK is the site default (js/theme-toggle.js + the functions.php boot snippet keep it in sync). light-dark() therefore resolves to the DARK value unless the visitor explicitly chooses light (data-pi-theme="light" forces color-scheme:light below). */ color-scheme: dark; /* ---- tier 1: raw palette ------------------------------------------ */ --pi-ink: #191B19; --pi-ink-soft: #4A544F; --pi-paper: #FAF8F4; --pi-ivory: #F4F1EC; --pi-sepia: #7A5C42; --pi-wa: #25D366; --pi-wa-dk: #1da851; /* WhatsApp green as TEXT on a light surface. The brand green (#25D366) and its dark step (#1da851) are for fills, borders and the glyph — as label text on white #1da851 measures 3.1:1, under the 4.5:1 AA floor (axe: "Background and foreground colors do not have a sufficient contrast ratio"). The button sits on the CTA band (--pi-surface-2 #F4F1EC), NOT on white — measured against the band #177f3f lands on exactly 4.50 and still failed on rounding, so this is #146e37: 5.62:1 on the band, 6.33:1 on white. Real headroom, same WhatsApp hue. In dark mode the brand green on the dark canvas already passes, so it is used unchanged. */ --pi-wa-txt: light-dark(#146e37, #25D366); /* ---- tier 2: semantic roles --------------------------------------- */ /* canvases — warm paper, never pure #FFF (the loudest "cheap" tell). The dark ramp is warm-neutral (a hint of bronze), not flat green-grey, and surfaces sit LIGHTER than the canvas in both modes (real elevation). */ --pi-bg: light-dark(#FAF8F4, #15120E); /* page canvas */ --pi-bg-paper: light-dark(#F4EFE6, #1A1611); /* warm page tint */ --pi-surface: light-dark(#FFFFFF, #23201A); /* cards, panels, modals */ --pi-surface-2: light-dark(#ECE5D8, #1C1913); /* soft stone bands */ --pi-panel-ink: light-dark(#191B19, #211D16); /* the dark editorial bands (hero, why, market) — dark in BOTH themes. In dark the panel sits LIGHTER than the canvas (elevation); the first cut (#0F110F) was darker than the page and every band melted into it — "one big page". */ /* text */ --pi-text: light-dark(#191B19, #ECEAE3); /* headings, strong copy */ --pi-text-soft: light-dark(#4A544F, #ADA89D); /* body, secondary (warm) */ --pi-sepia-txt: light-dark(#7A5C42, #C9B9A4); /* sepia used AS text */ /* on the ink panels (dark in both themes) — no flip needed */ --pi-ondark: rgba(244,241,236,.88); --pi-ondark-soft: rgba(244,241,236,.66); --pi-ondark-faint: rgba(244,241,236,.38); --pi-on-accent: #FFFFFF; /* label on a bronze fill */ /* accent (brighter in dark for contrast on deep surfaces) */ --pi-accent: light-dark(#C29A5B, #D3AC6E); --pi-accent-dk: light-dark(#A47E42, #BC9457); --pi-accent-soft: light-dark(rgba(194,154,91,.45), rgba(211,172,110,.5)); --pi-accent-faint: light-dark(rgba(194,154,91,.16), rgba(211,172,110,.2)); /* hairlines — the sepia alphas, snapped to four steps. Premium = finer, lower-contrast rules; the two lightest steps are quieted here. */ --pi-line-faint: light-dark(rgba(122,92,66,.14), rgba(216,207,193,.10)); --pi-line: light-dark(rgba(122,92,66,.22), rgba(216,207,193,.16)); --pi-line-mid: light-dark(rgba(122,92,66,.4), rgba(216,207,193,.3)); --pi-line-strong: light-dark(rgba(122,92,66,.55), rgba(216,207,193,.42)); /* neutral (ink-hued) edges — for borders that must NOT warm to sepia: chips, quote-nav buttons, the rail/dock pills */ --pi-edge-faint: light-dark(rgba(25,27,25,.13), rgba(236,234,227,.15)); --pi-edge: light-dark(rgba(25,27,25,.27), rgba(236,234,227,.28)); --pi-edge-strong: light-dark(rgba(25,27,25,.55), rgba(236,234,227,.45)); /* sepia as SECONDARY text (TOC numerals, the footer credit) */ --pi-sepia-txt-soft: light-dark(rgba(122,92,66,.7), rgba(201,185,164,.68)); /* chrome */ --pi-header-bg: light-dark(#FFFFFF, #161A16); --pi-header-line: light-dark(#E7E1D7, #262019); /* warm hairline, no cool grey */ /* depth + status — soft, low, WARM shadows (premium: never a hard grey box) */ --pi-shadow: light-dark(rgba(43,34,24,.10), rgba(0,0,0,.5)); --pi-shadow-lg: light-dark(rgba(43,34,24,.20), rgba(0,0,0,.62)); --pi-err: light-dark(#C0492B, #E06A4A); --pi-err-dk: light-dark(#A13A20, #EE8265); --pi-err-faint: light-dark(rgba(192,73,43,.07), rgba(224,106,74,.14)); --pi-ok: light-dark(#3F7D5A, #7FBF9C); --pi-ok-dk: light-dark(#2C5A40, #9CCFB4); --pi-ok-faint: light-dark(rgba(63,125,90,.08), rgba(127,191,156,.14)); /* one section rhythm for the whole site (folds, pa sections, CTA bands) */ --pi-sec-pad: clamp(76px, 6.6vw, 132px); /* ---- premium motion / layout / material tokens --------------------------- Consumed by typography, motion, area-pages, hero and imagery steps. Kept here so one edit retunes the whole feel. Unused tokens are inert. */ /* motion — slow, eased, "expensive". --pi-ease for micro-UI; --pi-ease-lux for the watched moves (reveals, image zoom, button fill). */ --pi-ease: cubic-bezier(.22,.61,.36,1); --pi-ease-lux: cubic-bezier(.16,1,.3,1); --pi-dur-fast: .22s; --pi-dur-reveal: .7s; --pi-dur-zoom: 1.2s; --pi-stagger: .09s; /* layout */ --pi-measure: 66ch; /* body reading measure — never full-width */ --pi-radius: 2px; /* one refined card/image radius (pill tags exempt) */ /* photography — one grade so mixed-source client photos read as one shoot */ --pi-photo-grade: saturate(.90) contrast(1.03) sepia(.05); /* large bronze fills sit slightly quieter than the bright rule/dot accent */ --pi-accent-fill: light-dark(#C29A5B, #CBA467); /* ---- first-paint layout constants (CLS) --------------------------------- js/wide-container.js measures the real header height and container width and republishes both. Until it runs, CSS uses these. They MUST match reality or the page visibly jumps when the JS lands — the trace caught exactly that: the content box moved y:100→83 (a stale 100px header fallback) and the header row x:68→153 (a 1170px container fallback that is only true above 1440px). Together they were the whole 0.14 CLS. The ladder below mirrors palladio/css/responsive.css's .content_wrap widths verbatim — keep them in sync if the theme's ladder ever moves. */ --pi-header-h: 83px; --pi-container-w: 1170px; /* ≥1440px */ } @media (max-width:1439px){ :root{ --pi-container-w:1000px; } } @media (max-width:1262px){ :root{ --pi-container-w:910px; } } @media (max-width:1135px){ :root{ --pi-container-w:964px; } } @media (max-width:1023px){ :root{ --pi-container-w:900px; } } @media (max-width:959px) { :root{ --pi-container-w:708px; } } @media (max-width:767px) { :root{ --pi-container-w:600px; --pi-header-h:73px; } } @media (max-width:639px) { :root{ --pi-container-w:440px; } } @media (max-width:479px) { :root{ --pi-container-w:300px; } } /* explicit user choice (set by js/theme-toggle.js) forces the scheme; without the attribute the :root default above follows the OS */ :root[data-pi-theme="light"]{ color-scheme: light; } :root[data-pi-theme="dark"] { color-scheme: dark; } /* dark mode wants a touch less brightness on photos so hot client shots don't glare against the deep canvas. Keyed on html.pi-dark (added by the boot snippet + theme-toggle whenever the resolved theme is dark, incl. the new dark-by-default) so it's correct no matter the OS preference. */ html.pi-dark{ --pi-photo-grade: saturate(.90) contrast(1.03) sepia(.05) brightness(.95); }