/* ================================================================ theme.css — single source of design tokens for the site CSS. Mirrors src/app/theme.ts 1:1. If a color or surface changes there, it changes here and nowhere else — main.css (and anything else that loads after this file) just consumes these variables. ================================================================ */ /* ─── Fonts ──────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@600&display=swap'); @font-face { font-family: 'Articulat CF'; src: url('/media/ArticulatCF-Bold.ttf') format('truetype'); font-weight: 700 800 900; font-style: normal; } :root { /* ─── Brand tokens — mirrors theme.ts B, NAVY, DARK, CHAR, SAND, CREAM, MUTED ── */ --B: #1A52A8; --DARK: #0A0B14; --NAVY: #0B1C4A; --CHAR: #1E2235; --SAND: #C4AB6C; --CREAM: #F7F5EF; --MUTED: #6B6E85; --WHITE: #FFFFFF; /* ─── Section surfaces — mirrors theme.ts SURFACE ───────────────────────── base = --WHITE, alt = --CREAM, hero = --DARK (already covered above) */ --surface-panel: #053770; --surface-cta: #00519F; --surface-footer: #1B1C24; /* ─── Foreground on light surfaces — mirrors theme.ts ON_LIGHT ──────────── pair with base/alt. heading = --DARK, muted = --MUTED (already covered) */ --on-light-body: #3D4152; --on-light-border: rgba(10,11,20,.12); --on-light-hairline: rgba(10,11,20,.08); --on-light-wash: rgba(10,11,20,.04); /* ─── Foreground on dark surfaces — mirrors theme.ts ON_DARK ────────────── pair with panel/cta/hero/footer. heading = --WHITE (already covered) */ --on-dark-body: rgba(255,255,255,.72); --on-dark-muted: rgba(255,255,255,.5); --on-dark-border: rgba(255,255,255,.12); --on-dark-hairline: rgba(255,255,255,.07); --on-dark-wash: rgba(255,255,255,.05); /* ─── Extended shades — NOT in theme.ts yet ─────────────────────────────── These repeat 3+ times across main.css/service-*.css but ON_LIGHT/ON_DARK in theme.ts only exports the named roles above. Named by opacity, not role, since we don't have a React-side name to mirror. If theme.ts ever formalizes one of these (gives it a role like "disabled" or "faint"), rename it here to match and keep it grouped with the block above — don't leave it stranded down here. */ --on-light-03: rgba(10,11,20,.03); --on-light-05: rgba(10,11,20,.05); --on-light-06: rgba(10,11,20,.06); --on-light-07: rgba(10,11,20,.07); --on-light-10: rgba(10,11,20,.1); --on-light-15: rgba(10,11,20,.15); --on-light-20: rgba(10,11,20,.2); --on-light-25: rgba(10,11,20,.25); --on-light-30: rgba(10,11,20,.3); --on-light-35: rgba(10,11,20,.35); --on-light-40: rgba(10,11,20,.4); --on-light-45: rgba(10,11,20,.45); --on-light-50: rgba(10,11,20,.5); --on-light-55: rgba(10,11,20,.55); --on-light-60: rgba(10,11,20,.6); --on-light-65: rgba(10,11,20,.65); --on-light-70: rgba(10,11,20,.7); --on-light-80: rgba(10,11,20,.8); --on-light-82: rgba(10,11,20,.82); --on-light-85: rgba(10,11,20,.85); --on-light-90: rgba(10,11,20,.9); --on-light-92: rgba(10,11,20,.92); --on-light-95: rgba(10,11,20,.95); --on-dark-03: rgba(255,255,255,.03); --on-dark-04: rgba(255,255,255,.04); --on-dark-06: rgba(255,255,255,.06); --on-dark-08: rgba(255,255,255,.08); --on-dark-10: rgba(255,255,255,.1); --on-dark-15: rgba(255,255,255,.15); --on-dark-18: rgba(255,255,255,.18); --on-dark-20: rgba(255,255,255,.2); --on-dark-25: rgba(255,255,255,.25); --on-dark-30: rgba(255,255,255,.3); --on-dark-35: rgba(255,255,255,.35); --on-dark-40: rgba(255,255,255,.4); --on-dark-45: rgba(255,255,255,.45); --on-dark-55: rgba(255,255,255,.55); --on-dark-60: rgba(255,255,255,.6); --on-dark-65: rgba(255,255,255,.65); --on-dark-70: rgba(255,255,255,.7); --on-dark-75: rgba(255,255,255,.75); --on-dark-85: rgba(255,255,255,.85); /* Brand blue at partial alpha — --B (26,82,168) used as a tint rather than a solid: category badges over photography, quote marks, card hover borders. */ --B-25: rgba(26,82,168,.25); --B-35: rgba(26,82,168,.35); --B-85: rgba(26,82,168,.85); /* Navy at partial alpha — --NAVY (11,28,74) as a tint: Referral Program's step-card borders. */ --NAVY-14: rgba(11,28,74,.14); /* ─── Fonts — mirrors GuiaEstilosPage.tsx CF/INTER constants ────────────── Heading font only ships bold weights (700/800/900) — see @font-face above. There is no light/regular Articulat CF file. */ --font-heading: 'Articulat CF', sans-serif; --font-body: 'Inter', sans-serif; /* ─── Spacing scale — mirrors GuiaEstilosPage.tsx "Espaciado" section ───── Applies to padding/margin/gap. Not used for width/height/border-radius/ position offsets — those aren't part of this scale even when the number happens to match. */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; } /* ================================================================ Typography reference — mirrors GuiaEstilosPage.tsx "Tipografía" sections. NOT enforced as CSS variables: existing headings in main.css use per-component clamp() sizing rather than these six fixed sizes, and forcing that into rigid tokens would misrepresent real, intentional variation. Use this as the spec when writing NEW markup — font-family var(--font-heading|--font-body), plus the values below. Titles (Articulat CF, var(--font-heading)): H1 / Hero — Bold · clamp to 72px max · tracking -1px · line-height 1.05 H2 / Section — Bold · clamp to 56px max · tracking -1px · line-height 1.05 H3 / Card — Bold · clamp to 40px max · tracking -0.5px · line-height 1.1 H4 / Subtitle — Bold · 24px max · line-height 1.3 Eyebrow/Label — Bold · 11px · tracking 4px · uppercase Body (Inter, var(--font-body)): Body Large — Regular · 18px · line-height 1.7 Body Default — Regular · 16px · line-height 1.65 Body Small — Regular · 14px · line-height 1.6 Caption/Meta — Regular · 12px Micro — Regular · 10–11px · tracking 1.5px · uppercase Stat Number — Articulat CF Black (800) · 40px ================================================================ */