/* ======================================== Typography Styles Google Fonts + Type Scale Application ======================================== */ /* Font imports are in HTML for performance */ /* ---------------------------------------- Base Typography ---------------------------------------- */ body { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: 1.65; color: var(--color-text-primary); } /* ---------------------------------------- Display Font (Bebas Neue) - All caps by design ---------------------------------------- */ .font-display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; line-height: 0.95; } /* ---------------------------------------- Sub-heading Font (Barlow Condensed) ---------------------------------------- */ .font-sub { font-family: var(--font-sub); font-weight: 600; letter-spacing: 0.02em; } /* ---------------------------------------- Body Font (Source Sans 3) ---------------------------------------- */ .font-body { font-family: var(--font-body); font-weight: 400; } /* ---------------------------------------- Heading Hierarchy ---------------------------------------- */ /* H1 - Hero only */ h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-primary); } /* H2 - Section titles */ h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-5xl); line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-primary); } /* H3 - Card titles */ h3, .h3 { font-family: var(--font-sub); font-weight: 700; font-size: var(--text-2xl); line-height: 1.4; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-text-primary); } /* H4 - Sub-headings, roles */ h4, .h4 { font-family: var(--font-sub); font-weight: 600; font-size: var(--text-base); line-height: 1.5; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); } /* ---------------------------------------- Eyebrow / Label Text ---------------------------------------- */ .eyebrow { font-family: var(--font-sub); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); } /* ---------------------------------------- Body Text Sizes ---------------------------------------- */ .text-xs { font-size: var(--text-xs); line-height: 1.5; letter-spacing: 0.04em; } .text-sm { font-size: var(--text-sm); line-height: 1.5; letter-spacing: 0.02em; } .text-base { font-size: var(--text-base); line-height: 1.65; } .text-lg { font-size: var(--text-lg); line-height: 1.6; letter-spacing: -0.01em; } .text-xl { font-size: var(--text-xl); line-height: 1.5; letter-spacing: -0.01em; } /* ---------------------------------------- Text Colors ---------------------------------------- */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-primary); } /* ---------------------------------------- Paragraph Styles ---------------------------------------- */ p { color: var(--color-text-secondary); } /* ---------------------------------------- Selection ---------------------------------------- */ ::selection { background-color: var(--color-primary); color: var(--color-bg-base); }