/* ========================================================================== AHA — Design Tokens Association for Healthy Ageing -------------------------------------------------------------------------- Single source of truth for colour, type, space, motion and elevation. Every component in the system resolves to a token declared here, so a WordPress theme can later expose these as theme.json / customiser settings without touching component CSS. Brand colours are sampled directly from the supplied AHA logo: blue #1A598C green #49AE50 ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COLOUR — Institutional blue (trust, research, policy) ---------------------------------------------------------------------- */ --aha-blue-950: #071B2E; --aha-blue-900: #0B2942; --aha-blue-800: #0F3457; --aha-blue-700: #14476F; --aha-blue-600: #1A598C; /* brand blue — from logo */ --aha-blue-500: #2A6FA6; --aha-blue-400: #4C8CBE; --aha-blue-300: #86B0CF; --aha-blue-200: #BBD3E4; --aha-blue-100: #DBE8F1; --aha-blue-50: #EFF5F9; /* COLOUR — Botanical green (health, growth, longevity, positive action) */ --aha-green-900: #17512A; --aha-green-800: #1F6B33; --aha-green-700: #2A833E; --aha-green-600: #359847; --aha-green-500: #49AE50; /* brand green — from logo */ --aha-green-400: #6FC173; --aha-green-300: #9AD69C; --aha-green-200: #C3E6C4; --aha-green-100: #DEF0DE; --aha-green-50: #F0F8EF; /* COLOUR — Soft sage + warm neutrals (the dominant surfaces) */ --aha-sage-500: #7E9880; --aha-sage-300: #B3C6B4; --aha-sage-100: #DCE6DA; --aha-sage-50: #EDF2EB; --aha-ivory: #FBF9F4; --aha-paper: #FFFFFF; --aha-surface: #F6F5F1; --aha-surface-2:#EFEEE8; /* COLOUR — Semantic surface roles */ --aha-bg: var(--aha-ivory); --aha-bg-raised: var(--aha-paper); --aha-bg-muted: var(--aha-surface); --aha-bg-tint-blue: var(--aha-blue-50); --aha-bg-tint-green: var(--aha-green-50); --aha-bg-deep: var(--aha-blue-900); --aha-bg-deepest: var(--aha-blue-950); /* COLOUR — Semantic text roles (all AA on their intended surface) */ --aha-ink: #0B2942; /* 15.0:1 on ivory */ --aha-ink-muted: #3D566E; /* 8.0:1 on ivory */ --aha-ink-subtle: #56708A; /* 4.9:1 on ivory — small caps + meta only */ --aha-ink-invert: #FFFFFF; --aha-ink-invert-muted:#C3D5E3; /* 10.1:1 on blue-900 */ /* COLOUR — Accents + lines */ --aha-accent: var(--aha-green-700); /* 4.9:1 on ivory — safe for text */ --aha-accent-bright: var(--aha-green-500); /* graphics + dark surfaces only */ --aha-link: var(--aha-blue-700); --aha-line: rgba(11, 41, 66, 0.12); --aha-line-strong: rgba(11, 41, 66, 0.22); --aha-line-invert: rgba(255, 255, 255, 0.16); --aha-focus: var(--aha-green-700); /* ---------------------------------------------------------------------- 2. TYPOGRAPHY ---------------------------------------------------------------------- */ --aha-font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --aha-font-body: "Inter", "Segoe UI", system-ui, sans-serif; --aha-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* Fluid scale — 480px floor → 1440px ceiling */ --aha-fs-display: clamp(2.75rem, 1.55rem + 4.80vw, 5rem); /* 44 → 80 */ --aha-fs-h1: clamp(2.375rem, 1.62rem + 3.00vw, 3.75rem); /* 38 → 60 */ --aha-fs-h2: clamp(2rem, 1.45rem + 2.20vw, 3.25rem); /* 32 → 52 */ --aha-fs-h3: clamp(1.5rem, 1.24rem + 1.05vw, 2.125rem); /* 24 → 34 */ --aha-fs-h4: clamp(1.25rem, 1.14rem + 0.45vw, 1.5rem); /* 20 → 24 */ --aha-fs-lead: clamp(1.125rem, 1.03rem + 0.38vw, 1.375rem); /* 18 → 22 */ --aha-fs-body: clamp(1.0625rem, 1.02rem + 0.19vw, 1.1875rem); /* 17 → 19 */ --aha-fs-sm: 0.9375rem; /* 15 */ --aha-fs-xs: 0.875rem; /* 14 */ --aha-fs-eyebrow: 0.8125rem; /* 13 — always uppercase + tracked */ /* Statistic display type — deliberately larger than headings */ --aha-fs-stat: clamp(3.25rem, 1.85rem + 5.60vw, 6.5rem); /* 52 → 104 */ --aha-fs-stat-sm: clamp(2.5rem, 1.80rem + 2.80vw, 3.75rem); /* 40 → 60 */ --aha-lh-tight: 1.06; --aha-lh-heading: 1.14; --aha-lh-snug: 1.32; --aha-lh-body: 1.68; --aha-lh-loose: 1.78; --aha-ls-display: -0.028em; --aha-ls-heading: -0.021em; --aha-ls-snug: -0.012em; --aha-ls-body: -0.005em; --aha-ls-eyebrow: 0.14em; --aha-fw-regular: 400; --aha-fw-medium: 500; --aha-fw-semibold: 600; --aha-fw-bold: 700; /* Comfortable measures — the audience includes older readers */ --aha-measure: 66ch; --aha-measure-narrow: 52ch; --aha-measure-wide: 78ch; /* ---------------------------------------------------------------------- 3. SPACE — 4px base, t-shirt scale ---------------------------------------------------------------------- */ --aha-space-3xs: 0.25rem; --aha-space-2xs: 0.5rem; --aha-space-xs: 0.75rem; --aha-space-sm: 1rem; --aha-space-md: 1.5rem; --aha-space-lg: 2rem; --aha-space-xl: 3rem; --aha-space-2xl: 4rem; --aha-space-3xl: 6rem; --aha-space-4xl: 8rem; /* Vertical rhythm between major sections */ --aha-section-y: clamp(4.5rem, 2.6rem + 6.4vw, 8.5rem); --aha-section-y-tight: clamp(3.25rem, 2.1rem + 3.6vw, 5.5rem); --aha-section-y-loose: clamp(6rem, 3.4rem + 8.4vw, 11rem); /* ---------------------------------------------------------------------- 4. LAYOUT ---------------------------------------------------------------------- */ --aha-container: 1240px; --aha-container-wide: 1440px; --aha-container-narrow: 780px; --aha-gutter: clamp(1.25rem, 0.7rem + 2.4vw, 3rem); --aha-grid-gap: clamp(1.5rem, 0.9rem + 1.9vw, 2.75rem); --aha-header-h: 76px; /* ---------------------------------------------------------------------- 5. RADIUS + ELEVATION — restrained; this is an institution, not an app ---------------------------------------------------------------------- */ --aha-radius-xs: 2px; --aha-radius-sm: 4px; --aha-radius-md: 8px; --aha-radius-lg: 14px; --aha-radius-pill: 999px; --aha-shadow-sm: 0 1px 2px rgba(11, 41, 66, 0.05), 0 2px 8px rgba(11, 41, 66, 0.04); --aha-shadow-md: 0 2px 4px rgba(11, 41, 66, 0.05), 0 12px 28px rgba(11, 41, 66, 0.08); --aha-shadow-lg: 0 4px 8px rgba(11, 41, 66, 0.06), 0 24px 60px rgba(11, 41, 66, 0.12); /* ---------------------------------------------------------------------- 6. MOTION — calm, confident, never bouncy ---------------------------------------------------------------------- */ --aha-ease-out: cubic-bezier(0.16, 1, 0.30, 1); --aha-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --aha-ease-soft: cubic-bezier(0.33, 0, 0.20, 1); --aha-dur-fast: 180ms; --aha-dur-base: 320ms; --aha-dur-slow: 620ms; --aha-dur-xslow: 1000ms; --aha-z-base: 1; --aha-z-sticky: 50; --aha-z-header: 100; --aha-z-overlay: 200; --aha-z-skiplink: 300; } /* Dark institutional surfaces re-map the semantic roles rather than forcing every component to know it is on a dark background. */ .aha-on-dark { --aha-ink: var(--aha-ink-invert); --aha-ink-muted: var(--aha-ink-invert-muted); --aha-ink-subtle: #9DB6C8; --aha-line: var(--aha-line-invert); --aha-line-strong: rgba(255, 255, 255, 0.28); --aha-accent: var(--aha-green-400); --aha-link: var(--aha-green-300); --aha-focus: var(--aha-green-300); --aha-bg: var(--aha-blue-900); color: var(--aha-ink); }