:root {
  /* =========================================
     COLORS
     ========================================= */
  --color-black-1: #231f20;
  --color-dark-brown-1: #694a1d;
  --color-light-brown-1: #a97c50;
  --color-sand-1: #e6ddc9;
  --color-sand-2: #E8E5D6;
  --color-sand-3: #ece5d9;
  --color-off-white-1: #fffef2;

  /* =========================================
     GRADIENTS
     ========================================= */
  /* 1. Original: The Golden Husk (Bronze to Deep Earth) */
  --colour-grad-1: linear-gradient(135deg, #be862c 30%, #694a1e 70%);

  /* 2. New: The Morning Mist (Linen to Sand - Very subtle/Zen) */
  --colour-grad-2: linear-gradient(180deg, #E8E5D6 0%, #ece5d9 100%);

  /* 3. New: The Sunbeam (Light Gold to Sand Veil) */
  --colour-grad-3: linear-gradient(to bottom right, #be862c 0%, #e6ddc9 100%);

  /* 4. New: The Deep Shade (Dark Brown to Charcoal - For dark sections) */
  --colour-grad-4: linear-gradient(135deg, #694a1d 0%, #231f20 100%);

  /* =========================================
     BORDER RADIUS
     ========================================= */
  --radius-xs: 0.125rem; /* 2px - mapped from DEFAULT */
  --radius-sm: 0.25rem;  /* 4px - mapped from lg */
  --radius-md: 0.5rem;   /* 8px - mapped from xl */
  --radius-lg: 0.75rem;  /* 12px - mapped from full */

  /* =========================================
     TYPOGRAPHY (FLUID & RESPONSIVE)
     Format: clamp(Mobile Min, Fluid Scaling, Desktop Max)
     ========================================= */
  --font-header: 'Cronde', serif;
  --font-secondary: 'Manison Regular', sans-serif;
  --font-accent: 'Glitten Regular', cursive;

  /* Label / Caption: Scales from 11px to 12px */
  --font-label-size: clamp(0.6875rem, 0.5vw + 0.5rem, 0.75rem);
  --font-label-weight: 600;
  --font-label-lh: 1.4;
  --font-label-ls: 0.1em;
  
  /* Body Small: Scales from 14px to 16px */
  --font-body-sm-size: clamp(0.875rem, 1vw + 0.6rem, 1rem);
  --font-body-sm-weight: 400;
  --font-body-sm-lh: 1.6;

  /* Body Medium: Scales from 16px to 18px */
  --font-body-md-size: clamp(1rem, 1vw + 0.75rem, 1.125rem);
  --font-body-md-weight: 400;
  --font-body-md-lh: 1.6;

  /* Heading 2: Scales from 24px to 32px */
  --font-body-h2-size: clamp(1.5rem, 2vw + 1rem, 2rem);
  --font-body-h2-weight: 400;
  --font-body-h2-lh: 1.2;

  /* Heading 1: Scales from 32px to 48px */
  --font-body-h1-size: clamp(2rem, 4vw + 1rem, 3rem);
  --font-body-h1-weight: 300;
  --font-body-h1-lh: 1.1;
  --font-body-h1-ls: -0.02em;
}

  /* =========================================
     BOX SHADOWS
     Extracted from the inline utility classes
     ========================================= */
  --box-shadow-1: 0 30px 60px -15px rgba(169, 124, 80, 0.1); /* Hero Image Shadow */
  --box-shadow-2: 0 20px 40px -10px rgba(169, 124, 80, 0.3); /* Button Shadow */
}

/* Base class for gradient text */
.text-gradient {
  display: inline-block; /* Ensures the gradient spans the text correctly */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; /* Fallback */
}

/* Apply your specific tokens */

/* Golden Husk Gradient Text (Bronze/Earth) */
.text-grad-golden {
  background-image: var(--colour-grad-1);
}

/* Sunbeam Gradient Text (Gold/Sand) */
.text-grad-sunbeam {
  background-image: var(--colour-grad-3);
}

/* Deep Shade Gradient Text (Dark Brown/Charcoal) */
.text-grad-deep {
  background-image: var(--colour-grad-4);
}