/* =============================================================================
   Pi42 Typography System
   ─────────────────────────────────────────────────────────────────────────────
   Source: Figma nodes 3789:40412 (Mobile) + 3789:39578 (Desktop)
   Fonts:  Sora (Headings) + Inter (Body) via Google Fonts
   ─────────────────────────────────────────────────────────────────────────────
   Usage:  Apply a single .type-* class to any element.
           All classes set font-family, size, weight, line-height, letter-spacing.
   ============================================================================= */

/* ─── Font family tokens ──────────────────────────────────────────────────── */
/* @import must appear before all other rules — add to the HTML <head> instead:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
*/
:root {
  --font-heading: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ─── Heading — Desktop (web) ─────────────────────────────────────────────── */
/* Display: only on Desktop (landing pages, hero sections) */
.type-display-bold {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.40px;
}
.type-display {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0.40px;
}

/* H1 */
.type-h1-bold {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: 0.32px;
}
.type-h1 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0.32px;
}

/* H2 */
.type-h2-bold {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.28px;
}
.type-h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.28px;
}

/* H3 — Desktop: 16px/20px; Mobile: 24px/24px. Web uses desktop spec. */
.type-h3-bold {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.16px;
}
.type-h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.16px;
}

/* ─── Body ────────────────────────────────────────────────────────────────── */
/* XL — Desktop only */
.type-xl-bold {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.18px;
}
.type-xl-medium {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.18px;
}
.type-xl {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.18px;
}

/* L — primary body size on Desktop/Web */
.type-l-bold {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.16px;
}
.type-l-medium {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.16px;
}
.type-l {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.16px;
}
.type-l-hyperlink {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.16px;
  text-decoration: underline;
}

/* M — primary body size on Mobile */
.type-m-bold {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.14px;
}
.type-m-medium {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14px;
}
.type-m {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.14px;
}
.type-m-hyperlink {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.14px;
  text-decoration: underline;
}

/* S — captions, labels */
.type-s-bold {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.type-s-medium {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.type-s {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.type-s-hyperlink {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.12px;
  text-decoration: underline;
}

/* XS — badges, micro-copy */
.type-xs-bold {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.10px;
}
.type-xs-medium {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.10px;
}
.type-xs {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.10px;
}

/* ─── Button ──────────────────────────────────────────────────────────────── */
.type-btn-l {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.16px;
}
.type-btn-m {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.14px;
}
.type-btn-s {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12px;
}

/* ─── Label ───────────────────────────────────────────────────────────────── */
/* Used for form labels, chip text, tag text, tab labels */
.type-label-l-xbold {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.14px;
}
.type-label-l-semibold {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.14px;
}
.type-label-l-medium {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.14px;
}
.type-label-l {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.14px;
}
.type-label-s-xbold {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.12px;
}
.type-label-s-semibold {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.12px;
}
.type-label-s-medium {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.12px;
}
.type-label-s {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.12px;
}

/* ─── Mobile overrides (inside .pi42-mobile context or a media query) ─────── */
/*
   The mobile scale has larger headings (H3 = 24px vs desktop 16px) and
   no Display or XL sizes. Apply .pi42-mobile to the root when rendering
   native-web views at mobile breakpoints.
*/
.pi42-mobile .type-h1-bold,
.pi42-mobile .type-h1 {
  font-size: 32px;
  line-height: 36px;
}
.pi42-mobile .type-h2-bold,
.pi42-mobile .type-h2 {
  font-size: 28px;
  line-height: 32px;
}
.pi42-mobile .type-h3-bold {
  font-size: 24px;
  font-weight: 600;       /* Figma: SemiBold on mobile H3 */
  line-height: 24px;
  letter-spacing: 0.20px;
}
.pi42-mobile .type-h3 {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0.20px;
}