/* ============================================================================ v24-tokens.css — THE ONLY FILE ON THIS SITE THAT DEFINES A TOKEN. ---------------------------------------------------------------------------- THE FINDING THAT DECIDED THIS ARCHITECTURE The site did not have a design system with drift in it. It had SEVENTEEN stylesheets each declaring their own :root block, and they disagreed — which is worse than having no system, because the shared names made the inconsistency look deliberate. Measured on the estate this file replaces: --line 5 distinct values --cream-2 4 --ink 3 <- the colour of body text --muted 3 --line-gold 3 --shadow 3 --cream 2 <- the page itself So `color: var(--ink)` produced a different colour depending on which page a visitor happened to be on, and nothing in the build noticed, because every sheet was individually valid. THE LAYERS, IN LOAD ORDER TOKENS v24-tokens.css this file; nothing else may define one BASE v24-base.css the elements LAYOUT v24-layout.css containers, sections, rhythm, measure COMPONENTS v24-components.css the parts two or more archetypes need ARCHETYPE v24-.css one per experience pattern HOW THE VALUES WERE CHOSEN Not invented and not redesigned. Each canonical value is THE VALUE THE SITE ALREADY USED ON THE MOST ROUTES, then confirmed for contrast rather than assumed. The result should be indistinguishable from the site's best existing pages, because it is them — what changed is that it is now one decision instead of seventeen accidents. CONTRAST IS CHECKED ON ALL THREE LIGHT SURFACES Every ink and semantic colour below is measured against the page ground, the raised surface AND the quiet band. The quiet band is the one that decides, because it is where status colours and eyebrows actually sit, and two of the site's semantic colours failed only there: --sp-good was #4c7a3f — 4.57:1 on ground, 4.08:1 on the band FAIL now #406b36 — 5.64:1 on ground, 5.04:1 on the band --sp-caution was #8a6318 — 4.90:1 on ground, 4.38:1 on the band FAIL now #795612 — 6.03:1 on ground, 5.39:1 on the band Both were fine on the page and below AA on a striped table row, which is exactly where a status colour gets used. ============================================================================ */ :root { /* --- ground and ink ---------------------------------------------------- Provenance is route-weighted: #faf3e5 was declared as --cream by 11 of the 17 token sheets and reached 205 routes; #2f2013 was the plurality --ink. */ --sp-ground: #faf3e5; /* the page */ --sp-raised: #fdf9f0; /* cards and panels that lift off the page */ --sp-quiet: #f2e6cf; /* banded sections and striped rows */ --sp-paper: #ffffff; --sp-ink: #2f2013; /* body text 14.22 : 14.95 : 12.71 */ --sp-ink-2: #4a3521; /* secondary 10.44 : 10.97 : 9.33 */ --sp-ink-3: #6f5a41; /* meta 5.92 : 6.22 : 5.29 */ --sp-deep: #38220f; /* inverted surfaces; 13.55:1 with the ground on it */ --sp-deep-2: #4a2e17; /* --- accents ----------------------------------------------------------- ONE action colour. The estate carried --saffron #aa4c1d and --saffron-dark #a8481a on twelve sheets each; the darker is the one that clears AA on the quiet band (4.71:1) and is therefore the canonical one. */ --sp-accent: #a8481a; /* 5.27 : 5.54 : 4.71 */ --sp-accent-deep: #8c3a13; --sp-gold: #b5842f; /* decorative rules only, never text */ --sp-gold-soft: #e7cf9c; --sp-bronze: #866123; /* eyebrows and small caps on any surface */ --sp-bronze-soft: #d9c69b; /* The chrome — header, footer, search dialog, breadcrumb — uses a temple maroon for its call to action on all 219 routes. It is a real part of the shipped design, so it is a canonical token here rather than being aliased onto the saffron accent: mapping it across would silently recolour the header of every page on the site, and that is a redesign, not a migration. Whether the site keeps two action colours is a GATE 3 question, asked when the chrome itself is migrated. */ --sp-maroon: #7a1f2b; /* 9.24 : 9.71 : 8.26 */ --sp-maroon-deep: #5c1721; /* --- semantic, and never carrying meaning on their own ---------------- Each of these is only ever used beside a word that says the same thing. A colour is not a label. */ --sp-good: #406b36; /* 5.64 : 5.92 : 5.04 */ --sp-caution: #795612; /* 6.03 : 6.34 : 5.39 */ --sp-bad: #8f2d18; /* 7.44 : 7.82 : 6.65 */ /* --- the deity badge, which was EIGHTY-FOUR INLINE HEX LITERALS --------- Every festival and observance page carried its presiding deity as `Vishnu` — a colour decided in the markup, on 84 pages, outside every check this site has. Eight colours, one per deity, and nothing anywhere said so. They are tokens now, and four of them moved when they were measured for the first time. The badge's label is set in the page ground, and three of the eight were below AA against it while passing against the pure white the legacy sheet used: Shiva #5977a4 -> #536f99 4.13 -> 4.64 Lakshmi #986e27 -> #8e6725 4.14 -> 4.62 Surya #a46817 -> #996115 4.16 -> 4.67 Ganesha #b6521f -> #b3501e 4.51 -> 4.66 (it cleared by 0.01) Each is the same hue and the same saturation with the lightness lowered until it clears 4.6:1, exactly as --sp-good and --sp-caution were handled above. Vishnu, Vedic, Devi and Murugan were already clear and are untouched. THE COLOUR IS NEVER THE ONLY CARRIER. Every badge states the deity's name in words inside it; the colour is a second signal for a reader who has seen the set before, not the thing that tells them which deity it is. */ --sp-deity-vishnu: #2f6f5e; /* 5.35 : 1 on the page ground */ --sp-deity-shiva: #536f99; /* 4.64 */ --sp-deity-vedic: #8a6320; /* 4.89 */ --sp-deity-lakshmi: #8e6725; /* 4.62 */ --sp-deity-surya: #996115; /* 4.67 */ --sp-deity-devi: #b23a6b; /* 5.13 */ --sp-deity-murugan: #b5342a; /* 5.45 */ --sp-deity-ganesha: #b3501e; /* 4.66 */ /* --- lines ------------------------------------------------------------- The estate's five --line values were four hairline weights and one alias. Two are enough: a hairline you read past, and one you read. */ --sp-line: #e7dcc4; --sp-line-strong: #9e8139; /* --- type -------------------------------------------------------------- FOUR LATIN FACES BECAME THREE. Cormorant Garamond is retired: it was doing Marcellus's job on two page generations and was requested in five variants (ital,wght@0,400;0,500;0,600;1,400). Two display serifs is not a pairing, it is an unresolved decision. The Noto faces are NOT optional. A Latin fallback for Devanagari does not merely look wrong — it drops conjuncts, so the word is no longer the word. assets/js/a11y.js marks each run with `lang` and the base layer routes it. */ --sp-display: 'Marcellus', Georgia, 'Times New Roman', serif; --sp-sc: 'Marcellus SC', 'Marcellus', Georgia, serif; --sp-body: 'Spectral', Georgia, 'Times New Roman', serif; --sp-deva: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif; --sp-tamil: 'Noto Sans Tamil', sans-serif; /* The chrome's own UI type. Deliberately the platform face: the header is furniture, not reading. */ --sp-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* THE 16px / 18px SPLIT, RESOLVED WITHOUT PICKING A WINNER The legacy estate set body text at 16px; the homepage and About at 18px. A fluid ramp gives 16.5px at 320 and 18px from 1280 up. Long-form explanation is what this site is for, and 16px of Spectral at desktop width was under-set for it. */ --sp-t-body: clamp(1.031rem, 0.985rem + 0.23vw, 1.125rem); /* TWO h1 SIZES, AND THE DIFFERENCE IS NOT DECORATIVE. --sp-t-hero is the homepage, where the h1 is the priest's name and is the first thing on the site a visitor sees. --sp-t-h1 is every other page, where the h1 is a title above something to read. The base layer sets h1 from --sp-t-h1 and the Sacred Discovery archetype raises it; the estate this replaces carried NINE h1 sizes because nobody had written that sentence down. */ --sp-t-hero: clamp(2.15rem, 1.30rem + 3.6vw, 4.25rem); --sp-t-h1: clamp(1.85rem, 1.42rem + 1.8vw, 3rem); --sp-t-h2: clamp(1.55rem, 1.15rem + 1.7vw, 2.5rem); /* THE STEP BETWEEN h2 AND h3, AND WHY THE SCALE NEEDED ONE. --sp-t-h2 is the size an h2 takes when it OPENS A SURFACE: the groups on the Sacred Learning hub, the almanac's sections. In running prose it is too close to the h1 — 48px over 40px is not a hierarchy, it is two titles — and a reader scrolling a long teaching loses track of which level they are on. This is the in-prose h2. Both are on the scale; which one a page uses is an archetype decision, and that is the kind of variation the system is for. */ --sp-t-xl: clamp(1.35rem, 1.12rem + 1.0vw, 1.9rem); --sp-t-h3: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem); --sp-t-lg: 1.125rem; --sp-t-sm: 0.9375rem; --sp-t-xs: 0.8125rem; --sp-t-eyebrow: 0.75rem; /* 12 px floor for uppercase labels (Gate 7, 2026-10-10; was 0.7rem = 11.2 px) */ --sp-lh-tight: 1.15; --sp-lh-snug: 1.3; --sp-lh-body: 1.65; --sp-track-eyebrow: 0.09em; /* --- spacing: ONE scale ------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-sec: clamp(52px, 5vw, 88px); /* between major moments */ --sp-sec-tight: clamp(34px, 3.2vw, 52px); /* within one moment */ /* --- containers -------------------------------------------------------- --sp-measure is set on a CONTAINER, never on a paragraph. Setting it per element is how one page ended up with prose at three widths: three sheets each set max-width on `p`, and the narrowest won inside whatever block it happened to own. */ --sp-measure: 68ch; --sp-reading: 760px; --sp-content: 1040px; --sp-wide: 1240px; --sp-gutter: clamp(18px, 4vw, 40px); --sp-r: 10px; --sp-r-sm: 6px; --sp-ring: 3px; --sp-shadow: 0 1px 2px rgba(56, 34, 15, .05), 0 8px 24px -14px rgba(56, 34, 15, .28); --sp-shadow-sm: 0 1px 2px rgba(56, 34, 15, .05); --sp-dur-fast: 140ms; --sp-dur: 240ms; --sp-ease: cubic-bezier(.2, .6, .2, 1); --sp-z-header: 100; /* ------------------------------------------------------------------------ TEMPORARY LEGACY ALIASES — and the live defect that made them necessary. assets/css/chrome-*.css owns the header, footer, search dialog and breadcrumb. It loads on EVERY route and it loads LAST. It carried: :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--sp-ring-LEGACY) solid var(--sp-saffron-LEGACY); } written against legacy token names. On a migrated page those resolve to nothing — and a var() that resolves to nothing does not fall back to a sensible default, it makes the ENTIRE DECLARATION INVALID. Because the rule has the same specificity as the base layer's focus rule and comes after it, the page was left with NO FOCUS RING AT ALL. Thirteen pages, 122 keyboard stops, and the only thing that noticed was the a11y harness. So every legacy name the chrome still uses is aliased here, pointing AT a canonical token. These are not a second palette: a value is still decided in exactly one place. They exist only until chrome-*.css is itself migrated, and tools/verify_design_system.py counts them so the number can only fall. ------------------------------------------------------------------------ */ --v-ivory: var(--sp-ground); --v-ivory-2: var(--sp-quiet); --v-ivory-3: var(--sp-line); --v-paper: var(--sp-paper); --v-ink: var(--sp-ink); --v-ink-2: var(--sp-ink-2); --v-ink-3: var(--sp-ink-3); --v-saffron: var(--sp-accent); --v-bronze: var(--sp-bronze); --v-bronze-soft: var(--sp-bronze-soft); --v-ring: var(--sp-ring); --v-radius: var(--sp-r); --v-radius-s: var(--sp-r-sm); --v-display: var(--sp-display); --v-sc: var(--sp-sc); --v-body: var(--sp-body); --v-t-body: var(--sp-t-body); --v-t-sm: var(--sp-t-sm); --v-t-xs: var(--sp-t-xs); --v-t-eyebrow: var(--sp-t-eyebrow); --v-gutter: var(--sp-gutter); --v-wide: var(--sp-wide); --v-content: var(--sp-content); --v-reading: var(--sp-reading); --v-z-header: var(--sp-z-header); --v-maroon: var(--sp-maroon); --v-maroon-deep: var(--sp-maroon-deep); --v-ui: var(--sp-ui); --v-sec: var(--sp-sec); --v-sec-tight: var(--sp-sec-tight); --v-t-h2: var(--sp-t-h2); --v-t-h3: var(--sp-t-h3); /* index.html's hero type and panel shadow. It is the only route that uses --sp-t-hero, which is the point of having two h1 sizes: the homepage h1 is the priest's name. */ --v-t-hero: var(--sp-t-hero); --v-shadow: var(--sp-shadow); --v-1: var(--sp-1); --v-2: var(--sp-2); --v-3: var(--sp-3); --v-4: var(--sp-4); --v-5: var(--sp-5); --v-6: var(--sp-6); --v-7: var(--sp-7); --v-8: var(--sp-8); --v-9: var(--sp-9); /* ------------------------------------------------------------------------ THE v21-ERA NAMES — the second and last alias block (v25 Gate 3d). The 21 routes that remain on the legacy estate are the bespoke ones: the homepage, the almanac, the enquiry journey, three hubs with search behaviour, the deep ceremony guides. Their page sheets carry layout and interaction that took a long time to get right, and rewriting 262KB of it into new archetype sheets would risk every one of those behaviours to change a palette. So they are migrated the other way round: the page sheet KEEPS its layout and loses its colours. Each one's :root block is deleted and its --name references resolve here instead, which means one palette and one type scale now govern every route on the site while no rule that positions anything moved at all. EIGHT NAMES DISAGREED WITH THEMSELVES ACROSS THE ESTATE, which is the defect this whole file exists to end: --cream #faf3e5 on 8 sheets, #fff9ee on 2 --cream-2 four values --ink #2f2013 on 6, #2c241c on 2, #3d2a17 on 2 — body text --line five values --line-gold three --muted three --shadow three Each now resolves once, to the value the token sheet already chose on route-weighted evidence. --saffron IS THE ONE THAT MATTERS FOR ACCESSIBILITY. The legacy value is #aa4c1d, which measures 4.38:1 on the quiet band — below AA — and it is the colour the chrome still hard-codes as a var() fallback. It resolves to --sp-accent #a8481a here, which measures 4.71:1 on the same band. Same hue, same family, one step darker, and it is the only accent on the site that has been checked on all three light surfaces. */ --cream: var(--sp-ground); --cream-2: var(--sp-quiet); --surface: var(--sp-raised); --paper: var(--sp-paper); --espresso: var(--sp-deep); --espresso-2: var(--sp-deep-2); --ink: var(--sp-ink); --muted: var(--sp-ink-3); --muted-2: var(--sp-ink-3); --saffron: var(--sp-accent); --saffron-dark: var(--sp-accent); --saffron-bright: var(--sp-accent); --gold: var(--sp-gold); --gold-soft: var(--sp-gold-soft); --gold-deep: var(--sp-bronze); --gold-text: var(--sp-bronze); --line: var(--sp-line); --line-gold: var(--sp-line); --line-strong: var(--sp-line-strong); --shadow: var(--sp-shadow); --shadow-sm: var(--sp-shadow-sm); --green: var(--sp-good); --ok: var(--sp-good); --warn: var(--sp-caution); --bad: var(--sp-bad); --maxw: var(--sp-wide); /* The deep-guide sheet's own four. --gd-tint was a fourth cream and --gd-deep a second maroon; both collapse into the canonical pair. */ --gd-rule: var(--sp-line); --gd-rule-strong: var(--sp-line-strong); --gd-ink: var(--sp-ink); --gd-tint: var(--sp-quiet); --gd-deep: var(--sp-maroon); } /* ============================================================================ prefers-contrast: more — THE SAME TOKENS, RE-POINTED. No new names. Ported on 2026-10-03 from assets/css/shared-48a7ba2fff82.css, which a migrated route stops loading. Dropping it silently would have removed high-contrast support from every migrated page, and the people who use that setting are the least likely to be able to report that something looks wrong. It belongs in THIS file rather than in the base layer because deciding what a token resolves to is this file's entire job, and a media query does not change whose job it is. Nothing below changes a size, a spacing or a radius: the palette is deliberately soft, so at this setting every boundary is promoted to the strong line, the two muted inks are promoted to full ink, the quiet band stops being a tint, and the shadows go. ============================================================================ */ @media (prefers-contrast: more) { :root { --sp-line: var(--sp-line-strong); --sp-ink-2: var(--sp-ink); --sp-ink-3: var(--sp-ink); --sp-quiet: var(--sp-raised); --sp-shadow: none; --sp-shadow-sm: none; } }