/* ========================================================================== VARIABLES.CSS Design tokens for the Vertex template. Change colours, type and spacing here to re-skin the entire site. ========================================================================== */ :root { /* ---- Brand colours --------------------------------------------------- Replace these five values to re-theme the whole site. Every other colour in the system is derived from these. */ --color-deep-forest: #132A24; --color-stone: #CFC8BC; --color-cream: #F8F4EE; --color-graphite: #232629; --color-accent-green: #32965D; /* ---- Functional colour roles ---------------------------------------- */ --color-bg: var(--color-cream); --color-bg-alt: #EFE9DF; --color-surface: #FFFFFF; --color-text: var(--color-graphite); --color-text-muted: #5B6259; --color-text-on-dark: var(--color-cream); --color-text-on-dark-muted: rgba(248, 244, 238, 0.7); --color-border: rgba(35, 38, 41, 0.12); --color-border-on-dark: rgba(248, 244, 238, 0.18); --color-accent: var(--color-accent-green); --color-overlay-dark: rgba(19, 42, 36, 0.55); /* ---- Typography ------------------------------------------------------- Heading font is General Sans (local files in /assets/fonts). Body font is Inter, loaded via Google Fonts in the . */ --font-heading: 'General Sans', 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --fs-h1: clamp(2.6rem, 5vw + 1rem, 5.6rem); --fs-h2: clamp(2.1rem, 3vw + 1rem, 3.4rem); --fs-h3: clamp(1.5rem, 1.4vw + 1rem, 2rem); --fs-h4: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); --fs-body-lg: 1.15rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-eyebrow: 0.8rem; --lh-heading: 1.08; --lh-body: 1.7; /* ---- Spacing scale ---------------------------------------------------- 8px base rhythm. Use these instead of one-off values. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* ---- Layout ------------------------------------------------------- */ --container-max: 1360px; --container-narrow: 760px; --container-padding: clamp(1.5rem, 5vw, 4rem); --header-height: 92px; /* ---- Motion ------------------------------------------------------- */ --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 220ms; --duration-base: 500ms; --duration-slow: 900ms; /* ---- Elevation ------------------------------------------------------ Kept deliberately subtle — no giant drop shadows. */ --shadow-sm: 0 1px 2px rgba(19, 42, 36, 0.06); --shadow-md: 0 12px 32px -16px rgba(19, 42, 36, 0.18); /* ---- Radii ----------------------------------------------------------- Small and restrained on purpose — this template avoids the "everything is a rounded floating card" look. */ --radius-sm: 2px; --radius-md: 4px; }