/* Bella and Pan native typography mapped from NativeTypography.swift. */
@font-face {
  font-family: "Skranji";
  src: url("/assets/fonts/Skranji-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Skranji";
  src: url("/assets/fonts/Skranji-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Lilita One";
  src: url("/assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/NunitoSans-ExtraBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 800;
}

:root {
  --font-display: "Skranji", fantasy;
  --font-action: "Lilita One", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
  --type-body: 1rem;
  --type-body-large: clamp(1.05rem, 1.5vw, 1.2rem);
  --type-display-hero: clamp(3.25rem, 6.4vw, 5.7rem);
  --type-display-section: clamp(2.3rem, 4.5vw, 3.9rem);
  --type-display-card: clamp(1.45rem, 2.5vw, 1.9rem);
  --type-display-page: clamp(3.1rem, 7vw, 5.6rem);
  --type-action: 1rem;
  --type-action-small: 0.85rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
}

h1,
h2,
h3,
.brand,
.chapter-trail__number,
.support-address {
  font-family: var(--font-display);
  font-weight: 700;
}

.eyebrow,
.status-pill,
.button,
.site-header nav a,
.chapter-trail__label {
  font-family: var(--font-action);
  font-weight: 400;
}