/* ============================================================ MRCO Advocates — Design Tokens Source: Docs/02-design-tokens.md All visual values live here as CSS custom properties. No magic numbers in component code — always reference tokens. ============================================================ */ :root { /* === Primary Brand === */ --color-navy: #16294D; /* Wordmark, headings, primary buttons */ --color-navy-dark: #0E1B33; /* Hero overlays, footers, deep surfaces */ --color-navy-mid: #234277; /* Hover state for navy buttons; secondary headings */ --color-navy-soft: #E7ECF6; /* Muted navy tints for callouts and selected states */ /* === Secondary Accent === */ --color-gold: #B08D3F; /* Underlines, dividers, the gold rule */ --color-gold-dark: #8E6F2C; /* Hover state for gold accents; emphasis text */ --color-gold-light: #D4B26B; /* Section accents on light surfaces */ /* === Neutrals === */ --color-cream: #F6F7F4; /* Default page background */ --color-ink: #1D2430; /* Body text on light surfaces */ --color-slate: #596274; /* Secondary body text, captions */ --color-mist: #DDE2EA; /* Borders, hairline dividers */ --color-white: #FFFFFF; /* Card surfaces, form fields */ /* === State Colours === */ --color-success: #1E7A4D; /* Form success states */ --color-warning: #B7791F; /* Soft warnings, advisory text */ --color-error: #B42318; /* Form error states */ /* ========================================================= TYPOGRAPHY ========================================================= */ /* === Font Families === */ --font-display: 'Cormorant Garamond', 'Lora', Georgia, serif; --font-body: 'Inter', 'Source Sans 3', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* === Type Scale === */ --text-display: 4.35rem; /* Home hero only */ --text-h1: 3.00rem; /* Page titles */ --text-h2: 2.00rem; /* 32px — Section headings */ --text-h3: 1.50rem; /* 24px — Subsection headings */ --text-h4: 1.25rem; /* 20px — Card titles */ --text-body-lg: 1.125rem; /* 18px — Lead paragraphs */ --text-body: 1.000rem; /* 16px — Default body text */ --text-small: 0.875rem; /* 14px — Captions, footnotes */ --text-xs: 0.75rem; /* 12px — Legal microcopy in footer */ /* === Line Heights === */ --lh-display: 1.05; --lh-h1: 1.15; --lh-h2: 1.20; --lh-h3: 1.30; --lh-h4: 1.35; --lh-body-lg: 1.65; --lh-body: 1.65; --lh-small: 1.55; --lh-xs: 1.50; /* === Font Weights === */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* === Letter Spacing — Premium Typography === */ --ls-display: 0; /* Keep display type crisp and predictable */ --ls-heading: 0; /* Keep headings readable across widths */ --ls-nav: 0.025em; /* Open for nav items */ --ls-eyebrow: 0.10em; /* Wide for small-caps eyebrow text */ --ls-button: 0.03em; /* Slight open for button text */ /* ========================================================= SPACING SCALE — 4px anchor ========================================================= */ --space-0: 0; --space-0-5: 2px; --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; /* ========================================================= RADIUS, SHADOW, BORDER ========================================================= */ /* === Border Radius === */ --radius-sm: 4px; /* Form inputs, small chips */ --radius-md: 8px; /* Default for buttons, cards */ --radius-lg: 12px; /* Hero cards, image frames */ --radius-xl: 16px; /* Feature sections, large containers */ --radius-pill: 9999px; /* Tags, pills */ /* === Box Shadows — Refined for Depth === */ --shadow-sm: 0 1px 3px rgba(22, 41, 77, 0.04), 0 1px 2px rgba(22, 41, 77, 0.06); --shadow-md: 0 4px 6px rgba(22, 41, 77, 0.04), 0 10px 20px rgba(22, 41, 77, 0.06); --shadow-lg: 0 16px 48px rgba(22, 41, 77, 0.10), 0 8px 16px rgba(22, 41, 77, 0.06); --shadow-xl: 0 24px 64px rgba(22, 41, 77, 0.14), 0 12px 24px rgba(22, 41, 77, 0.08); /* Card-specific shadows */ --shadow-card: 0 1px 2px rgba(22, 41, 77, 0.05), 0 12px 32px rgba(22, 41, 77, 0.05); --shadow-card-hover: 0 18px 46px rgba(22, 41, 77, 0.13), 0 7px 18px rgba(22, 41, 77, 0.07); /* Header shadow */ --shadow-header: 0 4px 24px rgba(22, 41, 77, 0.06), 0 1px 3px rgba(22, 41, 77, 0.04); /* Gold glow for CTAs */ --shadow-gold-glow: 0 4px 16px rgba(176, 141, 63, 0.25), 0 2px 6px rgba(176, 141, 63, 0.15); /* === Borders === */ --border-hairline: 1px solid var(--color-mist); /* Default border on cards/inputs */ --border-rule: 1px solid var(--color-gold-light); /* Decorative section rules */ /* ========================================================= LAYOUT ========================================================= */ --container-max: 1200px; --container-pad: var(--space-6); /* 24px gutter on each side */ /* Header heights */ --topbar-h: 36px; --header-h-desktop: 76px; --header-h-mobile: 64px; --header-total-desktop: calc(var(--topbar-h) + var(--header-h-desktop)); /* ========================================================= TRANSITIONS — Premium Easing ========================================================= */ --ease-default: 220ms ease-out; --ease-page: 120ms ease-out; --ease-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1); --ease-premium: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* Smooth deceleration */ --ease-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy spring */ --ease-in-out: 300ms cubic-bezier(0.45, 0, 0.55, 1); /* ========================================================= ANIMATION ========================================================= */ --reveal-duration: 600ms; --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --reveal-distance: 24px; --stagger-step: 80ms; /* Glass / frosted surfaces */ --glass-bg: rgba(255, 255, 255, 0.82); --glass-blur: 16px; --glass-border: 1px solid rgba(229, 231, 235, 0.45); /* Gradients for section transitions */ --gradient-section-divider: linear-gradient( 180deg, transparent 0%, rgba(22, 41, 77, 0.02) 50%, transparent 100% ); /* Decorative pattern overlay */ --pattern-dots: radial-gradient( rgba(176, 141, 63, 0.04) 1px, transparent 1px ); --pattern-dots-size: 28px 28px; }