/*
 * Site-wide type system. Every page stylesheet takes its sizes, weights and tracking from here.
 * Loaded from components/head.ejs after the Tailwind CDN so the base rules below win over its reset.
 *
 * Two families, each with one job:
 *   Manrope        — headings, navigation, buttons, labels (anything you scan)
 *   IBM Plex Sans  — paragraphs, descriptions, articles, form help (anything you read)
 *
 * Three weights only: 400 (reading), 500 (UI text), 600 (headings, buttons, labels).
 * No light (300) text and no 700: thin grey body copy and extra-bold numerals were the main
 * reasons the old pages read as templated.
 *
 * Labels and eyebrows are sentence case with no tracking. Numbers use tabular figures.
 */

:root {
    --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Legacy names still used throughout the page stylesheets */
    --font-family-1: var(--font-display);
    --font-family-2: var(--font-text);

    /* Scale (phone → desktop). Fluid between 390px and 1280px. */
    --fs-h1: clamp(2.25rem, 1.55rem + 2.6vw, 3.5rem);       /* 36 → 56  page title */
    --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);       /* 28 → 40  section heading */
    --fs-h2-article: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem); /* 24 → 30  heading inside an article or case study */
    --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);     /* 20 → 22  sub-section, large card */
    --fs-h4: 1.125rem;                                      /* 18       card title, FAQ question */
    --fs-lead: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);  /* 18 → 20  intro paragraph */
    --fs-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);    /* 16 → 17  paragraph */
    --fs-prose: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);  /* 17 → 18  long-form articles */
    --fs-small: 0.9375rem;                                  /* 15       card description, meta, links */
    --fs-label: 0.875rem;                                   /* 14       eyebrow, tag, field label */

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --lh-h1: 1.08;
    --lh-h2: 1.15;
    --lh-h3: 1.3;
    --lh-lead: 1.5;
    --lh-body: 1.6;
    --lh-prose: 1.72;

    /* Manrope is wide; large sizes need negative tracking to hold together. */
    --ls-h1: -0.025em;
    --ls-h2: -0.018em;
    --ls-h3: -0.01em;

    /* Line lengths */
    --measure: 68ch;
    --measure-lead: 58ch;

    /* Older shared variables, kept for components that still read them */
    --text-font-size: var(--fs-body);
    --heading-font-size: var(--fs-h2);
    --sub-heading-font-size: var(--fs-label);
}

body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern";
}

/* Zero-specificity defaults: page stylesheets override these freely. */
:where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    text-wrap: balance;
}

:where(p, li, dd, blockquote, figcaption) {
    text-wrap: pretty;
}

:where(button, input, select, textarea) {
    font-family: inherit;
}

:where(strong, b) {
    font-weight: var(--fw-semibold);
}