/* SUMA — Typography tokens
----------------------------------------------------------------
Three brand families plus one reading face:
  Canela     — headlines and emphasis ONLY (weight 400, no shadow)
  Raleway    — subtitles, lead lines, definitions, equations,
               capability names, and the tracked uppercase eyebrow
  Work Sans  — all body copy (300 on the web) and all interface
  Newsreader — long-form essays only (Vision, Perspectives)

Newsreader is a deliberate one-off, not a fourth brand font. It is
the only face in the system chosen to read as OUTSIDE the theme:
a refined, newspaper-y serif that signals "this is a piece of
writing, not a page of the product." Reach for it only when that
outsideness is the explicit goal and the subject is still topically
SUMA — the founder's essays and Perspectives. Everywhere else it is
wrong; it is never a headline, a subtitle, a caption or interface
type, and it never appears in a deck, a document template or a UI.

Canela is self-hosted (Regular only); the rest load from Google
Fonts in tokens/fonts.css. Web role sizes were measured from the
shipped site at 1536px (Sep 2026). */

:root {
  /* ---- Families ------------------------------------------------- */
  --font-display:  'Canela', 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --font-subtitle: 'Raleway', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:     'Work Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-essay:    'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-eyebrow:  var(--font-subtitle);
  --font-mono:     'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

  /* ---- Weights -------------------------------------------------- */
  --weight-light:    300;  /* web body, lead lines */
  --weight-regular:  400;  /* Canela headlines — always 400 */
  --weight-medium:   500;  /* buttons, UI emphasis */
  --weight-semibold: 600;  /* eyebrows, small labels */
  --weight-bold:     700;
  --weight-display:  400;  /* Canela is set at 400 everywhere (Regular is the only cut we have) */

  /* ---- Display scale (serif) — documents & decks ---------------- */
  --text-display-2xl: 6rem;     /* 96 — cover moments */
  --text-display-xl:  4.25rem;  /* 68 — cover headlines */
  --text-display-lg:  3rem;     /* 48 — section openers */
  --text-display-md:  2.25rem;  /* 36 — report headlines */
  --text-display-sm:  1.75rem;  /* 28 — card headlines */

  /* ---- Text scale ----------------------------------------------- */
  --text-2xl: 1.5rem;     /* 24 */
  --text-xl:  1.25rem;    /* 20 */
  --text-lg:  1.125rem;   /* 18 */
  --text-md:  1rem;       /* 16 — base body */
  --text-sm:  0.875rem;   /* 14 */
  --text-xs:  0.75rem;    /* 12 */
  --text-2xs: 0.6875rem;  /* 11 — eyebrows */

  /* ---- Web type roles (measured from the site) ------------------ */
  --type-hero:      clamp(2.6rem, 4.6vw, 4.4rem);    /* home H1 — 70.4px at 1536 */
  --type-h1:        clamp(2.2rem, 3.4vw, 3rem);      /* sub-page hero H1 */
  --type-statement: clamp(2.2rem, 3.6vw, 3.4rem);    /* home section H2 — 54.4px at 1536 */
  --type-h2:        clamp(1.9rem, 3.2vw, 2.9rem);    /* section H2 */
  --type-h2-cta:    clamp(2rem, 3.8vw, 3.3rem);      /* pre-footer invitation */
  --type-h3-lg:     clamp(1.6rem, 2.5vw, 2.4rem);    /* Define · Understand · Improve titles */
  --type-h3:        1.4rem;                          /* Canela card titles (22.4px) */
  --type-h4:        1.2rem;                          /* small Canela titles, FAQ questions */
  --type-lead:      clamp(1.1rem, 1.45vw, 1.35rem);  /* hero support — Work Sans 300, 21.6px at 1536 */
  --type-sub:       clamp(1.05rem, 1.35vw, 1.3rem);  /* Raleway section sub / lead line */
  --type-body:      1rem;                            /* Work Sans 300 */
  --type-body-sm:   0.9375rem;                       /* 15px — cards, footer links */
  --type-button:    1rem;                            /* 16px / 500 */
  --type-nav:       0.875rem;                        /* 14px / 400 */
  --type-eyebrow:   11px;                            /* Raleway 600 .26em UPPER */
  --type-label:     10px;                            /* small in-component labels .24em */
  --type-menu-label: 9.5px;                          /* dropdown section labels .22em */

  /* ---- Line heights --------------------------------------------- */
  --leading-none:    1;
  --leading-hero:    1.04;
  --leading-display: 1.08;
  --leading-tight:   1.18;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-body:    1.62;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ------------------------------------------- */
  --tracking-label:     0.26em;   /* eyebrows — the signature */
  --tracking-label-sm:  0.24em;   /* small labels */
  --tracking-label-xs:  0.22em;   /* menu section labels, footer headings */
  --tracking-wide:      0.06em;
  --tracking-wordmark:  0.04em;
  --tracking-normal:    0;
  --tracking-tight:     -0.01em;
  --tracking-display:   -0.016em; /* H1/H2 */
  --tracking-hero:      -0.02em;  /* home H1 */

  /* ---- Composed semantic roles ---------------------------------- */
  --type-eyebrow-size:   var(--type-eyebrow);
  --type-eyebrow-weight: var(--weight-semibold);
}