/* * Sagra+ — Marketing design tokens * Palette: "Vivido Avio" — mirrored 1:1 from the product source of truth * (docs/branding/tokens.css). No new HUES are introduced (per brand brief * §9 "Don't introduce off-palette hex values"); only marketing layout-scale * tokens (display type, container, motion) are added on top. * * Dual-theme via [data-theme="light|dark"] on , echoing the product. */ :root, :root[data-theme='light'] { /* Surfaces */ --bg: #EEF5FC; --bg-deep: #DCE6F3; --surface: #FFFFFF; --surface-2: #F5EBCB; --surface-3: #F0D98A; /* Borders */ --border: #E8C978; --border-strong: #5B6B82; /* Text */ --text: #15296E; --text-muted: #4A5777; --text-faint: #8BA0AB; /* Primary — blu avio */ --primary: #1E78B8; --primary-hover: #15296E; --primary-soft: #ADCFE7; --primary-ring: rgb(30 120 184 / 0.32); /* Secondary — oro antico */ --secondary: #D4A017; --secondary-soft: #F5EBCB; /* Status */ --success: #2E8D55; --success-soft: #CDDFD6; --warning: #E6B320; --warning-soft: #FDECBD; --danger: #CC1F3D; --danger-hover: #9B1C3B; --danger-soft: #FACCD4; --info: #4A9BD1; --info-soft: #C9E3F5; /* Overlay */ --overlay: rgb(0 0 0 / 0.40); /* Shadows — pre-tuned per theme; never hard-code */ --shadow-xs: 0 1px 2px rgb(21 41 110 / 0.06); --shadow-sm: 0 2px 6px rgb(21 41 110 / 0.08), 0 1px 2px rgb(21 41 110 / 0.05); --shadow-md: 0 6px 14px -4px rgb(21 41 110 / 0.12), 0 2px 6px -2px rgb(21 41 110 / 0.06); --shadow-lg: 0 18px 36px -10px rgb(21 41 110 / 0.20), 0 6px 12px -4px rgb(21 41 110 / 0.10); --shadow-xl: 0 32px 70px -18px rgb(21 41 110 / 0.28), 0 12px 24px -10px rgb(21 41 110 / 0.14); /* Hero ambience — built only from palette tints */ --halo-1: rgb(173 207 231 / 0.55); /* primary-soft */ --halo-2: rgb(240 217 138 / 0.50); /* surface-3 / sand */ --grid-line: rgb(91 107 130 / 0.10); --color-scheme: light; } :root[data-theme='dark'] { /* Surfaces */ --bg: #0B1638; --bg-deep: #060E28; --surface: #15296E; --surface-2: #1D3684; --surface-3: #27479A; /* Borders */ --border: #213D8A; --border-strong: #3A5AB3; /* Text */ --text: #EBF3FD; --text-muted: #8BA0AB; --text-faint: #6E7E96; /* Primary */ --primary: #6FB6EA; --primary-hover: #ADCFE7; --primary-soft: #17407A; --primary-ring: rgb(111 182 234 / 0.35); /* Secondary */ --secondary: #F5C842; --secondary-soft: #4D3A0C; /* Status */ --success: #4FC07B; --success-soft: #103524; --warning: #F5C842; --warning-soft: #4D3A0C; --danger: #EB4965; --danger-hover: #CC1F3D; --danger-soft: #4A131F; --info: #8BCEF2; --info-soft: #123050; /* Overlay */ --overlay: rgb(0 0 0 / 0.55); /* Shadows */ --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.50); --shadow-md: 0 8px 18px rgb(0 0 0 / 0.50); --shadow-lg: 0 22px 44px rgb(0 0 0 / 0.60); --shadow-xl: 0 36px 80px rgb(0 0 0 / 0.66); --halo-1: rgb(111 182 234 / 0.20); --halo-2: rgb(245 200 66 / 0.14); --grid-line: rgb(173 207 231 / 0.06); --color-scheme: dark; } /* Theme-agnostic tokens */ :root { /* Logo brand glyph colors (sage check echo) */ --logo-gold: #D4A017; --logo-sage: #2E8D55; /* Radius — product scale */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 30px; --radius-full: 999px; /* Spacing (4px base) — product scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Type families — geometric sans, deliberately NOT Inter/Roboto */ --font-display: 'Space Grotesk', 'Trebuchet MS', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid marketing type scale (clamp: min, vw, max) */ --fs-display: clamp(2.75rem, 1.6rem + 5.4vw, 5.75rem); --fs-h1: clamp(2.1rem, 1.4rem + 3.1vw, 3.5rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.9vw, 2.5rem); --fs-h3: clamp(1.2rem, 1.02rem + 0.8vw, 1.6rem); --fs-lead: clamp(1.05rem, 0.96rem + 0.45vw, 1.3rem); --fs-body: 1.0625rem; /* 17px marketing body */ --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-cap: 0.6875rem; /* 11px caption / ALL CAPS tags */ /* Layout */ --container: 1200px; --container-narrow: 880px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur: 240ms; --dur-slow: 520ms; }