/* ============================================================ DESIGN TOKENS — Single source of truth Update values here and they reflect everywhere on the site ============================================================ */ :root { /* ─── COLORS ─────────────────────────────────────── */ --color-bg-primary: #272932; /* Main dark grey background */ --color-bg-secondary: #272932; /* Slightly lighter teal for cards/sections */ --color-bg-card: #272932; /* Card backgrounds */ --color-bg-nav: transparent; /* Navbar background */ --color-text-primary: #ffffff; /* Main white text */ --color-text-secondary: #a8c4bc; /* Muted/secondary text */ --color-text-muted: #6b9e93; /* Very muted text */ --color-accent-primary: #B0E4CC; /* Yellow CTA / accent */ --color-accent-hover: rgb(105, 188, 160); /* Yellow hover state */ --color-accent-secondary: #4a9e8e; /* Teal accent */ --color-accent-teal-wash: rgba(74, 158, 142, 0.08); /* Teal accent at low opacity — used for highlight blocks */ --color-border: rgba(255, 255, 255, 0.08); /* Subtle borders */ --color-border-hover: rgba(255, 255, 255, 0.18); --color-overlay: rgba(13, 46, 41, 0.85); /* Dark overlay */ /* ─── LIGHT SECTION COLORS (Work / Case Studies) ── */ --color-bg-light: #fbfbfb; /* Outer section frame bg */ --color-bg-warm: #f0ede4; /* Mobile fan section--color-bg-light) bg — warm off-white */ --color-bg-light-row: #F7F7F7; /* Row container + tag pill bg */ --color-bg-white: #ffffff; /* Card bg */ --color-cs-page-bg: #ffffff; /* Case study page background — light neutral grey */ --color-cs-section-a: #EEEEEE; /* Case study alternating section — light grey */ --color-cs-section-b: #B9E3C6; /* Case study alternating section — soft green */ --color-text-on-light: #1a1a1a; /* Primary text on light — 16.7:1 ✅ */ --color-text-on-light-body: #4a4a4a; /* Body text on light — 9.7:1 ✅ */ --color-text-on-light-muted: #6b6b6b; /* Muted text on light — 5.7:1 ✅ */ --color-tag-border-light: rgba(0, 0, 0, 0.10); --color-border-light: rgba(0, 0, 0, 0.08); --color-stat-positive: #2a8a4a; /* Green stat arrow — 4.6:1 ✅ */ --color-card-border: #0D2E29; /* Asymmetric card border — teal on cream */ /* ─── TYPOGRAPHY ─────────────────────────────────── */ --font-display: 'Handlee', cursive; /* Hero headings */ --font-header: 'Montserrat', sans-serif; /* Header font */ --font-body: 'Inter', sans-serif; /* All other text */ --font-cs-body: 'Geist', sans-serif; /* Case study body text */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 4.5rem; /* 72px */ --text-hero: 5.5rem; /* 88px — Hero name */ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-loose: 1.7; --leading-heading: 1.1; /* 110% — case study headings */ --color-cs-text: #154257; /* Case study body text colour */ --color-cs-heading: #225d79; /*heading color*/ --color-cs-section-title: #202020; /* Research need labels / section title caps */ --leading-body: 1.5; /* 150% — case study body text */ /* ─── CASE STUDY TYPOGRAPHY EXPERIMENT (cogent test) ─── */ --font-cs-mono: 'Geist Mono', monospace; /* eyebrows, meta labels */ --font-cs-serif: tiemposText, serif; /* section titles, need labels */ --color-cs-ink: rgb(50, 64, 79); /* #32404F — heading ink */ --color-cs-ink-muted: rgba(50, 64, 79, 0.584); /* body / label ink */ --text-cs-sm: 15px; /* mono + body size */ --leading-cs-sm: 22.5px; /* 15px × 1.5 */ --text-cs-subhead: 21.2px; /* serif card title / need label */ --leading-cs-subhead: 31.8px; /* 21.2px × 1.5 */ --text-cs-title: 32px; /* serif section h2 */ --leading-cs-title: 38.4px; /* 32px × 1.2 */ --cs-block-gap: var(--space-3); /* 12px — consistent gap between adjacent text blocks */ /* ─── SPACING ────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ─── BORDER RADIUS ──────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 40px; /* Row containers */ --radius-4xl: 60px; /* Outer section frames */ --radius-full: 9999px; /* ─── SHADOWS ────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3); --shadow-lg: 0 8px 32px rgba(0,0,0,0.4); --shadow-xl: 0 16px 64px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(232, 197, 71, 0.15); /* Yellow glow */ /* ─── TRANSITIONS ────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── LAYOUT ─────────────────────────────────────── */ --container-max: 1280px; --container-padding: var(--space-8); --nav-height: 80px; --section-padding: var(--space-24); /* ─── Z-INDEX ─────────────────────────────────────── */ --z-base: 1; --z-above: 10; --z-nav: 100; --z-modal: 1000; --z-toast: 9999; } /* ─── RESPONSIVE TOKEN OVERRIDES ──────────────────── */ @media (max-width: 768px) { :root { --text-hero: 3.5rem; --text-5xl: 3rem; --text-4xl: 2.25rem; --container-padding: var(--space-5); --section-padding: var(--space-16); --nav-height: 64px; } } @media (max-width: 480px) { :root { --text-hero: 2.75rem; --text-5xl: 2.25rem; --text-4xl: 1.875rem; --container-padding: var(--space-4); } }