/* ============================================================
   VETRO — TYPOGRAPHY TOKENS
   Display/Headline: Hanken Grotesk (subbing Suisse Intl) · Body: Inter
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Hanken Grotesk', 'Suisse Intl', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extra:   800; /* @kind font */

  /* ---- Type scale (px / rem) ---- */
  --fs-display: 3.5rem;   /* 56 — hero */
  --fs-h1:      2.5rem;   /* 40 */
  --fs-h2:      2rem;     /* 32 */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lg:      1.125rem; /* 18 */
  --fs-base:    1rem;     /* 16 */
  --fs-sm:      0.875rem; /* 14 */
  --fs-xs:      0.75rem;  /* 12 */
  --fs-2xs:     0.6875rem;/* 11 — labels */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.02em; /* @kind other */
  --ls-snug:   -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-label:  0.06em; /* @kind other */
}

/* ---- Optional helper classes ---- */
.vt-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.vt-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-primary); }
.vt-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-primary); }
.vt-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-primary); }
.vt-subhead { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-normal); color: var(--text-secondary); }
.vt-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.vt-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.vt-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-2xs); line-height: 1; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }