/* ===== Zaba typography tokens ===== */

:root {
  /* --- Font family (Nunito) --- */
  --font-family-base: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Heading font sizes --- */
  --font-size-display: 5rem;             /* 80px */
  --font-size-heading-3xl: 4.5rem;       /* 72px */
  --font-size-heading-xxl: 4rem;         /* 64px */
  --font-size-heading-xl: 3rem;          /* 48px */
  --font-size-heading-xl-mobile: 2.5rem; /* 40px */
  --font-size-heading-l: 2rem;           /* 32px */
  --font-size-heading-m: 1.5rem;         /* 24px */
  --font-size-heading-s: 1.25rem;        /* 20px */
  --font-size-heading-xs: 1.125rem;      /* 18px */
  --font-size-heading-xxs: 1rem;         /* 16px */

  /* --- Body font sizes --- */
  --font-size-body-xl: 1.25rem;          /* 20px */
  --font-size-body-l: 1.125rem;          /* 18px */
  --font-size-body-m: 1rem;              /* 16px */
  --font-size-body-s: 0.875rem;          /* 14px */

  /* --- Line heights --- */
  --line-height-s: 1;      /* large headings / single-line UI text */
  --line-height-m: 1.2;    /* lead text, short paragraphs */
  --line-height-l: 1.5;    /* long-form reading, multi-line UI text */
  --line-height-xl: 1.75;  /* small text / emphasised text (quotes) */

  /* --- Font weights --- */
  --font-weight-regular: 400; /* body default */
  --font-weight-medium: 500;  /* component labels (buttons, form fields) */
  --font-weight-bold: 700;    /* headings */
  --font-weight-extrabold: 800;    /* headings and emphasis */
  --font-weight-black: 900;   /* display headlines only (hero) */
}

/* --- Font family applied globally --- */
html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-family-base);
}

/* Sensible document default (Body M / 16px, comfortable reading line-height) */
body {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-l);
  font-weight: var(--font-weight-regular);
}

/* --- Default heading scale (desktop) for bare h1–h6 --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
}
h1 { font-size: var(--font-size-heading-xxl); line-height: var(--line-height-s); }
h2 { font-size: var(--font-size-heading-xl);  line-height: var(--line-height-s); }
h3 { font-size: var(--font-size-heading-l);   line-height: var(--line-height-m); }
h4 { font-size: var(--font-size-heading-m);   line-height: var(--line-height-m); }
h5 { font-size: var(--font-size-heading-s);   line-height: var(--line-height-m); }
h6 { font-size: var(--font-size-heading-xs);  line-height: var(--line-height-m); }

/* --- Small heading scale (mobile / information-heavy UIs) --- */
@media (max-width: 768px) {
  h1 { font-size: var(--font-size-heading-xl-mobile); } /* 40px */
  h2 { font-size: var(--font-size-heading-l); }         /* 32px */
  h3 { font-size: var(--font-size-heading-m); }         /* 24px */
  h4 { font-size: var(--font-size-heading-s); }         /* 20px */
  h5 { font-size: var(--font-size-heading-xs); }        /* 18px */
  h6 { font-size: var(--font-size-heading-xxs); }       /* 16px */
}

/* ===== Optional utility classes ===== */
/* Body sizes */
.text-body-xl { font-size: var(--font-size-body-xl); }
.text-body-l  { font-size: var(--font-size-body-l); }
.text-body-m  { font-size: var(--font-size-body-m); }
.text-body-s  { font-size: var(--font-size-body-s); }
/* Weights */
.text-regular { font-weight: var(--font-weight-regular); }
.text-medium  { font-weight: var(--font-weight-medium); }
.text-bold    { font-weight: var(--font-weight-bold); }
.text-extrabold { font-weight: var(--font-weight-extrabold); }
/* Line heights */
.leading-s  { line-height: var(--line-height-s); }
.leading-m  { line-height: var(--line-height-m); }
.leading-l  { line-height: var(--line-height-l); }
.leading-xl { line-height: var(--line-height-xl); }