:root {
  /* ==========================================================================
     FONTS
     ========================================================================== */
  --font-body: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: 'Cinzel', Georgia, serif;
  --font-accent: 'Cinzel', Georgia, serif;

 /* Font weights — Nunito Sans variable font */
  --font-weight-light: 300;
  --font-weight-body: 350;
  --font-weight-book: 400;
  --font-weight-semibold: 600;

  /* Element-specific weights */
  --font-weight-h1: var(--font-weight-book);       /* 400 — Cinzel Regular */
  --font-weight-h2: var(--font-weight-book);       /* 400 — Cinzel Regular */
  --font-weight-h3: var(--font-weight-book);       /* 400 — Cinzel Regular */
  --font-weight-h4: var(--font-weight-body);       /* 350 */
  --font-weight-h5: var(--font-weight-body);       /* 350 */
  --font-weight-h6: var(--font-weight-semibold);   /* 600 */
  --font-weight-nav: var(--font-weight-semibold);  /* 600 — nav, buttons, eyebrows */
  --font-weight-link: var(--font-weight-book);     /* 400 */

  /* ==========================================================================
     FLUID TYPOGRAPHY
     Using clamp(min, preferred, max)
     Scales smoothly from 320px to 1920px viewport
     ========================================================================== */
  
  /* Headings */
  --font-size-h1: clamp(2.25rem, 5vw + 1rem, 4.5rem);      /* 36px → 72px */
  --font-size-h2: clamp(1.875rem, 3vw + 1rem, 3rem);       /* 30px → 48px */
  --font-size-h3: clamp(1.5rem, 2vw + 1rem, 2.25rem);      /* 24px → 36px */
  --font-size-h4: clamp(1.25rem, 1.5vw + 0.8rem, 1.75rem); /* 20px → 28px */
  --font-size-h5: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);  /* 18px → 24px */
  --font-size-h6: clamp(0.938rem, 0.5vw + 0.75rem, 1.125rem);  /* 15px → 18px */

  /* Body text */
  --font-size-body: clamp(0.938rem, 0.3vw + 0.85rem, 1.063rem);  /* 15px → 17px */
  
    /* Blockquote */
  --font-size-blockquote: clamp(2.1rem, 2.5vw, 2.6rem);  /* ~34px → ~42px */

  /* ==========================================================================
     COLORS
     Change these four values when cloning for a new client
     ========================================================================== */
  --color-primary: #1e9eb7;
  --color-accent: #e4f5f7;
  --color-text: #231f20;
  --color-bg: #ffffff;
  --color-footer-bg: #ffffff;

  /* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */
  --radius-sm: 6px;
  --radius-md: 12px;

  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 36px;

  --container-max: 1200px;
}