/* ================================================================ 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: #00509F; --DARK: #3E3C49; --NAVY: #003771; --CHAR: #4D4C58; --SAND: #D8CBA5; --SAND-DARK: #8A7238; /* darker gold — award-badge text, sits on --SAND-18/-40 tinted backgrounds. Not covered by the new palette — re-check contrast against the lighter --SAND */ --CREAM: #FAF9F4; --MUTED: rgba(62,60,73,.55); --SKY: #A1CDF1; /* new: light blue accent for active/selected states, not yet wired to any component */ --WHITE: #FFFFFF; /* ─── Section surfaces — mirrors theme.ts SURFACE ───────────────────────── base = --WHITE, alt = --CREAM, hero = --DARK (already covered above) */ --surface-panel: var(--NAVY); --surface-cta: var(--B); --surface-footer: var(--DARK); /* ─── Foreground on light surfaces — mirrors theme.ts ON_LIGHT ──────────── pair with base/alt. heading = --DARK, muted = --MUTED (already covered) */ --on-light-body: rgba(62,60,73,.80); --on-light-border: rgba(62,60,73,.14); --on-light-hairline: rgba(62,60,73,.09); --on-light-wash: rgba(62,60,73,.05); /* ─── 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,.74); --on-dark-muted: rgba(255,255,255,.55); --on-dark-border: rgba(255,255,255,.14); --on-dark-hairline: rgba(255,255,255,.08); --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(62,60,73,.03); --on-light-05: rgba(62,60,73,.05); --on-light-06: rgba(62,60,73,.06); --on-light-07: rgba(62,60,73,.07); --on-light-10: rgba(62,60,73,.1); --on-light-15: rgba(62,60,73,.15); --on-light-20: rgba(62,60,73,.2); --on-light-25: rgba(62,60,73,.25); --on-light-30: rgba(62,60,73,.3); --on-light-35: rgba(62,60,73,.35); --on-light-40: rgba(62,60,73,.4); --on-light-45: rgba(62,60,73,.45); --on-light-50: rgba(62,60,73,.5); --on-light-55: rgba(62,60,73,.55); --on-light-60: rgba(62,60,73,.6); --on-light-65: rgba(62,60,73,.65); --on-light-70: rgba(62,60,73,.7); --on-light-80: rgba(62,60,73,.8); --on-light-82: rgba(62,60,73,.82); --on-light-85: rgba(62,60,73,.85); --on-light-90: rgba(62,60,73,.9); --on-light-92: rgba(62,60,73,.92); --on-light-95: rgba(62,60,73,.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 (0,80,159) used as a tint rather than a solid: category badges over photography, quote marks, card hover borders. */ --B-12: rgba(0,80,159,.12); --B-25: rgba(0,80,159,.25); --B-35: rgba(0,80,159,.35); --B-85: rgba(0,80,159,.85); /* Navy at partial alpha — --NAVY (0,55,113) as a tint: Referral Program's step-card borders. */ --NAVY-14: rgba(0,55,113,.14); /* Sand at partial alpha — --SAND (216,203,165) as a tint: Certifications' award-badge fill/border. */ --SAND-18: rgba(216,203,165,.18); --SAND-40: rgba(216,203,165,.4); /* ─── 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 ================================================================ */