:root {
  /* ============================================================
     SPACING — 4px base scale
     ============================================================ */
  --pz-s-1:  4px;
  --pz-s-2:  8px;
  --pz-s-3:  12px;
  --pz-s-4:  16px;
  --pz-s-5:  20px;
  --pz-s-6:  24px;
  --pz-s-8:  32px;
  --pz-s-10: 40px;
  --pz-s-12: 48px;
  --pz-s-16: 64px;
  --pz-s-20: 80px;
  --pz-s-24: 96px;
  --pz-s-32: 128px;

  /* Section vertical rhythm — mobile-first, expands at breakpoints */
  --pz-section-y: 2rem;

  /* ============================================================
     TYPE SCALE — 8 steps, mobile-comfortable
     ============================================================ */
  --pz-fs-xs:   0.74rem;   /* 12px micro labels */
  --pz-fs-sm:   0.82rem;   /* 13px small body */
  --pz-fs-base: 1rem;      /* 16px body */
  --pz-fs-md:   1.18rem;   /* 19px standfirst */
  --pz-fs-lg:   1.5rem;    /* 24px H3 */
  --pz-fs-xl:   2rem;      /* 32px H2 mobile / display 1 */
  --pz-fs-2xl:  2.8rem;    /* 45px H1 mobile / display 2 */
  --pz-fs-3xl:  3.6rem;    /* 58px display max */

  /* Line height */
  --pz-lh-tight:  1.04;
  --pz-lh-snug:   1.2;
  --pz-lh-normal: 1.55;
  --pz-lh-relaxed: 1.78;

  /* Tracking */
  --pz-tr-tight:  -0.018em;
  --pz-tr-normal: 0;
  --pz-tr-wide:   0.04em;
  --pz-tr-eye:    0.22em;     /* small-caps kicker labels */

  /* Font families */
  --pz-ff-display: "Fraunces", Georgia, serif;
  --pz-ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ============================================================
     RADIUS
     ============================================================ */
  --pz-r-sm:   6px;
  --pz-r-md:   12px;
  --pz-r-lg:   16px;
  --pz-r-pill: 999px;

  /* ============================================================
     SHADOWS — 3 levels only
     ============================================================ */
  --pz-shadow-1:
    0 1px 2px rgba(28, 25, 23, 0.04),
    0 1px 1px rgba(28, 25, 23, 0.02);
  --pz-shadow-2:
    0 4px 14px -6px rgba(28, 25, 23, 0.10);
  --pz-shadow-3:
    0 8px 28px -8px rgba(28, 25, 23, 0.18),
    0 22px 60px -22px rgba(28, 25, 23, 0.10);

  /* ============================================================
     COLOR — single canonical palette
     ============================================================ */
  --pz-ink:        #1c1917;
  --pz-ink-2:      #44403c;
  --pz-mute:       #78716c;
  --pz-mute-2:     #a8a29e;
  --pz-paper:      #fafaf9;
  --pz-paper-2:    #f5f5f4;
  --pz-line:       rgba(28, 25, 23, 0.08);
  --pz-line-2:     rgba(28, 25, 23, 0.04);
  --pz-orange:     #c2410c;
  --pz-orange-2:   #9a3412;
  --pz-orange-soft: #fed7aa;
  --pz-orange-bright: #ff6b35;

  /* ============================================================
     MOTION — 2 eases, 3 durations
     ============================================================ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --t-1: 180ms;   /* micro: hover, focus, press */
  --t-2: 360ms;   /* medium: card, reveal */
  --t-3: 720ms;   /* cinematic: hero, page enter */
}

/* Section-y expands at breakpoints */
@media (min-width: 720px) {
  :root { --pz-section-y: 3.5rem; }
}
@media (min-width: 1024px) {
  :root { --pz-section-y: 5rem; }
}