/* ============================================================
   Vinner Labs — Typography Tokens
   Display / headings: Avenir Next (presentations) — Demi-Bold or
     Regular, letter-tracking on.
   Body:    Avenir Next Light.
   Docs:    Avenir Next (Medium headings, Light body).
   Chem:    Newsreader serif (chemical / scientific register: INCI / CAS / EC,
            product descriptors, catalogue meta)
   ============================================================ */

:root {
  /* Families — self-hosted licensed brand faces, system fallback after.
     The fallback is the OS UI stack, not Helvetica Neue: that face was
     removed from the system (see tokens/fonts.css) because naming it here
     made every page download 187 KB purely to draw glyphs Avenir Next
     lacks (⟶ ▼ ⌘). system-ui carries them already. */
  --font-display: 'Avenir Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Avenir Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-doc:     'Avenir Next', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-chem:    'Newsreader', Georgia, 'Times New Roman', serif;

  /* Weights */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */

  /* Type scale (1.250 major-third, fluid clamps for airy display) */
  --fs-display-2xl: clamp(3.25rem, 1.6rem + 5vw, 5.5rem);   /* @kind other */
  --fs-display-xl:  clamp(2.5rem, 1.4rem + 3.6vw, 4rem);    /* @kind other */
  --fs-display-lg:  clamp(2rem, 1.3rem + 2.4vw, 3rem);      /* @kind other */
  --fs-h1:          clamp(1.75rem, 1.5833rem + 0.8333vw, 2.25rem);  /* 28→36px @kind font */
  --fs-h2:          clamp(1.5rem, 1.4167rem + 0.4167vw, 1.75rem);   /* 24→28px @kind font */
  --fs-h3:          clamp(1.25rem, 1.2083rem + 0.2083vw, 1.375rem); /* 20→22px @kind font */
  --fs-h4:          clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);    /* 16→18px @kind font */
  --fs-body-lg:     1.125rem;  /* @kind font */
  --fs-body:        clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);    /* 16→18px @kind font */
  --fs-body-sm:     0.875rem;  /* @kind font */
  --fs-caption:     0.8125rem; /* @kind font */
  --fs-overline:    0.75rem;   /* @kind font */

  /* Line heights */
  --lh-tight:    1.08;  /* @kind font */
  --lh-snug:     1.25;  /* @kind font */
  --lh-normal:   1.5;   /* @kind font */
  --lh-relaxed:  1.65;  /* @kind font */

  /* Letter spacing — Avenir Next headings run with tracking ON;
     the brand also leans on airy, tracked-out caps (see brochures) */
  --ls-tightest: -0.01em; /* @kind font */
  --ls-tight:    0;       /* @kind font */
  --ls-heading:  0.015em; /* @kind font */
  --ls-normal:   0;       /* @kind font */
  --ls-wide:     0.06em;  /* @kind font */
  --ls-wider:    0.14em;  /* @kind font */
  --ls-widest:   0.22em;  /* @kind font */

  /* ---- Semantic text styles (composite) ---- */
  --text-eyebrow: var(--fw-semibold) var(--fs-overline)/1.2 var(--font-display); /* @kind font */
  --text-display: var(--fw-medium) var(--fs-display-xl)/var(--lh-tight) var(--font-display); /* @kind font */
  --text-h1:      var(--fw-semibold) var(--fs-h1)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-h2:      var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-h3:      var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-body-style: var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-body); /* @kind font */
  --text-chem:    var(--fw-regular) var(--fs-body-sm)/var(--lh-normal) var(--font-chem); /* @kind font */
}