/* COPY of otl-x-web/theme/assets/css/type.css. Keep the two in sync (docs/design-system.md in otl-x-web). */
/* Open Theory Labs type system.
 * Geist for everything, Geist Mono for labels, numbers and code (self-hosted, SIL Open Font License,
 * see ../fonts/GEIST-OFL.txt). Text styles follow the Geist design system's naming: Heading, Button,
 * Label and Copy, each by size, with a Mono variant for labels and inline code. Modelled on
 * vercel.com/geist/typography; sizes are fluid so they scale down to phones.
 *
 * Use a class in markup (class="t-heading-48") or the tokens in CSS:
 *     font: var(--t-heading-48); letter-spacing: var(--ls-heading-48);
 * Every text style has a --t-* (font shorthand) and, where it needs one, a --ls-* (letter-spacing).
 * Nested <strong> inside any style is the "Strong" modifier. Do not set font-size, font-family or
 * font-weight directly in components. Docs: docs/design-system.md.
 */

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist-mono-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Families. Ghost's brand font settings, if ever set, take precedence. ---- */
    --font-sans: var(--gh-font-body, "Geist"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: var(--gh-font-heading, "Geist"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --otl-font-sans: var(--font-sans);
    --otl-font-heading: var(--font-heading);
    --otl-font-mono: var(--font-mono);

    /* ---- Display: the home hero only ---- */
    --t-display: 600 clamp(2.75rem, 7vw, 6.5rem)/0.95 var(--font-heading);   --ls-display: -0.035em;

    /* ---- Headings: introduce pages and sections ---- */
    --t-heading-72: 500 clamp(2.5rem, 6.4vw, 4.5rem)/1 var(--font-heading);     --ls-heading-72: -0.04em;
    --t-heading-64: 500 clamp(2.25rem, 5.6vw, 4rem)/1.02 var(--font-heading);   --ls-heading-64: -0.035em;
    --t-heading-56: 500 clamp(2rem, 4.9vw, 3.5rem)/1.05 var(--font-heading);    --ls-heading-56: -0.035em;
    --t-heading-48: 500 clamp(1.875rem, 4.2vw, 3rem)/1.1 var(--font-heading);   --ls-heading-48: -0.03em;
    --t-heading-40: 500 clamp(1.75rem, 3.5vw, 2.5rem)/1.15 var(--font-heading); --ls-heading-40: -0.03em;
    --t-heading-32: 500 clamp(1.5rem, 2.8vw, 2rem)/1.2 var(--font-heading);     --ls-heading-32: -0.02em;
    --t-heading-24: 500 clamp(1.25rem, 2.1vw, 1.5rem)/1.25 var(--font-heading); --ls-heading-24: -0.015em;
    --t-heading-20: 500 1.25rem/1.3 var(--font-heading);                        --ls-heading-20: -0.01em;
    --t-heading-16: 500 1rem/1.5 var(--font-heading);                           --ls-heading-16: -0.005em;
    --t-heading-14: 500 0.875rem/1.45 var(--font-heading);                      --ls-heading-14: 0;

    /* ---- Buttons: only inside components that render buttons ---- */
    --t-button-16: 500 1rem/1 var(--font-sans);        --ls-button-16: 0;
    --t-button-14: 500 0.875rem/1 var(--font-sans);    --ls-button-14: 0;
    --t-button-12: 500 0.75rem/1 var(--font-sans);     --ls-button-12: 0.01em;

    /* ---- Labels: single lines, generous line-height to sit next to icons ---- */
    --t-label-20: 400 1.25rem/2rem var(--font-sans);
    --t-label-18: 400 1.125rem/1.25rem var(--font-sans);
    --t-label-16: 400 1rem/1.25rem var(--font-sans);
    --t-label-14: 400 0.875rem/1.25rem var(--font-sans);
    --t-label-13: 400 0.8125rem/1rem var(--font-sans);
    --t-label-12: 400 0.75rem/1rem var(--font-sans);                 /* set in capitals */
    --t-label-14-mono: 400 0.875rem/1.25rem var(--font-mono);
    --t-label-13-mono: 400 0.8125rem/1rem var(--font-mono);
    --t-label-12-mono: 400 0.75rem/1rem var(--font-mono);

    /* ---- Copy: running text, taller line-height than Label ---- */
    --t-copy-24: 400 clamp(1.25rem, 2.2vw, 1.5rem)/1.5 var(--font-sans);
    --t-copy-20: 400 clamp(1.125rem, 1.7vw, 1.25rem)/1.55 var(--font-sans);
    --t-copy-18: 400 1.125rem/1.6 var(--font-sans);
    --t-copy-16: 400 1rem/1.6 var(--font-sans);
    --t-copy-14: 400 0.875rem/1.55 var(--font-sans);
    --t-copy-13: 400 0.8125rem/1.5 var(--font-sans);
    --t-copy-13-mono: 400 0.8125rem/1.5 var(--font-mono);

    /* ---- Eyebrow: our label for section openers (mono, capitals) ---- */
    --t-eyebrow: 600 0.75rem/1.3 var(--font-mono);   --ls-eyebrow: 0.02em;

    /* ---- Legacy names, mapped onto the scale so older rules follow the system. Prefer the names above. ---- */
    --t-h1: var(--t-heading-64);   --ls-h1: var(--ls-heading-64);
    --t-h2: var(--t-heading-48);   --ls-h2: var(--ls-heading-48);
    --t-h3: var(--t-heading-32);   --ls-h3: var(--ls-heading-32);
    --t-h4: var(--t-heading-24);   --ls-h4: var(--ls-heading-24);
    --t-h5: var(--t-heading-20);   --ls-h5: var(--ls-heading-20);
    --t-lead: var(--t-copy-20);
    --t-body-lg: var(--t-copy-16);
    --t-body: var(--t-copy-14);
    --t-button: var(--t-button-12);
    --t-small: var(--t-label-12-mono);
    --t-mono: var(--t-label-14-mono);
}

html, body { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
code, kbd, samp, pre { font-family: var(--font-mono); }
button, input, select, textarea { font-family: inherit; }

/* ---- Text style classes ---- */
.t-display { font: var(--t-display); letter-spacing: var(--ls-display); }
.t-heading-72 { font: var(--t-heading-72); letter-spacing: var(--ls-heading-72); }
.t-heading-64 { font: var(--t-heading-64); letter-spacing: var(--ls-heading-64); }
.t-heading-56 { font: var(--t-heading-56); letter-spacing: var(--ls-heading-56); }
.t-heading-48 { font: var(--t-heading-48); letter-spacing: var(--ls-heading-48); }
.t-heading-40 { font: var(--t-heading-40); letter-spacing: var(--ls-heading-40); }
.t-heading-32 { font: var(--t-heading-32); letter-spacing: var(--ls-heading-32); }
.t-heading-24 { font: var(--t-heading-24); letter-spacing: var(--ls-heading-24); }
.t-heading-20 { font: var(--t-heading-20); letter-spacing: var(--ls-heading-20); }
.t-heading-16 { font: var(--t-heading-16); letter-spacing: var(--ls-heading-16); }
.t-heading-14 { font: var(--t-heading-14); }
.t-button-16 { font: var(--t-button-16); }
.t-button-14 { font: var(--t-button-14); }
.t-button-12 { font: var(--t-button-12); letter-spacing: var(--ls-button-12); }
.t-label-20 { font: var(--t-label-20); }
.t-label-18 { font: var(--t-label-18); }
.t-label-16 { font: var(--t-label-16); }
.t-label-14 { font: var(--t-label-14); }
.t-label-13 { font: var(--t-label-13); font-variant-numeric: tabular-nums; }
.t-label-12 { font: var(--t-label-12); text-transform: uppercase; letter-spacing: 0.04em; }
.t-label-14-mono { font: var(--t-label-14-mono); }
.t-label-13-mono { font: var(--t-label-13-mono); }
.t-label-12-mono { font: var(--t-label-12-mono); }
.t-copy-24 { font: var(--t-copy-24); }
.t-copy-20 { font: var(--t-copy-20); }
.t-copy-18 { font: var(--t-copy-18); }
.t-copy-16 { font: var(--t-copy-16); }
.t-copy-14 { font: var(--t-copy-14); }
.t-copy-13 { font: var(--t-copy-13); }
.t-copy-13-mono { font: var(--t-copy-13-mono); }
.t-eyebrow { font: var(--t-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
[class*="t-heading-"] strong, [class*="t-copy-"] strong, [class*="t-label-"] strong { font-weight: 600; }
.t-upper { text-transform: uppercase; }

/* Legacy class names (older markup), identical to their new equivalents */
.t-h1 { font: var(--t-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font: var(--t-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font: var(--t-h3); letter-spacing: var(--ls-h3); }
.t-h4 { font: var(--t-h4); letter-spacing: var(--ls-h4); }
.t-h5 { font: var(--t-h5); letter-spacing: var(--ls-h5); }
.t-lead { font: var(--t-lead); }
.t-body { font: var(--t-body); }
.t-body-lg { font: var(--t-body-lg); }
.t-button { font: var(--t-button); text-transform: uppercase; }
.t-small { font: var(--t-small); }
.t-mono { font: var(--t-mono); }