/* ========================================================================= VEIL DESIGN TOKENS — single source of truth (Veil_Design_System.md §2–§4) Every color, type, spacing, radius, and shadow value in the theme comes from these variables. If a value isn't here, it isn't in the system. ========================================================================= */ :root { /* ----- Color ----- */ --veil-black-green: #071712; /* darkest surface; gradient endpoint; proof bands */ --veil-deep-forest: #0a2418; /* dark surface mid-tone; gradient start */ --veil-ink: #084026; /* headings + body on light */ --veil-muted: #3c6b52; /* secondary text on light */ --veil-accent: #34a65f; /* CTAs / rules / numerals / nodes ONLY — ≤3 per viewport */ --veil-accent-deep: #0a5c36; /* accent text-on-light (drop caps, pull quotes, stat numbers) */ --veil-accent-em: #2f9d59; /* italic accent word in H1 on light */ /* WCAG-02 Lane A · SC 1.4.3 (A-4). Was #39a751, measured at rendered pixels as 2.96:1 on cream and 3.08:1 on white against a 4.5:1 requirement. Replaced with the in-system --veil-accent-deep value (#0a5c36), which is already the site's text-link colour (.veil-textlink) — no new brand colour. Measured after: 7.78:1 cream / 8.09:1 white / 7.35:1 sage. Consumers: base.css `.veil-scope a:not([class])`, pages/remaining.css `.hubcard a`. Bare links on dark surfaces are re-pointed at --veil-mist by the guard in base.css so this darkening cannot regress them. */ --veil-link: #0a5c36; /* inline links, always underlined */ --veil-mist: #7fc9a2; /* eyebrows/labels on dark; hairlines on dark @ .14–.40 alpha */ --veil-dark-body: #c9e2d4; /* body text on dark */ --veil-dark-body-2: #c3dccf; /* secondary body on dark */ --veil-cream: #fffaf1; /* page canvas */ --veil-sage: #eef6f0; /* alt light surface (cards, chips) */ --veil-white: #ffffff; --veil-hairline: #e3ece7; /* 1px borders on light cards */ --veil-chip-border: #d8e8dd; --veil-chip-text: #2f6b4d; /* WCAG-02 Lane A · SC 1.4.3 (A-5). Was #5b8f6f — 3.60:1 on cream and 3.40:1 on sage at rendered pixels, against 4.5:1 (12px/800 is not "large text"). Replaced with the existing --veil-muted value (#3c6b52), the in-system secondary-text colour: 5.91:1 cream / 5.58:1 sage / 6.15:1 white. No new brand colour. --veil-on-dark .veil-eyebrow already overrides to --veil-mist, so dark surfaces are untouched. */ --veil-eyebrow-light: #3c6b52; /* eyebrow color on light surfaces */ --veil-on-accent: #04120b; /* text on accent-green buttons */ /* ----- Focus indicator (WCAG-02 Lane A; SC 2.4.7 + SC 1.4.11) ----- TWO-TONE by necessity: no single value clears 3:1 on both the cream canvas and the #084026 footer, the two extremes the sitewide ring lands on. Measured against rendered pixels — --veil-ink #084026 : 11.40 cream / 10.77 sage / 11.85 white / 1.00 footer --veil-mist #7fc9a2 : 1.87 cream / 1.77 sage / 1.95 white / 6.08 footer Painted as adjacent bands (mist 0-2px out, ink 2-4px out) at least one band always clears 3:1 against whatever surrounds the control, and the two bands are 6.08:1 against each other so the composite indicator is never lost. Both are existing tokens and both are the ones FIX-01 already uses — no new brand colour is introduced. */ --veil-focus-ring: var(--veil-ink); --veil-focus-ring-inner: var(--veil-mist); /* ----- The dark surface (System §2: ALWAYS gradient + glow, never flat) ----- */ --veil-dark-gradient: linear-gradient(125deg, var(--veil-black-green), var(--veil-deep-forest) 55%, #050f0a); --veil-glow-a: radial-gradient(1100px 620px at 80% -14%, rgba(52, 178, 102, .22), transparent 56%); --veil-glow-b: radial-gradient(800px 520px at -4% 120%, rgba(11, 70, 47, .30), transparent 55%); /* Standard composite for hero/dark sections: */ --veil-dark-surface: var(--veil-glow-a), var(--veil-glow-b), var(--veil-dark-gradient); /* Card-scale dark surface (panels, dossier cards, creed bands): */ --veil-dark-card: linear-gradient(115deg, var(--veil-deep-forest), var(--veil-black-green)); /* ----- Type ----- */ /* B-3: metric-matched fallbacks sit between the web font and the plain system names — see the @font-face block in inc/veil-design-system.php. This does NOT change the settled, approved rendering: the web font is still first and its own metrics are untouched. It changes only what the PRE-SWAP paint looks like, moving it closer to the approved design. */ --veil-font-display: 'Source Serif 4', 'Veil Serif Fallback', Georgia, serif; --veil-font-body: Nunito, 'Veil Sans Fallback', -apple-system, Segoe UI, sans-serif; --veil-h1: clamp(36px, 4.4vw, 56px); /* statement/home may go to 70px via page css */ --veil-h2: clamp(26px, 2.6vw, 34px); --veil-h3: 21px; --veil-body: 16.5px; --veil-body-lh: 1.75; --veil-small: 13.5px; --veil-eyebrow-size: 12px; --veil-eyebrow-track: 2.4px; /* ----- Space / shape / elevation ----- */ --veil-max: 1280px; /* content column (1180 on editorial pages via page css) */ --veil-gutter: 40px; --veil-section: 84px; /* vertical rhythm between major sections (64–90 range) */ --veil-radius-card: 14px; /* THEME-50: was 16px. Measured on 6 live pages, * only THREE card radii actually render: 14px (27 * uses: card, dv2-stat, fsx-mx, veil-rcard), 16px * (9: hubcard, sv-sit, vb-tile), 18px (4: sv5-card). * 14 is the majority, so unifying to it moves the * fewest elements. */ --veil-radius-surface: 18px; /* large panels 18–20 */ --veil-radius-btn: 10px; /* THEME-45 A5 (2026-08-17) — layered, was a single flat cast each. * Every one of the 13 shadows in the theme was one comma-free layer, * which is the classic template tell: real depth needs a tight contact * shadow, a mid diffusion and a wide ambient. Total darkness is held * roughly constant, so surfaces do not visibly darken — they gain edge * definition. The widest layer keeps the original geometry and alpha so * the outermost falloff is unchanged. */ --veil-shadow-card: 0 1px 2px rgba(7, 23, 18, .04), 0 8px 18px rgba(7, 23, 18, .05), 0 18px 40px rgba(7, 23, 18, .06); --veil-shadow-feature: 0 2px 4px rgba(7, 23, 18, .06), 0 12px 26px rgba(7, 23, 18, .08), 0 30px 60px rgba(7, 23, 18, .12); --veil-shadow-dark-card: 0 2px 6px rgba(0, 0, 0, .20), 0 12px 28px rgba(7, 23, 18, .16), 0 26px 54px rgba(7, 23, 18, .16); /* ----- Motion (System §9: restraint; ≤250ms; opacity/transform only) ----- */ --veil-ease: 200ms ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } /* THEME-45 A7 — the reset above kills transition and animation but not * scroll-behavior, and the document computes `smooth`. A reduced-motion * user clicking an in-page anchor (the framework toggle calls * scrollIntoView) still got an animated scroll, which is the exact * vestibular trigger the media query exists to prevent. */ html { scroll-behavior: auto !important; } }