/* ============================================================ DESIGN TOKENS Transcribed from visual-design-system-checklist.md Part A, A1. These values are LOCKED. Do not change without a canon decision. ============================================================ */ :root { /* --- Base palette (A1) ------------------------------------ */ --ground: #F7F5F1; /* off-white, default section band */ --tint: #EDE9E0; /* warm-neutral wash, alternating band */ --linework: #5B6472; /* cool blue-grey */ --charcoal: #23262B; /* structural dark: text, headings */ /* Component-internal tint for Process Arc Tier 2's top zone. Still deliberately DISTINCT from --tint, which stays right. What changed is the direction of the distinctness. The old fixed #EBEFF3 was (235,239,243), B > G > R: the only cool surface in a system where ground, tint and all three Ganga tokens run R > G > B. It sat inside a warm #EDE9E0 band on all four detail pages and read as a temperature break. Deriving it from the page's own lens keeps the separation, removes the discord, and makes each program page's stage cards carry that page's accent. */ --stage-tint: color-mix(in srgb, var(--accent) 7%, var(--surface)); /* Hairline border used by Booking Cards, Track Cards, Filter Bar. Derived from --linework at low alpha so a single token reads correctly on both Ground and Tinted bands. */ --border: rgba(91, 100, 114, 0.20); --white: #FFFFFF; /* text on dark fills ONLY */ /* Card surface. Pure white against --ground is a 1.03:1 step, so cards did almost no work on Ground bands while punching hard on Tinted and on Ganga's parchment. One token, three different results. This warm off-white sits inside the palette and behaves evenly across all three surfaces. */ --surface: #FCFAF6; /* --- Lens accents (A1, "Steel / Sage / Ochre") ------------- Scoped to small touches only: CTA tint, diagram nodes, card borders, signpost tags. NEVER to structure. */ --accent-career: #2C5282; /* steel blue — Transition, Traction */ /* Sage — Foundations, Awareness. A1's #4F7A6B is RESTORED for every non-text use. The earlier global darkening was right in premise and too broad in scope: WCAG needs 4.5:1 only for small text. Non-text UI and meaningful graphics need 3:1 (SC 1.4.11) and decorative elements need nothing, and #4F7A6B clears 3:1 on every surface here. So borders, node fills, chips and rules keep the hue validated at in-context render, and only text steps down. Contrast figures below re-derived independently and confirmed correct: #4F7A6B text on ground 4.46:1 (needs 4.5 — fails by rounding) #4F7A6B text on tint 4.00:1 (needs 4.5) white text on #4F7A6B 4.85:1 (passes, but tightly) #476E60 holds the same hue (159) and saturation (21%), 4 points darker in lightness only. Clears 4.5:1 as text on both backgrounds (5.26 / 4.73) and improves the white-on-fill case too (5.73), so buttons and node fills read the same or better, not worse. */ --accent-inner: #4F7A6B; /* borders, fills, nodes, rules */ --accent-inner-text: #476E60; /* accent set as small text */ /* Ochre — Ganga Tattva, Signpost, cross-register links. Same split as sage. A1's #B8763E is restored for borders and fills, where 3:1 applies and it passes on ground, tint and ganga-ground. Text steps down to the darker value. One caveat kept from the earlier reasoning: #B8763E on ganga-tint measures 2.82:1, under even the graphical 3:1 threshold, so anything load-bearing on THAT surface uses the text value. Figures below re-derived and confirmed correct: #B8763E text on ground 3.38:1 (needs 4.5) #B8763E text on tint 3.04:1 #B8763E text on ganga ground 3.11:1 #B8763E text on ganga tint 2.82:1 white text on #B8763E fill 3.68:1 #89592F holds the same hue (28) and saturation (49%) and is darker only. It clears 4.5:1 on all four backgrounds and reaches 5.94:1 for white on the Ganga buttons, so A1's colour-continuity reasoning between Signpost and destination is preserved intact. */ --accent-spiritual: #B8763E; /* borders, fills, nodes */ --accent-spiritual-text: #89592F; /* accent as small text */ /* Per-page accent. Each page sets this once on ; every component then reads --accent and needs no page-specific CSS. Career is the default, so career pages need no class. */ --accent: var(--accent-career); --accent-text: var(--accent-career); /* --- Ganga Tattva register (A1) --------------------------- Applied via .ganga on . Same disciplined bones, different emotional temperature: only surface warmth and one accent shift. Charcoal and the type scale carry over. */ --ganga-ground: #F3EBDD; --ganga-tint: #EBE0CC; --ganga-border: #D8CBB8; /* --- Type families (A1) ----------------------------------- */ --font-heading: 'IBM Plex Serif', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Type scale (A1, locked) ------------------------------ */ --size-h1: 40px; --lh-h1: 1.15; --size-h2: 28px; --lh-h2: 1.25; --size-h3: 20px; --lh-h3: 1.3; --size-lead: 19px; --lh-lead: 1.5; --size-body: 18px; --lh-body: 1.6; --size-caption: 13px; --lh-caption: 1.4; /* Component-level steps below Body. Each is specified per component in A3, not invented here. Kept as named tokens so the values stay traceable to their component. (gap K) */ --size-offerings-lead: 15px; /* Offerings hero supporting text */ --size-quote: 15px; /* Testimonial Card quote */ --size-attrib-name: 13px; /* Testimonial Card name, 600 */ --size-track-bullet: 13px; /* Track Cards bullets */ --size-attrib-role: 12px; /* Testimonial Card role */ --size-primer-blurb: 12px; /* Program Primer Card blurb */ --size-arc-desc: 11px; /* Process Arc Tier 1 description */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* --- Measure (A1) ----------------------------------------- */ --measure: 640px; /* text column max-width, locked */ /* The content rail. Derived, not typed: the header's own inner box is --page-max with --gutter INSIDE it, so its ink runs from 184 to 1096 at a 1280 viewport. Every band now resolves to the same 912px so body content shares the header's exact left and right edge. Change --page-max or --gutter and the rail follows automatically. */ --rail: calc(var(--page-max) - (2 * var(--gutter))); --page-max: 960px; /* outer container for multi-column rows. Kept close to --measure so the offset between a full-width hero split and the centred prose column stays small. */ /* --- Spacing rhythm --------------------------------------- A1 deliberately deferred this to the build session, to be tuned against live rendered output rather than guessed in chat. 4px base. Calibrated on Home, then frozen sitewide. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Section vertical padding, the main rhythm control. Was --space-9 (96px) — tightened one full step down the scale rather than to an arbitrary value. */ /* 27 Aug, visual review D4. Was --space-8. Two adjacent bands each carried 64px, so every ordinary boundary was 128px marked by nothing but a colour change. The narrow-viewport block below already used --space-7; this makes one value uniform. */ --section-y: var(--space-7); --gutter: var(--space-5); /* Motion. A1 never addressed this and the build shipped four transition declarations against nine :hover rules, so every hover state snapped. One token, applied to colour, border and background only. No movement, no scale, nothing that reads as animation: the register is quiet and motion follows it. */ --transition: 160ms ease; --radius: 12px; /* Diagnostic Frame specifies 12px */ --radius-sm: 8px; } /* Primary breakpoint: 768px. A1 left the exact px open but locked the behaviour rule: "stack vertically on mobile, always." Applied uniformly. CSS cannot use custom properties inside @media, so 768px is written literally throughout. This is its single definition. */ /* Tablet. Between 768 and 960 the layout ran full desktop grids in a viewport too narrow to hold them: two-column card grids, the hero split and the three-up testimonial strip all compressed rather than reflowed. This step sits between the two and is where those grids drop a column. */ @media (max-width: 1024px) { :root { --size-h1: 36px; --section-y: var(--space-7); } } @media (max-width: 768px) { :root { --size-h1: 32px; --size-h2: 24px; --size-h3: 19px; --size-lead: 18px; --section-y: var(--space-7); } } /* Inner-work pages (Inner Foundations, Inner Awareness Intensive) switch the page lens to sage. Process Arc nodes, CTA buttons and pull-quote rules all follow --accent, so this one class is the entire change. */ body.lens-inner { --accent: var(--accent-inner); --accent-text: var(--accent-inner-text); } /* --- Ganga Tattva register override -------------------------- Set on . Remaps only the surface tokens and the accent. Structural dark stays charcoal, unchanged. */ body.ganga { --ground: var(--ganga-ground); --tint: var(--ganga-tint); --border: var(--ganga-border); --accent: var(--accent-spiritual); --accent-text: var(--accent-spiritual-text); }