/* * caah-hig-tokens.css — the shared palette, spacing grid, radii and type stack for * every Apple-HIG-inspired surface on this site. * * Loaded ahead of, and depended on by, every stylesheet in the design: * * caah-hig-base.css every page, when caah_hig_enabled() is true * caah-hig-home.css the homepage body (front-page.php and the preview template) * caah-lp-hig.css /lp/ routes whose registry entry sets design => 'hig' * * One scope, body.caah-hig, added by inc/caah-hig.php. Everything downstream * narrows from there; nothing redefines a token. * * Every rule keys off html.dark-mode, and only off that class. See the appearance * note at the top of caah-lp-hig.css for why there is deliberately no * `@media (prefers-color-scheme: dark)` block anywhere in this design. */ /* ------------------------------------------------------------------ 1. tokens */ body.caah-hig { /* * Neutral ground, one accent family. The neutrals are warm — pulled toward the * brand cream (#F0EAD6) rather than a cold grey — so the page still reads as * this practice and not as a generic system skin. */ --hig-bg: #F6F4F0; --hig-bg-elevated: #FFFFFF; --hig-fill: rgba(28, 26, 25, 0.05); --hig-fill-strong: rgba(28, 26, 25, 0.09); --hig-text: #1C1A19; --hig-text-secondary: #59544E; --hig-text-tertiary: #6E6862; --hig-separator: rgba(28, 26, 25, 0.12); --hig-separator-strong: rgba(28, 26, 25, 0.22); /* * #C52029, not the brand's #DF3942. White on #DF3942 measures 4.37:1, under the * 4.5:1 AA floor for the button labels that sit on it; #C52029 measures 5.81:1 * and is already the theme's own --secondary, so this stays inside the brand. */ --hig-accent: #C52029; --hig-accent-pressed: #A4161E; --hig-on-accent: #FFFFFF; /* The focus ring is neutral on purpose: a red ring beside red buttons is the one place where the accent stops communicating. */ --hig-focus: #1C1A19; --hig-material: rgba(246, 244, 240, 0.82); --hig-material-opaque: #F6F4F0; /* Multi-stop ambient shadows for tactile depth */ --hig-shadow-1: 0 1px 2px rgba(28, 26, 25, 0.04), 0 3px 8px rgba(28, 26, 25, 0.04); --hig-shadow-2: 0 2px 4px rgba(28, 26, 25, 0.04), 0 8px 24px rgba(28, 26, 25, 0.06); --hig-shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.04), 0 3px 8px rgba(28, 26, 25, 0.04); --hig-shadow-md: 0 2px 4px rgba(28, 26, 25, 0.04), 0 8px 24px rgba(28, 26, 25, 0.06); --hig-shadow-lg: 0 4px 8px rgba(28, 26, 25, 0.05), 0 16px 40px rgba(28, 26, 25, 0.08); --hig-shadow-hover: 0 8px 20px rgba(28, 26, 25, 0.07), 0 24px 48px rgba(28, 26, 25, 0.09); --hig-shadow-accent: 0 2px 8px rgba(197, 32, 41, 0.22), 0 8px 24px rgba(197, 32, 41, 0.14); /* Tactile card borders and specular highlight sheens */ --hig-card-bg: var(--hig-bg-elevated); --hig-card-border: rgba(28, 26, 25, 0.09); --hig-card-border-hover: rgba(28, 26, 25, 0.18); --hig-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75); --hig-card-highlight-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.45); /* Apple standard cubic-bezier curves */ --hig-ease-apple: cubic-bezier(0.16, 1, 0.3, 1); --hig-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 4px grid. */ --hig-s1: 4px; --hig-s2: 8px; --hig-s3: 12px; --hig-s4: 16px; --hig-s5: 20px; --hig-s6: 24px; --hig-s8: 32px; --hig-s10: 40px; --hig-s12: 48px; --hig-s16: 64px; /* Restrained radii: compact controls 10, surfaces 16-20. Nothing is a pill except the status chip, where the shape itself carries the meaning. */ --hig-r-control: 10px; --hig-r-surface: 16px; --hig-r-large: 20px; --hig-gutter: clamp(16px, 3vw, 32px); --hig-measure: 1160px; /* * Shared components (.btn, .pill, .caah-field, .caah-lead-shell, the sticky * bar) read the theme's own variables. Rebinding them here means those * components adapt to this design without this file having to restate their * markup contracts. */ --ink: var(--hig-text); --muted: var(--hig-text-secondary); --primary: var(--hig-accent); --secondary: var(--hig-accent-pressed); --cream: var(--hig-bg); --radius-lg: var(--hig-r-large); --radius-md: var(--hig-r-surface); --radius-sm: var(--hig-r-control); --shadow: var(--hig-shadow-md); --max-width: var(--hig-measure); --hig-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html.dark-mode body.caah-hig { color-scheme: dark; /* Not an inversion: the layers keep their order, and no surface is pure black or pure white. Elevated surfaces get lighter as they come forward, which is what replaces shadow when shadow stops being visible. */ --hig-bg: #121113; --hig-bg-elevated: #1D1C1F; --hig-fill: rgba(255, 255, 255, 0.07); --hig-fill-strong: rgba(255, 255, 255, 0.12); --hig-text: #F5F3F0; --hig-text-secondary: #ADA79F; --hig-text-tertiary: #8C867E; --hig-separator: rgba(255, 255, 255, 0.13); --hig-separator-strong: rgba(255, 255, 255, 0.26); /* Fill lifts to #D62B33 (4.94:1 under white, 3.7:1 against the ground, so the button's own edge is perceivable); accent TEXT lifts further to #FF6F73, which measures 6.6:1 on the dark ground. */ --hig-accent: #D62B33; --hig-accent-pressed: #B41F27; --hig-accent-text: #FF6F73; --hig-on-accent: #FFFFFF; --hig-focus: #FFFFFF; --hig-material: rgba(18, 17, 19, 0.82); --hig-material-opaque: #121113; --hig-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45); --hig-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.55); --hig-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --hig-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55); --hig-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65); --hig-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.75); --hig-shadow-accent: 0 2px 10px rgba(214, 43, 51, 0.35), 0 8px 24px rgba(214, 43, 51, 0.2); --hig-card-bg: var(--hig-bg-elevated); --hig-card-border: rgba(255, 255, 255, 0.11); --hig-card-border-hover: rgba(255, 255, 255, 0.22); --hig-card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09); --hig-card-highlight-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.05); } body.caah-hig { --hig-accent-text: var(--hig-accent); }