/* 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);
}