:root { /* ============================================================= STRUCTURAL — surfaces, ink, hairlines. Used to compose the page itself. Do not apply interactive colours (accent-*) to structural elements. ============================================================= */ /* Surface tiers. Declared on sections via
. --surface-raised is reserved for future use (cards floating above a base-tier section need a third tone). Not introduced until needed. */ --surface-base: #FAF6EE; /* page bg, default sections, all cards */ --surface-sunken: #F0EAD9; /* alternating sections, footer */ --surface-overlay-bg: rgba(250, 246, 238, 0.85); /* sticky header backdrop */ --surface-raised: #FFFDF8; /* B/Atelier — floating panels above base/sunken */ /* Ink (text) family. */ --ink: #322F26; /* primary text */ --ink-deep: #211F1A; /* B/Atelier — authoritative display headlines */ --ink-muted: #847C6E; /* secondary text, captions, metadata */ --ink-hairline: #E5DEC9; /* dividers, default borders */ --ink-on-accent: #FFFFFF; /* text on accent / gradient surfaces */ /* ============================================================= INTERACTIVE — actions, brand, state. The brand identity lives in the gradient. Two endpoint colours define the gradient; --accent-link is the legible-on-light text colour drawn from the same warm family. ============================================================= */ --accent-start: #5C76B9; /* gradient stop A (lifted from logo SVG) */ --accent-end: #DA7EAF; /* gradient stop B (lifted from logo SVG) */ --accent-link: #C25A93; /* darker pink — text links, hover-text on light bg */ --gradient-action: linear-gradient(135deg, var(--accent-start) 0%, var(--accent-end) 100%); --gradient-tint: linear-gradient(135deg, rgba(92, 118, 185, 0.12), rgba(218, 126, 175, 0.16)); --ring-focus: 0 0 0 3px rgba(218, 126, 175, 0.35); /* ============================================================= TYPOGRAPHY ============================================================= */ /* Font families — role-based names survive a future serif↔sans swap. */ --font-display: "Iowan Old Style", "Charter", "Cambria", Georgia, "Times New Roman", serif; --font-text: "35-FTR", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; --font-ui: "35-FTR", system-ui, -apple-system, sans-serif; /* THIRD VOICE — the structural sans. Same family as --font-ui but used heavy (--weight-extrabold / --weight-black) for numerals, labels, wayfinding and names. The system's spine; never a headline voice. */ --font-structure: "35-FTR", system-ui, -apple-system, sans-serif; /* Reader text-size control sets this on ; the root font-size scales by it. */ --type-scale: 1; /* Type scale. --text-3xl is used for the desktop section-title clamp top. --text-4xl was declared and never used; removed. */ --text-xs: calc(0.9375rem * var(--type-scale)); /* 15px — bumped for 55+ legibility */ --text-sm: calc(1.0625rem * var(--type-scale)); /* 17px — bumped for 55+ legibility */ --text-base: calc(1.5rem * var(--type-scale)); /* 24px — body (sans still being chosen: Karla vs 35-FTR) */ --text-lg: calc(1.75rem * var(--type-scale)); /* 28px — lede */ --text-xl: 2rem; /* 32px */ --text-2xl: 2.5rem; /* 40px */ --text-3xl: 3rem; /* 48px — top of section-title clamp */ --text-hero: clamp(3.25rem, 8vw, 7rem); /* B/Atelier — bigger, confident display */ /* Card title tiers — three roles, three sizes, one weight. */ --text-card-featured: var(--text-xl); /* 32px — primary offerings, large grid cells */ --text-card-browse: var(--text-lg); /* 24px — content browse tiles, FAQ summaries */ --text-card-compact: var(--text-base); /* 19px — dense / thumbnail tiles */ /* Weight — descriptive vocabulary. Role mapping happens in components. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* third voice — structural labels */ --weight-black: 900; /* third voice — numerals */ /* Line-height — four roles. */ --lh-display: 1.1; /* hero H1, section H2 — B/Atelier */ --lh-heading: 1.3; /* card titles, FAQ summaries, how-step titles */ --lh-body: 1.5; /* tighter leading suits 35-FTR */ --lh-caption: 1.5; /* eyebrow, metadata, safety lines, footer micro */ /* Letter-spacing — two roles, one for prominent eyebrows, one for tight metadata. */ --tracking-eyebrow: 0.16em; --tracking-meta: 0.04em; /* ============================================================= SPACING — 8px base. The scale extends below 8px for the small adjustments (badge padding, hairline offsets, focus-ring math). ============================================================= */ --space-0-25: 2px; --space-0-5: 4px; --space-0-75: 6px; --space-1: 8px; --space-1-25: 10px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; /* ============================================================= RADIUS — t-shirt sizing. --radius-pill is a shape, not a magnitude. ============================================================= */ --radius-sm: 6px; /* small pills inside cards (duration tags) */ --radius-md: 16px; /* default card radius */ --radius-lg: 24px; /* hero photo, large surfaces */ --radius-pill: 999px; /* buttons, badges, chips, avatars */ /* ============================================================= BORDER — role tokens (composed values, not just colours). ============================================================= */ --border-hairline: 1px solid var(--ink-hairline); --border-emphasis: 2px solid var(--accent-end); --border-cta: 1px solid transparent; /* ============================================================= ELEVATION — one shadow recipe, three magnitudes. Recipe: 0 Y BLUR -BLUR/2 ink-alpha Y and blur roughly double per step; spread is negative-half-blur. Each step looks like a family member of the next. ============================================================= */ --elevation-1: 0 4px 14px -7px rgba(43, 42, 38, 0.10); /* subtle rest lift (unused today; reserved) */ --elevation-2: 0 12px 28px -14px rgba(43, 42, 38, 0.18); /* card hover, focus-visible */ --elevation-3: 0 24px 60px -30px rgba(43, 42, 38, 0.25); /* photo, modal */ /* Brand-glow shadows for primary button — NOT on the elevation ladder. Uses accent-end alpha so the button reads as the brand mark glowing, not as a neutral element lifting off the page. */ --shadow-button-rest: 0 6px 22px -10px rgba(218, 126, 175, 0.55); --shadow-button-hover: 0 10px 30px -10px rgba(218, 126, 175, 0.65); /* ============================================================= LAYOUT WIDTHS ============================================================= */ --reading-width: 720px; --content-width: 1120px; /* ============================================================= MOTION ============================================================= */ --ease: cubic-bezier(0.2, 0.0, 0.2, 1); --transition-slow: 600ms var(--ease); --transition-base: 300ms var(--ease); --transition-fast: 200ms var(--ease); /* ============================================================= Z-INDEX — role-based, three explicit layers. ============================================================= */ --z-header: 10; --z-overlay: 50; --z-skip-link: 100; }