/* ===================== Midight — typography utilities. Source of truth: Figma node 4249:26498 (styleguide). - Font: Inter (loaded via Google Fonts in ). - Type system: Display/H1, H2, H3, Body Large, Body Regular, Body Small. - Mobile breakpoint: <= 767px. ===================== */ :root { /* Family */ --_typography---font--primary-family: "Inter", sans-serif; /* Weights */ --_typography---font--regular: 400; --_typography---font--medium: 500; --_typography---font--semibold: 600; /* Letter spacings */ --_typography---letter-spacing--tight: -0.02em; --_typography---letter-spacing--normal: 0em; /* Font sizes — DESKTOP defaults */ --_typography---font-size--h1: 3.75rem; /* 60px */ --_typography---font-size--h2: 3rem; /* 48px */ --_typography---font-size--h3: 1.875rem; /* 30px */ --_typography---font-size--text-large: 1.25rem; /* 20px */ --_typography---font-size--text-main: 1.125rem; /* 18px */ --_typography---font-size--text-small: 1rem; /* 16px */ /* Line heights — DESKTOP defaults */ --_typography---line-height--h1: 1.05; /* 105% */ --_typography---line-height--h2: 1.25; /* 60/48 */ --_typography---line-height--h3: 1.2667; /* 38/30 */ --_typography---line-height--text-large: 1.5; /* 30/20 */ --_typography---line-height--text-main: 1.5556; /* 28/18 */ --_typography---line-height--text-small: 1.5; /* 24/16 */ } /* Mobile overrides — match Figma "Mobile" column. */ @media (max-width: 767px) { :root { --_typography---font-size--h1: 2.25rem; /* 36px */ --_typography---font-size--h2: 1.875rem; /* 30px */ --_typography---font-size--h3: 1.5rem; /* 24px */ --_typography---font-size--text-large: 1rem; /* 16px */ --_typography---font-size--text-main: 1rem; /* 16px */ --_typography---font-size--text-small: 0.875rem; /* 14px */ --_typography---line-height--h2: 1.2667; /* 38/30 */ --_typography---line-height--h3: 1.3333; /* 32/24 */ --_typography---line-height--text-large: 1.5; /* 24/16 */ --_typography---line-height--text-main: 1.5; /* 24/16 */ --_typography---line-height--text-small: 1.4286; /* 20/14 */ } } /* ===================== .u-text-style-* utility classes — apply as combo on any text element. ===================== */ .u-text-style-h1, .u-text-style-h2, .u-text-style-h3, .u-text-style-large, .u-text-style-main, .u-text-style-small { font-family: var(--_typography---font--primary-family); font-size: var(--_text-style---font-size); line-height: var(--_text-style---line-height); font-weight: var(--_text-style---font-weight); letter-spacing: var(--_text-style---letter-spacing); text-wrap: var(--_text-style---text-wrap); display: flow-root; margin: 0; } .u-text-style-h1 { --_text-style---font-size: var(--_typography---font-size--h1); --_text-style---line-height: var(--_typography---line-height--h1); --_text-style---font-weight: var(--_typography---font--medium); --_text-style---letter-spacing: var(--_typography---letter-spacing--tight); --_text-style---text-wrap: balance; } .u-text-style-h2 { --_text-style---font-size: var(--_typography---font-size--h2); --_text-style---line-height: var(--_typography---line-height--h2); --_text-style---font-weight: var(--_typography---font--medium); --_text-style---letter-spacing: var(--_typography---letter-spacing--tight); --_text-style---text-wrap: balance; } .u-text-style-h3 { --_text-style---font-size: var(--_typography---font-size--h3); --_text-style---line-height: var(--_typography---line-height--h3); --_text-style---font-weight: var(--_typography---font--medium); --_text-style---letter-spacing: var(--_typography---letter-spacing--normal); --_text-style---text-wrap: balance; } .u-text-style-large { --_text-style---font-size: var(--_typography---font-size--text-large); --_text-style---line-height: var(--_typography---line-height--text-large); --_text-style---font-weight: var(--_typography---font--semibold); --_text-style---letter-spacing: var(--_typography---letter-spacing--normal); --_text-style---text-wrap: pretty; } .u-text-style-main { --_text-style---font-size: var(--_typography---font-size--text-main); --_text-style---line-height: var(--_typography---line-height--text-main); --_text-style---font-weight: var(--_typography---font--regular); --_text-style---letter-spacing: var(--_typography---letter-spacing--normal); --_text-style---text-wrap: pretty; } .u-text-style-small { --_text-style---font-size: var(--_typography---font-size--text-small); --_text-style---line-height: var(--_typography---line-height--text-small); --_text-style---font-weight: var(--_typography---font--regular); --_text-style---letter-spacing: var(--_typography---letter-spacing--normal); --_text-style---text-wrap: pretty; } /* Mobile — H1 and H2 switch to Semi Bold per Figma mobile column. */ @media (max-width: 767px) { .u-text-style-h1, .u-text-style-h2 { --_text-style---font-weight: var(--_typography---font--semibold); } } /* ===================== ATTRIBUTE-DRIVEN TEXT HELPERS — generic, classless. ===================== */ [data-text-color="grey"] { color: var(--color--lightest-grey, #B8B8B8); } [data-text-color="dim"] { opacity: 0.5; } [data-text-color="muted"] { opacity: 0.7; } /* Figma "70% white" body text */ [data-text-color="accent"] { color: var(--color--accent-orange, #F6A272); } [data-text-color="green"] { color: var(--color--main-green, #90F99C); } [data-text-break] { display: block; }