/* ============================================================
   SOMOS IMPACT TRAVEL — TYPOGRAPHY TOKENS
   Spectral (serif display) · Hanken Grotesk (sans body/UI)
   Quicksand (rounded brand accent, logo-adjacent)
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-brand:   'Quicksand', var(--font-sans);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  /* Type scale — fluid, anchored at a 1.250 (major third) ramp */
  --text-2xs: 0.6875rem;  /* 11px — overline micro */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base */
  --text-lg:  1.125rem;   /* 18px — lead body */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem);    /* 40→56 */
  --text-5xl: clamp(3rem, 7vw, 4.75rem);     /* 48→76 */
  --text-6xl: clamp(3.75rem, 9vw, 6rem);     /* 60→96 */

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

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.16em;  /* eyebrow / overline caps */

  /* --- Semantic roles --- */
  --display-font:    var(--font-display);
  --display-weight:  var(--weight-semibold);
  --display-leading: var(--leading-heading);
  --display-tracking:var(--tracking-tight);

  --heading-font:    var(--font-display);
  --heading-weight:  var(--weight-semibold);

  --eyebrow-font:    var(--font-brand);
  --eyebrow-weight:  var(--weight-bold);
  --eyebrow-tracking:var(--tracking-overline);
  --eyebrow-size:    var(--text-2xs);

  --body-font:    var(--font-sans);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);
  --body-size:    var(--text-md);

  --label-font:   var(--font-sans);
  --label-weight: var(--weight-semibold);

  --quote-font:   var(--font-display);
  --quote-style:  italic; /* @kind other */
}