/* ============================================================
   TYPOGRAPHY
   Type roles mirroring styles/typography.tokens.ts.
   That .ts file is the source of truth; this is the browser-ready
   form, generated from it. There is no build step in this folder —
   after editing the tokens, ask for a regenerate, or hand-apply the
   same change here. Do not let the two drift.
   ============================================================ */

@font-face{
  font-family:"Kaftan Serif";
  /* relative to THIS file, so it resolves from any project folder */
  src:url("../assets/fonts/KaftanSerif-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Anchors: 375px → 1920px. html stays at the default 16px —
   changing it invalidates every rem below. */
:root{
  /* ---- family primitives ---- */
  /* Kaftan Serif: self-hosted at assets/fonts/KaftanSerif-Regular.woff2. Regular only — never synthesise a bold. */
  --font-brand: "Kaftan Serif", "Times New Roman", Times, serif;
  /* Inter: loaded from Google Fonts. Helvetica Neue / Arial are the metric-ish fallbacks. */
  --font-plain: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Editorial callouts (stats, quotes) stay serif — same Kaftan Regular as the brand roles. */
  --font-callout: "Kaftan Serif", "Times New Roman", Times, serif;

  --default-font-family: var(--font-plain);

  /* ---- role tokens ---- */
  --text-display-lg: clamp(2.625rem, 2.411rem + 0.91vw, 3.5rem);
  --text-display-md: clamp(2.25rem, 2.128rem + 0.52vw, 2.75rem);
  --text-display-sm: clamp(2.125rem, 2.033rem + 0.39vw, 2.5rem);
  --text-headline-lg: clamp(1.75rem, 1.689rem + 0.26vw, 2rem);
  --text-headline-md: clamp(1.5rem, 1.469rem + 0.13vw, 1.625rem);
  --text-headline-sm: 1.375rem;
  --text-title-lg: 1.375rem;
  --text-title-md: 1.25rem;
  --text-title-sm: 1.125rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1.0625rem;
  --text-body-sm: 1rem;
  --text-label-lg: 1rem;
  --text-label-md: 0.9375rem;
  --text-label-sm: 0.75rem;
  --text-callout-lg: 2.5rem;
  --text-callout-md: 2rem;
  --text-callout-sm: 1.25rem;
}

/* display */
.text-display-lg{font-family:var(--font-plain);font-size:var(--text-display-lg);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
.text-display-md{font-family:var(--font-plain);font-size:var(--text-display-md);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
.text-display-sm{font-family:var(--font-plain);font-size:var(--text-display-sm);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
/* headline */
.text-headline-lg{font-family:var(--font-plain);font-size:var(--text-headline-lg);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
.text-headline-md{font-family:var(--font-plain);font-size:var(--text-headline-md);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
.text-headline-sm{font-family:var(--font-plain);font-size:var(--text-headline-sm);line-height:1.2;letter-spacing:-0.04em;font-weight:400}
/* title */
.text-title-lg{font-family:var(--font-plain);font-size:var(--text-title-lg);line-height:1.3;letter-spacing:-0.04em;font-weight:600}
.text-title-md{font-family:var(--font-plain);font-size:var(--text-title-md);line-height:1.3;letter-spacing:-0.04em;font-weight:600}
.text-title-sm{font-family:var(--font-plain);font-size:var(--text-title-sm);line-height:1.3;letter-spacing:-0.04em;font-weight:600}
/* body */
.text-body-lg{font-family:var(--font-plain);font-size:var(--text-body-lg);line-height:1.8;letter-spacing:0em;font-weight:400}
.text-body-md{font-family:var(--font-plain);font-size:var(--text-body-md);line-height:1.5;letter-spacing:0em;font-weight:400}
.text-body-sm{font-family:var(--font-plain);font-size:var(--text-body-sm);line-height:1.5;letter-spacing:0em;font-weight:400}
/* label */
.text-label-lg{font-family:var(--font-plain);font-size:var(--text-label-lg);line-height:1.2;letter-spacing:0em;font-weight:700}
.text-label-md{font-family:var(--font-plain);font-size:var(--text-label-md);line-height:1.2;letter-spacing:0em;font-weight:500}
.text-label-sm{font-family:var(--font-plain);font-size:var(--text-label-sm);line-height:1.2;letter-spacing:0.04em;font-weight:400;text-transform:uppercase}
/* callout */
.text-callout-lg{font-family:var(--font-callout);font-size:var(--text-callout-lg);line-height:1.2;letter-spacing:0em;font-weight:400}
.text-callout-md{font-family:var(--font-callout);font-size:var(--text-callout-md);line-height:1.2;letter-spacing:0em;font-weight:400}
.text-callout-sm{font-family:var(--font-callout);font-size:var(--text-callout-sm);line-height:1.2;letter-spacing:0em;font-weight:400}

/* Two-tone: the line runs in its own family; a .highlight run inside it
   switches to --font-brand. Same size, leading and tracking — a family swap
   and nothing else. Weight is restated so the swap can never fake a bold. */
.text-display-lg .highlight,
.text-display-md .highlight,
.text-display-sm .highlight,
.text-headline-lg .highlight,
.text-headline-md .highlight,
.text-headline-sm .highlight{
  font-family:var(--font-brand);
  font-weight:400;
}