/* ============================================================
   SPECTARE · Typography tokens
   Clash Display does the heavy lifting — extralight for grand
   editorial headlines (echoing the hairline logo), medium for
   UI. Sloop Script is a calligraphic accent, never body text.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-script:  "Sloop Script", "Snell Roundhand", cursive;
  --font-mono:    ui-monospace, "SF Mono", Menlo, "Liberation Mono", monospace;

  /* ---- Weights ---- */
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;

  /* ---- Type scale (px) ---- */
  --text-display-2xl: 116px;
  --text-display-xl:  88px;
  --text-display-lg:  64px;
  --text-display-md:  48px;
  --text-heading-xl:  36px;
  --text-heading-lg:  28px;
  --text-heading-md:  22px;
  --text-heading-sm:  18px;
  --text-body-lg:     18px;
  --text-body-md:     16px;
  --text-body-sm:     14px;
  --text-caption:     13px;
  --text-overline:    12px;

  /* ---- Line heights ---- */
  --leading-tight:   1.02;   /* big display */
  --leading-snug:    1.12;   /* headings */
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;  /* large display */
  --tracking-tight:   -0.015em; /* headings */
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;   /* small labels */
  --tracking-wider:   0.22em;   /* overlines / the "TALENTO DISRUPTIVO" lockup */
  --tracking-logo:    0.34em;   /* widest — brand lockups */

  /* ============================================================
     SEMANTIC ROLE ALIASES
     ============================================================ */
  --type-display:  var(--weight-extralight) var(--text-display-xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-light) var(--text-heading-xl)/var(--leading-snug) var(--font-display);
  --type-h2:       var(--weight-medium) var(--text-heading-lg)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--weight-medium) var(--text-heading-md)/var(--leading-snug) var(--font-display);
  --type-body:     var(--weight-regular) var(--text-body-md)/var(--leading-normal) var(--font-body);
  --type-body-lg:  var(--weight-regular) var(--text-body-lg)/var(--leading-relaxed) var(--font-body);
  --type-label:    var(--weight-medium) var(--text-body-sm)/1.2 var(--font-body);
  --type-overline: var(--weight-medium) var(--text-overline)/1 var(--font-body);
}