:root {
  /* ---- Families ---- */
  --font-display: "Bowlby One SC", "Arial Black", sans-serif;   /* bubble-letter headings, ALL CAPS by design */
  --font-marker: "Permanent Marker", cursive;                    /* handstyle accents, eyebrow labels, prices */
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* UI + body copy */

  /* ---- Scale (display sizes run big; the brand shouts) ---- */
  --text-display-xl: 64px;  /* hero */
  --text-display-lg: 44px;  /* page titles */
  --text-display-md: 30px;  /* section titles */
  --text-display-sm: 22px;  /* card titles */
  --text-marker-lg: 28px;
  --text-marker-md: 20px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;

  /* ---- Details ---- */
  --leading-display: 1.05;
  --leading-body: 1.55;
  --tracking-display: 0.01em;
  --tracking-caps: 0.08em;   /* for uppercase body-font labels */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400; /* Bowlby One SC has a single weight */
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  text-transform: uppercase;
}

a { color: var(--link); text-decoration-thickness: 2px; }
a:hover { color: var(--link-hover); }