/* ============================================ PENALTYSHIELD DESIGN TOKENS Single source of truth for site-wide design. Page-specific styles layer on top of these. ============================================ */ :root { /* ─── BRAND COLORS ─── */ --navy: #1c3557; --navy-dark: #142640; --navy-light: #24426b; --teal: #2d8a6c; --teal-light: #38a882; --teal-pale: #e8f5f0; /* ─── SURFACE / NEUTRAL ─── */ --surface: #f8fafb; --white: #ffffff; --border: #e2e8ef; /* ─── SEMANTIC ─── */ --red: #dc2626; --gold: #d97706; --green: #059669; /* ─── TEXT (SCREEN) ─── */ --text-body: #374151; --text-muted: #6b7280; /* ─── TEXT (PRINT) ─── */ /* Used by lead-magnet view.html and any print-styled context. Darker for print contrast on physical paper. */ --text-print: #1a2332; --text-muted-print: #4a5568; /* ─── SHADOWS ─── */ --shadow-sm: 0 1px 3px rgba(28,53,87,.08); --shadow-md: 0 4px 16px rgba(28,53,87,.12); --shadow-lg: 0 12px 40px rgba(28,53,87,.16); /* ─── RADII ─── */ --radius-lg: 20px; --radius-md: 12px; --radius-sm: 8px; --radius-pill: 100px; } /* ============================================ GLOBAL RESET ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================ BASE TYPOGRAPHY Imports Playfair Display + Epilogue at the page level (in the template, not here). ============================================ */ body { font-family: 'Epilogue', sans-serif; color: var(--text-body); background: var(--white); line-height: 1.6; font-size: 16px; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.2; color: var(--navy); }