/* ============================================================
   TYPOGRAPHY — Yan Trotta Design System
   One family (Satoshi / Gotham stand-in). The brand
   voice lives in WEIGHT + TRACKING, not in multiple families:
   - Wide-tracked uppercase labels for sections & eyebrows
   - Heavy weights for names / display
   - Light–regular for long-form body
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

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

  /* ---- Type scale (px) ---- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-display: 84px;

  /* ---- Line heights ---- */
  --leading-none: 1;
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ----
     --tracking-label is the signature spaced-caps look
     ("I N T E R I O R  &  S E T  D E S I G N E R") */
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.22em;
  --tracking-eyebrow: 0.32em;
}

/* ---- Optional helper classes (components may also just use the tokens) ---- */
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-display);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-heading);
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.ds-h2 {
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.ds-h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}
.ds-label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.ds-eyebrow {
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.ds-body {
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}
.ds-body-lg {
  font-weight: var(--weight-light);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}