:root {
  /* ==========================================================================
     FONTS
     ========================================================================== */
  --font-body: 'MB Empire', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: 'MB Empire', system-ui, sans-serif;

  /* Font weights */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-book: 400;
  --font-weight-medium: 500;

  /* Element-specific weights */
  --font-weight-h1: var(--font-weight-thin);    /* Thin */
  --font-weight-h2: var(--font-weight-thin);    /* Thin */
  --font-weight-h3: var(--font-weight-thin);    /* Thin */
  --font-weight-h4: var(--font-weight-light);   /* Light */
  --font-weight-h5: var(--font-weight-light);   /* Light */
  --font-weight-h6: var(--font-weight-light);   /* Light */
  --font-weight-body: var(--font-weight-light); /* Light */
  --font-weight-link: var(--font-weight-book);  /* Regular */

  /* ==========================================================================
     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(1.688rem, 2.75vw, 2.75rem);  /* 27px → 44px */

  /* ==========================================================================
     COLORS
     Change these four values when cloning for a new client
     ========================================================================== */
  --color-primary: #2b3f17;
  --color-accent: #c7deb1;
  --color-text: #000000;
  --color-bg: #f5f5f5;
  --color-footer-bg: #2b3f17;

  /* ==========================================================================
     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;
}