/* ============================================================
   RULO3D — Typography tokens
   One family does the work: Montserrat. Display set is heavy and
   tight (peaks); body is regular/medium and comfortable. Casing
   for eyebrows/labels is uppercase with wide tracking, echoing
   the "RULO3D" lockup.
   ============================================================ */
:root {
  /* ---- Families ----
     Text & flowing headlines = Montserrat (the refined base).
     Stamp = Gobold: a tall, condensed, ALL-CAPS display face
     (lowercase renders as small caps). Reserve it for short,
     punchy UPPERCASE moments — promo kickers, big labels, the
     "VOLCÁN LANÍN" treatment — never long sentences. */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-stamp: 'Gobold', 'Montserrat', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Type scale (rem, 16px base) ---- */
  --text-3xs: 0.6875rem; /* 11px — micro labels */
  --text-2xs: 0.75rem;   /* 12px */
  --text-xs:  0.8125rem; /* 13px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px — body */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 4rem;      /* 64px */
  --text-6xl: 5.5rem;    /* 88px — hero display */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;  /* display headings */
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.18em; /* uppercase eyebrows / labels */

  /* ============================================================
     Semantic type roles
     ============================================================ */
  --type-display: var(--weight-extrabold) var(--text-6xl)/var(--leading-tight) var(--font-display);
  --type-stamp: 700 var(--text-5xl)/0.92 var(--font-stamp); /* Gobold, set UPPERCASE */
  --type-h1: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2: var(--weight-bold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-h3: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --type-h4: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label: var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
}