/* ============================================================
   DEEPRISE — TYPE TOKENS
   Radley (serif, display/headlines) + Mulish (sans, 400–800).
   @font-face rules for both live in tokens/fonts.css (self-hosted
   woff2), imported ahead of this file from styles.css.
   ============================================================ */

:root {
  /* ---------- Font families ---------- */
  --font-serif-display: 'Radley', 'Georgia', serif; /* headlines, big numbers. NEVER italic. */
  --font-sans: 'Mulish', -apple-system, 'Segoe UI', sans-serif; /* body, UI, buttons */

  /* ---------- Weights (Mulish is variable 400–800) ---------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---------- Type scale — mobile-first ----------
     Base 16px body; audience reads little, so headlines run big & bold.
     Sizes below are the mobile values; bump up at --bp-md via the
     .ds-type-* rules' own media query overrides. */
  --text-xs: 0.8125rem;   /* 13px — fine print, labels */
  --text-sm: 0.9375rem;   /* 15px — captions, helper text */
  --text-base: 1.0625rem; /* 17px — body copy, comfortable reading */
  --text-md: 1.25rem;     /* 20px — lead paragraphs */
  --text-lg: 1.5rem;      /* 24px — subheads */
  --text-xl: 1.75rem;     /* 28px mobile / 36px desktop — h3 */
  --text-2xl: 2.25rem;    /* 36px mobile / 48px desktop — h2 */
  --text-3xl: 2.75rem;    /* 44px mobile / 68px desktop — h1 */
  --text-4xl: 3.5rem;     /* 56px mobile / 96px desktop — hero display, big stat numbers */

  /* ---------- Line height ---------- */
  --leading-tight: 1.1;   /* display/serif headlines */
  --leading-snug: 1.3;    /* subheads */
  --leading-normal: 1.6;  /* body copy */
  --leading-relaxed: 1.7; /* long-form body */

  /* ---------- Letter spacing ---------- */
  --tracking-tight: -0.01em;   /* large serif display */
  --tracking-normal: 0;
  --tracking-wide: 0.03em;    /* uppercase labels/eyebrows */
  --tracking-wider: 0.08em;   /* small uppercase nav/tags */
}

/* ---------- Semantic type roles ---------- */
.ds-type-hero,
.ds-type-h1 {
  font-family: var(--font-serif-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}
.ds-type-hero { font-size: var(--text-4xl); }
.ds-type-h1 { font-size: var(--text-3xl); }

.ds-type-h2 {
  font-family: var(--font-serif-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

.ds-type-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

.ds-type-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--text-heading);
}

.ds-type-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

.ds-type-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}

.ds-type-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.ds-type-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.ds-type-stat {
  font-family: var(--font-serif-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

/* ---------- Desktop bump for display sizes ---------- */
@media (min-width: 768px) {
  :root {
    --text-xl: 2.25rem;  /* 36px */
    --text-2xl: 3rem;    /* 48px */
    --text-3xl: 4.25rem; /* 68px */
    --text-4xl: 6rem;    /* 96px */
  }
}