/* ALT Construction — Typography tokens
 * Display = Space Grotesk (carved, slightly technical headlines)
 * Body/UI = Hanken Grotesk (clean neutral grotesque)
 * Mono    = Space Mono (uppercase technical labels, measurements, eyebrows)
 * Hierarchy is built from SIZE, TRACKING and SURFACE CONTRAST — avoid heavy weights.
 */
:root {
  /* Families */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display-alt: 'Jost', ui-sans-serif, system-ui, sans-serif; /* geometric/classical alt */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

  /* Type scale — role tokens (size / line-height / tracking) */
  /* home declaration */
  --t-hero-size: 92px;
  --t-hero-lh: 1.0;       /* @kind other */
  --t-hero-ls: -2.4px;    /* @kind other */
  /* page hero */
  --t-display-size: 68px;
  --t-display-lh: 1.0;    /* @kind other */
  --t-display-ls: -1.7px; /* @kind other */
  --t-h1-size: 52px;
  --t-h1-lh: 1.04;        /* @kind other */
  --t-h1-ls: -1.2px;      /* @kind other */
  --t-h2-size: 40px;
  --t-h2-lh: 1.1;         /* @kind other */
  --t-h2-ls: -0.8px;      /* @kind other */
  /* card heading */
  --t-h3-size: 28px;
  --t-h3-lh: 1.18;        /* @kind other */
  --t-h3-ls: -0.4px;      /* @kind other */
  /* feature heading */
  --t-h4-size: 22px;
  --t-h4-lh: 1.3;         /* @kind other */
  --t-h4-ls: -0.2px;      /* @kind other */
  --t-body-lg-size: 18px;
  --t-body-lg-lh: 1.5;    /* @kind other */
  --t-body-lg-ls: 0;      /* @kind other */
  --t-body-size: 16px;
  --t-body-lh: 1.55;      /* @kind other */
  --t-body-ls: 0;         /* @kind other */
  --t-button-size: 14px;
  --t-button-lh: 1.4;     /* @kind other */
  --t-button-ls: 0.1px;   /* @kind other */
  --t-caption-size: 14px;
  --t-caption-lh: 1.45;   /* @kind other */
  --t-caption-ls: 0;      /* @kind other */
  /* eyebrow / label */
  --t-mono-size: 13px;
  --t-mono-lh: 1.4;       /* @kind other */
  --t-mono-ls: 1.4px;     /* @kind other */
  --t-micro-size: 12px;
  --t-micro-lh: 1.4;      /* @kind other */
  --t-micro-ls: 0.2px;    /* @kind other */
}

/* Optional helper classes (tokens are the source of truth; these are conveniences) */
.alt-hero    { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-hero-size); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-ls); }
.alt-display { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
.alt-h1      { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.alt-h2      { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); }
.alt-h3      { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); }
.alt-h4      { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); }
.alt-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); }
.alt-body    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.alt-caption { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--text-muted); }
.alt-mono    { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--t-mono-size); line-height: var(--t-mono-lh); letter-spacing: var(--t-mono-ls); text-transform: uppercase; }