/* Design tokens — colours, type scale and spacing lifted from the source canvas. Fluid values use clamp() so the desktop design degrades continuously to mobile instead of stepping at breakpoints. */ :root { /* Surfaces */ --bg: #0d0c0a; --surface-1: #141312; --surface-2: #161514; --surface-3: #161116; --border: rgba(255, 255, 255, 0.08); --border-soft: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.15); /* Text */ --text: #ffffff; --text-1: #e5e5e5; --text-2: #c9c9c9; --text-3: #adadad; --text-4: #999999; --text-5: #8f8f8f; /* Link accent (home + most case studies) */ --link: #4db8ff; --link-hover: #7ecbff; /* Per-page accent — overridden on by each case study */ --accent: #4db8ff; --accent-soft: #7ecbff; /* Fonts */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type scale */ --fs-hero: clamp(2.125rem, 7.4vw, 4.5rem); /* 72px */ --fs-display: clamp(2.25rem, 7.6vw, 4rem); /* 64px */ --fs-product: clamp(1.875rem, 6.4vw, 3.25rem); /* 52px */ --fs-panel: clamp(1.625rem, 4.6vw, 2.5rem); /* 40px */ --fs-section: clamp(1.5rem, 4vw, 2rem); /* 32px */ --fs-quote: clamp(1.375rem, 3.6vw, 2.5rem); /* 40px */ --fs-stat: clamp(1.75rem, 4.4vw, 2.25rem); /* 36px */ --fs-lede: clamp(1rem, 1.6vw, 1.125rem); /* 18px */ --fs-body: 0.9375rem; /* 15px */ --fs-sm: 0.875rem; /* 14px */ --fs-xs: 0.8125rem; /* 13px */ --fs-2xs: 0.75rem; /* 12px */ /* Spacing */ --gutter: clamp(1.25rem, 5vw, 3rem); /* 48px page inset */ --section-y: clamp(2.5rem, 6vw, 3.75rem); /* 60px block rhythm */ --section-y-lg: clamp(3.5rem, 9vw, 6.25rem); /* 100px home sections */ --panel-p: clamp(1.75rem, 5vw, 3.5rem); /* 56px about panel */ --card-p: clamp(1.25rem, 2.5vw, 1.5rem); /* 24px card padding */ --gap: clamp(1rem, 2vw, 1.5rem); /* 24px grid gap */ --gap-sm: 1rem; /* 16px */ /* Radii */ --r-lg: 24px; --r-md: 20px; --r-sm: 16px; --r-xs: 12px; --r-pill: 100px; /* Elevation */ --shadow-screen: 0 20px 50px rgba(0, 0, 0, 0.4); --shadow-phone: 0 14px 30px rgba(0, 0, 0, 0.5); /* Chrome */ --nav-h: 65px; }