/* ============================================================
   VIXA · TYPOGRAPHY TOKENS  (REAL brand fonts)
   Gotham for display/headlines/buttons (Book→Black). Inter for
   body, UI and micro-labels. Headlines run tight & negative
   (≈ -0.03em); body is Inter Regular 16px.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Gotham', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 12px micro-labels */
  --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-black:     900; /* @kind font */
  --fw-light:     300; /* @kind font */

  /* ---- Type scale (px) ---- */
  --text-xs:    12px;   /* Inter Light micro-labels */
  --text-sm:    14px;
  --text-base:  16px;   /* body & UI default */
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;   /* card subheads (DM Sans SemiBold) */
  --text-2xl:   32px;
  --text-3xl:   40px;   /* large body / lead paragraphs */
  --text-4xl:   48px;   /* section headings (Bold) */
  --text-5xl:   64px;
  --text-6xl:   95px;   /* hero headline (Bold) */

  /* ---- Line heights ---- */
  --leading-tight:   1.0;    /* hero — DM Sans 95/95 */
  --leading-snug:    1.15;
  --leading-heading: 1.3;    /* section headings 48/62 */
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ---- Letter spacing (DM Sans headlines run tight & negative) ---- */
  --tracking-hero:    -0.03em;  /* 95px → -2.85px */
  --tracking-heading: -0.03em;  /* 48px → -1.44px */
  --tracking-tight:   -0.02em;  /* 16px UI → -0.32px */
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;   /* uppercase eyebrows / legends */

  /* ============================================================
     SEMANTIC ROLES
     ============================================================ */

  /* Hero headline (Gotham Bold, tight) */
  --type-hero-family:  var(--font-display);
  --type-hero-weight:  var(--fw-bold);
  --type-hero-size:    var(--text-6xl);
  --type-hero-leading: var(--leading-tight);
  --type-hero-tracking: var(--tracking-hero);

  /* Section heading (Gotham Bold) */
  --type-h2-family:  var(--font-display);
  --type-h2-weight:  var(--fw-bold);
  --type-h2-size:    var(--text-4xl);
  --type-h2-tracking: var(--tracking-heading);

  /* Card / sub heading (Gotham Medium/SemiBold) */
  --type-h3-family:  var(--font-display);
  --type-h3-size:    var(--text-xl);
  --type-h3-weight:  var(--fw-medium);

  /* Eyebrow / micro-label (Inter Light, UPPERCASE, tracked) */
  --type-eyebrow-family:   var(--font-label);
  --type-eyebrow-size:     var(--text-xs);
  --type-eyebrow-weight:   var(--fw-light);
  --type-eyebrow-tracking: var(--tracking-caps);

  /* Body */
  --type-body-size:    var(--text-base);
  --type-body-weight:  var(--fw-regular);
  --type-body-leading: var(--leading-relaxed);

  /* Lead paragraph (large airy body — Inter Regular 40px) */
  --type-lead-size:    var(--text-3xl);
  --type-lead-weight:  var(--fw-regular);

  /* Small / meta */
  --type-meta-size:   var(--text-sm);
  --type-meta-weight: var(--fw-medium);
}