/* FSCLN — Typography tokens
 * Strict modular scale. Generous tracking on display/labels.
 * Uppercase reserved for labels/categories — never body.
 */
:root {
  /* ---- Families ---- */
  --font-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (px) ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-2xl: 40px;
  --text-3xl: 64px;
  --text-4xl: 96px;

  /* ---- Weights ---- */
  --weight-thin: 400;   /* (legacy alias — Syne min weight is 400) */
  --weight-light: 400;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-label: 0.12em;  /* uppercase mono labels */

  /* ---- Semantic type roles (FSCLN hierarchy) ----
   * Per the official Brandguide (260525). Sizes in pt; weight + family per role.
   * Display roles: Syne — Title/Heading/Subheading/Section = Medium (500),
   *   Subtitle = Regular (400).
   * Text roles: Montserrat Regular — Quote is italic.
   */
  --title-font: var(--font-display);
  --title-size: 38pt;
  --title-weight: var(--weight-medium);

  --subtitle-font: var(--font-display);
  --subtitle-size: 30pt;
  --subtitle-weight: var(--weight-regular);

  --heading-font: var(--font-display);
  --heading-size: 24pt;
  --heading-weight: var(--weight-medium);

  --subheading-font: var(--font-display);
  --subheading-size: 18pt;
  --subheading-weight: var(--weight-medium);

  --section-font: var(--font-display);
  --section-size: 14pt;
  --section-weight: var(--weight-medium);

  --body-font: var(--font-body);
  --body-size: 12pt;
  --body-weight: var(--weight-regular);
  --body-style: normal; /* @kind font */

  --quote-font: var(--font-body);
  --quote-size: 14pt;
  --quote-weight: var(--weight-regular);
  --quote-style: italic; /* @kind font */

  --caption-font: var(--font-body);
  --caption-size: 8pt;
  --caption-weight: var(--weight-regular);

  /* ---- Legacy px aliases (UI sizing) ---- */
  --role-hero-size: var(--text-4xl);
  --role-display-size: var(--text-3xl);
  --role-heading-size: var(--text-2xl);
  --role-subheading-size: var(--text-xl);
  --role-body-size: var(--text-base);
  --role-label-size: var(--text-xs);

  /* ============ Fluid scale (v2) ============
   * One rule at every width: each size is clamp(floor, proportional to the viewport, cap), where the
   * floor is the size the site has always had (so phones and small laptops keep it), the proportional
   * part is the 2000px reference value / 2000 per px of viewport, and the cap is that value at 2560px.
   * So a size grows only once the screen is big enough for the proportional curve to pass its floor
   * (the menu from ~1090px, body text from ~1300px, the display sizes from ~1550px). The 2000px values
   * were measured off the site owner's reference, and the scale is deliberately flatter than the old
   * one: small UI text ends up ~1.8x, body ~1.5x, display text barely. The --text-* scale above is
   * untouched, because the shared component bundle still reads it. */
  --fs-micro: clamp(10px, 0.9vw, 23.04px);  /* 10px floor, 18px @2000 */
  --fs-label: clamp(11px, 1vw, 25.6px);  /* 11px floor, 20px @2000 */
  --fs-caption: clamp(12px, 1.1vw, 28.16px);  /* 12px floor, 22px @2000 */
  --fs-small: clamp(13px, 1.15vw, 29.44px);  /* 13px floor, 23px @2000 */
  --fs-meta: clamp(14px, 1.2vw, 30.72px);  /* 14px floor, 24px @2000 */
  --fs-body-sm: clamp(15px, 1.2vw, 30.72px);  /* 15px floor, 24px @2000 */
  --fs-body: clamp(16px, 1.25vw, 32px);  /* 16px floor, 25px @2000 */
  --fs-lead: clamp(17px, 1.3vw, 33.28px);  /* 17px floor, 26px @2000 */
  --fs-body-lg: clamp(18px, 1.35vw, 34.56px);  /* 18px floor, 27px @2000 */
  --fs-sub: clamp(21px, 1.45vw, 37.12px);  /* 21px floor, 29px @2000 */
  --fs-h4: clamp(24px, 1.55vw, 39.68px);  /* 24px floor, 31px @2000 */
  --fs-h3: clamp(26px, 1.65vw, 42.24px);  /* 26px floor, 33px @2000 */
  --fs-h2s: clamp(30px, 1.85vw, 47.36px);  /* 30px floor, 37px @2000 */
  --fs-h2: clamp(32px, 1.95vw, 49.92px);  /* 32px floor, 39px @2000 */
  --fs-menu: var(--fs-caption);

  /* Display sizes. --fs-title and --fs-title-lg are unchanged (already at their cap by ~1150px). The hero
   * titles keep their old clamp() as the floor and add a proportional curve on top: max(old, 7vw). */
  --fs-title: clamp(30px, 4vw, 46px);
  --fs-title-lg: clamp(30px, 4.4vw, 52px);
  --fs-hero: min(max(clamp(56px, 9vw, 112px), 7vw), 179px);  /* 140px @2000 */
  --fs-detail-title: min(max(clamp(38px, 5.5vw, 72px), 4.5vw), 115px);  /* 90px @2000 */

  /* Line heights: at least today's px value, and never tighter than the ratio the reference uses (~1.3,
   * 1.4 for long prose). max(ratio em, floor px) makes the ratio tighten by itself as the font grows:
   * a 17px lead is 28.9px (1.7), a 26px lead is 33.8px (1.3). `em` resolves at the element using it. */
  --lh-lead: max(1.3em, 28.9px);
  --lh-tools-intro: max(1.3em, 25.5px);
  --lh-prose: max(1.4em, 28.8px);
  --lh-intro: max(1.3em, 29.7px);
  --lh-about: max(1.4em, 31.5px);
  --lh-desc: max(1.3em, 22.4px);
  --lh-tool-desc: max(1.3em, 23.1px);
}