/* ==========================================================================
   WellWave — Typography
   --------------------------------------------------------------------------
   Apple ladder on the SF stack. Body reads at 17px (brand pace, NOT 16px).
   Headlines track tight (-0.04em display → -0.011em body). Weights do the
   hierarchy work: 600 semibold for display/headings, 400 for body, 500/600
   for mono. Always pair text-over-glass with a faint text-shadow for legibility.
   ========================================================================== */

:root {
  /* ── Size scale (rem) ─────────────────────────────────────────── */
  --ww-type-size-display: 3.5rem;    /* 56px — hero */
  --ww-type-size-h1: 2.5rem;         /* 40px */
  --ww-type-size-h2: 2.125rem;       /* 34px */
  --ww-type-size-lead: 1.75rem;      /* 28px — editorial lead */
  --ww-type-size-title: 1.125rem;    /* 18px — card titles */
  --ww-type-size-body-lg: 1.0625rem; /* 17px — brand reading pace */
  --ww-type-size-body: 1rem;         /* 16px */
  --ww-type-size-caption: 0.875rem;  /* 14px */
  --ww-type-size-fine: 0.75rem;      /* 12px */
  --ww-type-size-micro: 0.625rem;    /* 10px — labels / overlines */

  /* ── Line-height ──────────────────────────────────────────────── */
  --ww-type-line-display: 1.07; /* @kind other */
  --ww-type-line-heading: 1.1; /* @kind other */
  --ww-type-line-lead: 1.25; /* @kind other */
  --ww-type-line-body: 1.47; /* @kind other */
  --ww-type-line-caption: 1.43; /* @kind other */

  /* ── Weight ───────────────────────────────────────────────────── */
  --ww-type-weight-regular: 400; /* @kind other */
  --ww-type-weight-medium: 500; /* @kind other */
  --ww-type-weight-semibold: 600; /* @kind other */
  --ww-type-weight-bold: 700; /* @kind other */

  /* ── Tracking (letter-spacing) — SF Pro optical scale ─────────── */
  --ww-type-tracking-display: -0.04em; /* @kind other */
  --ww-type-tracking-heading: -0.03em; /* @kind other */
  --ww-type-tracking-body: -0.011em; /* @kind other */
  --ww-type-tracking-label: 0.04em;   /* overlines / badges (uppercase) */

  /* Tailwind-compatible tracking aliases */
  --tracking-tight: -0.025em;
  --tracking-tighter: -0.05em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* Text-over-glass legibility shadow (apply over saturated surfaces) */
  --ww-text-shadow-on-glass: 0 1px 1px rgb(255 255 255 / 0.4);
}

:root[data-theme='dark'],
:root.dark {
  --ww-text-shadow-on-glass: 0 1px 1px rgb(0 0 0 / 0.55);
}

/* --------------------------------------------------------------------------
   Ready-made type roles — apply directly as classes.
   -------------------------------------------------------------------------- */
.ww-display {
  font-family: var(--ww-font-display);
  font-size: var(--ww-type-size-display);
  font-weight: var(--ww-type-weight-semibold);
  line-height: var(--ww-type-line-display);
  letter-spacing: var(--ww-type-tracking-display);
}
.ww-h1 {
  font-family: var(--ww-font-display);
  font-size: var(--ww-type-size-h1);
  font-weight: var(--ww-type-weight-semibold);
  line-height: var(--ww-type-line-heading);
  letter-spacing: var(--ww-type-tracking-heading);
}
.ww-h2 {
  font-family: var(--ww-font-headline);
  font-size: var(--ww-type-size-h2);
  font-weight: var(--ww-type-weight-semibold);
  line-height: var(--ww-type-line-heading);
  letter-spacing: var(--ww-type-tracking-heading);
}
.ww-lead {
  font-family: var(--ww-font-display);
  font-size: var(--ww-type-size-lead);
  font-weight: var(--ww-type-weight-regular);
  line-height: var(--ww-type-line-lead);
  letter-spacing: var(--ww-type-tracking-body);
}
.ww-title {
  font-family: var(--ww-font-headline);
  font-size: var(--ww-type-size-title);
  font-weight: var(--ww-type-weight-semibold);
  line-height: 1.35;
  letter-spacing: var(--ww-type-tracking-body);
}
.ww-body {
  font-family: var(--ww-font-body);
  font-size: var(--ww-type-size-body-lg);
  font-weight: var(--ww-type-weight-regular);
  line-height: var(--ww-type-line-body);
  letter-spacing: var(--ww-type-tracking-body);
}
.ww-caption {
  font-family: var(--ww-font-body);
  font-size: var(--ww-type-size-caption);
  font-weight: var(--ww-type-weight-regular);
  line-height: var(--ww-type-line-caption);
}
.ww-overline {
  font-family: var(--ww-font-body);
  font-size: var(--ww-type-size-micro);
  font-weight: var(--ww-type-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--ww-type-tracking-label);
  text-transform: uppercase;
}
.ww-mono {
  font-family: var(--ww-font-mono);
  font-size: 0.8125rem;
  font-weight: var(--ww-type-weight-medium);
  line-height: 1.5;
  letter-spacing: 0;
}