/* ============================================================ KALVARO DESIGN SYSTEM: TOKENS Source of truth: Developer Web Pack v1.0 §2 (Brand and visual rules) Everything in the site references these. Never hard-code a colour. ============================================================ */ :root { /* ---------- 1. BRAND (confirmed) ---------- */ --k-navy: #0F1D2E; --k-emerald: #17B26A; --k-off-white: #F8FAFC; --k-white: #FFFFFF; --k-slate: #475467; --k-grey-light: #EAECF0; /* ---------- 2. DERIVED SCALES ---------- */ --k-navy-900: #0A1521; --k-navy-800: #0F1D2E; /* brand */ --k-navy-700: #16293F; --k-navy-600: #20374F; --k-emerald-800: #0A6E3F; /* text on emerald tints, and pressed fill */ --k-emerald-750: #0C7A45; /* text on white and off white */ --k-emerald-650: #12854F; /* interactive fill, white label passes 4.67:1 */ --k-emerald-700: #0E8A50; --k-emerald-600: #12995B; --k-emerald-550: #15A863; /* primary button hover */ --k-emerald-500: #17B26A; /* brand */ --k-emerald-100: #D6F5E5; --k-emerald-50: #ECFDF3; --k-slate-700: #344054; --k-slate-500: #475467; /* brand */ --k-slate-400: #667085; --k-grey-400: #7D8799; /* control boundaries, 3.62:1 on white */ --k-grey-300: #D0D5DD; --k-grey-200: #EAECF0; /* brand */ --k-grey-100: #F2F4F7; --k-grey-50: #F8FAFC; /* brand */ /* ---------- 3. SEMANTIC ---------- */ --color-bg: var(--k-grey-50); --color-surface: var(--k-white); --color-surface-inset: var(--k-grey-100); --color-surface-inverse: var(--k-navy-800); --color-surface-inverse-alt: var(--k-navy-700); --color-text: var(--k-navy-800); --color-text-secondary: var(--k-slate-500); --color-text-muted: var(--k-slate-400); --color-text-inverse: var(--k-white); --color-text-inverse-secondary: #A9B6C6; --color-border: var(--k-grey-200); --color-border-strong: var(--k-grey-300); /* The visible boundary of an interactive control. WCAG 1.4.11 requires 3:1 for this, which grey-300 (1.47:1) does not meet. */ --color-border-control: var(--k-grey-400); --color-border-inverse: var(--k-navy-600); /* Brand emerald versus action emerald. The Web Pack fixes #17B26A for primary actions and separately requires WCAG 2.2 AA. Those two instructions conflict: contrast is symmetric, so white on #17B26A and #17B26A on white are both 2.76:1 and both fail. The system therefore separates two roles that were previously one value. Brand emerald --k-emerald-500 #17B26A Unchanged. Used wherever it carries no text: the mark, illustration accents, icon badges, borders, and accent words on navy, where it reads 6.16:1 and passes on its own. Action emerald --k-emerald-650 #12854F The same hue at the same saturation, only deep enough to carry a white label. Used as the fill behind text. Decision recorded 16 August 2026, with the six options compared at /button-options.html. */ --color-action: var(--k-emerald-650); --color-action-hover: var(--k-emerald-750); --color-action-pressed: var(--k-emerald-800); --color-action-label: var(--k-white); --color-action-subtle: var(--k-emerald-50); /* Emerald as TEXT on light surfaces. emerald-700 measures only 4.40:1 on white, so the substitution has to go one step further. */ --color-action-text: var(--k-emerald-750); --color-action-text-tint: var(--k-emerald-800); /* on emerald-50 and -100 */ /* A two-colour ring: the navy half carries on light surfaces (17:1) and the white half carries on navy and on the emerald button. One value works everywhere, so no context needs a special case. */ --color-focus: var(--k-navy-800); --color-success: var(--k-emerald-700); --color-success-bg: var(--k-emerald-50); --color-warning: #B54708; --color-warning-bg: #FFFAEB; --color-error: #B42318; --color-error-bg: #FEF3F2; --color-error-border: #FDA29B; --color-info: #175CD3; --color-info-bg: #EFF8FF; /* ---------- 4. TYPOGRAPHY ---------- */ --font-sans: "Manrope", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --text-display: clamp(2.375rem, 1.35rem + 4.4vw, 3.75rem); /* 38 → 60 */ --text-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* 32 → 44 */ --text-h2: clamp(1.6875rem,1.35rem + 1.5vw, 2.125rem); /* 27 → 34 */ --text-h3: clamp(1.3125rem,1.19rem + 0.5vw, 1.5rem); /* 21 → 24 */ --text-h4: clamp(1.125rem, 1.1rem + 0.1vw, 1.1875rem); --text-lead: clamp(1.0625rem,1.0rem + 0.3vw, 1.1875rem); --text-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --text-small: 0.9375rem; --text-eyebrow: 0.8125rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --measure: 68ch; /* ---------- 5. SPACING (4px base) ---------- */ --space-1: 0.125rem; /* 2 */ --space-2: 0.25rem; /* 4 */ --space-3: 0.5rem; /* 8 */ --space-4: 0.75rem; /* 12 */ --space-5: 1rem; /* 16 */ --space-6: 1.25rem; /* 20 */ --space-7: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-9: 2.5rem; /* 40 */ --space-10: 3rem; /* 48 */ --space-11: 4rem; /* 64 */ --space-12: 5rem; /* 80 */ --space-13: 6rem; /* 96 */ --space-14: 8rem; /* 128 */ --section-y: clamp(4rem, 2.5rem + 6vw, 6rem); --container: 1200px; --gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem); /* ---------- 6. RADIUS ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* ---------- 7. ELEVATION ---------- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03); /* ---------- 8. MOTION ---------- */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --dur-micro: 150ms; --dur-panel: 250ms; /* ---------- 9. LAYERS ---------- */ --z-header: 100; --z-overlay: 200; --z-panel: 210; --z-toast: 300; /* ---------- 10. CONTROLS ---------- */ --control-h-sm: 36px; --control-h-md: 44px; /* default, meets the 44px touch target */ --control-h-lg: 52px; --focus-ring: 0 0 0 2px var(--k-white), 0 0 0 5px var(--k-navy-800); --focus-offset: 2px; } /* Breakpoints are documented here for reference; CSS uses them literally. sm < 640px single column, full-width CTAs, stacked hero (text first) md 640 to 1023 two-column grids, mobile nav persists lg 1024 to 1279 full desktop nav, three-column grids xl >= 1280 container capped at 1200px */