/* ============================================================ AM Design System — TOKENS ------------------------------------------------------------ Every value the components use lives here as a custom property. Nothing downstream should hard-code a colour, size or duration. Values are lifted verbatim from docs/design/DESIGN_LANGUAGE.md (locked 3 Sep 2026). Scopes, in order: 1. :root the working default (v3 green) 2. .on-image remap for text over photography 3. [data-theme="navy"] alternate palette 4. [data-theme="oxblood"] alternate palette Palette and type are deliberately separate groups so either can be swapped without touching the other. ============================================================ */ :root { /* --------------------------------------------------------- COLOUR — v3 green, the working default. Combinations here are already AA-checked; keep the pairs as they are rather than inventing new ones. --------------------------------------------------------- */ --ground: #F7F4EE; /* page background, warm cream */ --ink: #14140F; /* headlines and body text */ --ink-fixed: #14140F; /* literal ink; does NOT remap under .on-image. Use on elements that keep a cream surface over a photo, e.g. .btn--on-image label. */ --muted: #57564F; /* secondary text, AA at 12px */ --subhead: #3D3C36; /* subhead ink, one step darker than muted */ --primary: #1F4D3A; /* top band, CTA, numerals, brand stripe */ --primary-hover: #14140F; /* CTA hover resolves to ink, not a tint */ --tint: #E4EBE5; /* sage surface behind the proof block */ --rule: #C9D6CC; /* hairlines */ --highlight: #E8B04B; /* used ONCE per page: the tag chip. Never as a text colour. */ --on-primary: #F7F4EE; /* text on --primary */ --on-highlight: #14140F; /* text on --highlight */ --on-image: #F7F4EE; /* text over photography */ /* Status colours. Chosen to sit in the same warm family and to clear AA on --ground. */ --error: #A32B22; --error-tint: #F7E6E4; --success: #1F4D3A; /* success reuses primary green */ --success-tint: #E4EBE5; --info-tint: #ECEFF2; /* Scrim stops for full-bleed photography. Measured so cream text clears AA in every band including a bright sky. Re-check if the image treatment changes. */ --scrim-0: rgba(20, 20, 15, .62); --scrim-34: rgba(20, 20, 15, .60); --scrim-62: rgba(20, 20, 15, .72); --scrim-78: rgba(20, 20, 15, .86); --scrim-100:rgba(20, 20, 15, .86); /* Top-band-only scrim, used by the split layout. */ --scrim-top-0: rgba(20, 20, 15, .58); --scrim-top-55: rgba(20, 20, 15, .72); --scrim-top-100: rgba(20, 20, 15, .86); /* --------------------------------------------------------- TYPE — base 16px, ratio 1.25. Locked scale. 16px is the floor for anything the user types into; 12px is the floor for anything at all. --------------------------------------------------------- */ --font-display: 'Lora', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-h1: 31px; --lh-h1: 1.15; /* Lora 600, max 3 lines @390px */ --fs-h1-xl: 37px; --lh-h1-xl: 1.12; /* 1.2x, the photo-screen headline */ --fs-h2: 25px; --lh-h2: 1.2; /* Lora 600, section heads */ --fs-sub: 17px; --lh-sub: 1.45; /* Inter 400, --subhead ink */ --fs-body: 16px; --lh-body: 1.5; /* Inter 400 */ --fs-small: 13px; --lh-small: 1.4; /* Inter 500/600, tag/band/numerals */ --fs-micro: 12px; --lh-micro: 1.4; /* Inter 400, floor */ --fs-cta: 16px; /* Inter 600 */ --fs-input: 16px; /* NEVER below 16px: iOS zooms the viewport on focus otherwise */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --tracking-caps: .02em; /* only when uppercase */ /* --------------------------------------------------------- SPACE — 8px grid with 4 and 12 as half-steps. No single gap above 32px in a page composition; 48 exists for the component sheet and desktop breathing room only. --------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* Named composition spacings from the locked scale, so a template reads as intent rather than arithmetic. */ --sp-above-h1: var(--sp-6); /* 32 — band to H1 */ --sp-h1-sub: var(--sp-3); /* 12 — H1 to subhead */ --sp-sub-proof: var(--sp-5); /* 24 — subhead to proof block */ --sp-proof-pad: var(--sp-4); /* 16 — inside the proof block */ --sp-proof-gap: var(--sp-3); /* 12 — between proof items */ --sp-proof-cta: var(--sp-5); /* 24 — proof to CTA */ --sp-cta-note: var(--sp-2); /* 8 — CTA to reassurance line */ --sp-foot-pad: 20px; /* footer padding, matches the gutter */ --slack-max: 88px; /* cap on the pinned-bottom gap */ /* --------------------------------------------------------- RADIUS --------------------------------------------------------- */ --radius: 4px; /* controls: buttons, inputs, cards, chips */ --radius-chip: 3px; /* the tag chip sits one step tighter */ --radius-tile: 22%; /* monogram tile only — locked proportion */ /* --------------------------------------------------------- SHADOW — exactly one. Depth is not part of the language. --------------------------------------------------------- */ --shadow-soft: 0 1px 2px rgba(20,20,15,.06), 0 2px 8px rgba(20,20,15,.08); --shadow-frame: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.14); /* --------------------------------------------------------- MOTION — three durations, one easing. Everything here is disabled wholesale by the reduced-motion block in motion.css. --------------------------------------------------------- */ --dur-fast: 150ms; /* button press, hover, focus ring */ --dur-base: 250ms; /* fades, progress fill */ --dur-slow: 400ms; /* step transitions */ --ease: cubic-bezier(.2, .6, .3, 1); /* soft decelerate */ --ease-out: cubic-bezier(0, 0, .2, 1); --stagger: 60ms; /* per-child delay in .anim-stagger */ /* --------------------------------------------------------- Z-INDEX — a short, explicit ladder. --------------------------------------------------------- */ --z-photo: 0; --z-content: 1; --z-sticky: 10; --z-overlay: 100; /* --------------------------------------------------------- LAYOUT --------------------------------------------------------- */ --gutter: 20px; /* horizontal page padding at 390px */ --page-max: 390px; /* the mobile design width */ --card-max: 480px; /* the centred column on desktop */ --stripe-h: 4px; /* brand stripe */ --band-h: 44px; /* top band */ --cta-h: 48px; /* default control height and tap target floor */ --cta-h-lg: 56px; /* --lg buttons and .choice cards */ --tap-min: 48px; /* never make anything tappable smaller */ --focus-ring: 3px; /* focus outline width */ --focus-offset:2px; } /* ============================================================ .on-image — text sitting over photography. Remaps the text tokens to cream. FLAT: no text-shadow; the scrim alone carries legibility. Anything that must stay dark (a cream button's label) uses --ink-fixed, which is not remapped here. ============================================================ */ .on-image { --ink: var(--on-image); --subhead: var(--on-image); --muted: var(--on-image); --rule: rgba(247, 244, 238, .28); color: var(--on-image); } /* ============================================================ ALTERNATE THEMES Set data-theme on any ancestor (usually or .page). Only colour tokens change; type, space and motion are shared. These are the v3 alternates kept in reserve if the green is rejected for a sector. ============================================================ */ /* Navy — cooler, reads more corporate/financial. */ [data-theme="navy"] { --primary: #1E2A44; --primary-hover: #14140F; --tint: #E6E9EF; --rule: #C7CDD9; --success: #1E2A44; --success-tint: #E6E9EF; } /* Oxblood — warmer and more traditional; suits legacy verticals. */ [data-theme="oxblood"] { --primary: #6B2A2A; --primary-hover: #14140F; --tint: #F0E5E3; --rule: #DCC8C5; --success: #6B2A2A; --success-tint: #F0E5E3; /* --error must stay distinct from an oxblood primary. */ --error: #8A1F16; }