/* ============================================================
   DESIGN TOKENS — Single source of truth for all design values
   Edit here to update the entire site.
   ============================================================ */

:root {

  /* --- Brand Greens --- */
  --color-primary:         rgb(255, 212, 133);   /* Deep forest green — main brand */
  --color-primary-dark:    rgb(197, 160, 89);   /* Darkest green — text on light, btn bg */
  --color-primary-mid:     #145737;   /* Medium dark green */
  --color-primary-light:   #1C6A43;   /* Forest green — gradients */
  --color-primary-bright:  #17814C;   /* Bright green — gradients */
  --color-primary-pale:    #07160e;   /* Very light green — section backgrounds */
  --color-primary-sage:    #a7d6bf;   /* Sage / mint — pillar text, dividers */

  /* --- Neutrals & Warm Tones --- */
  --color-text-base:       rgb(197, 160, 89);   /* Dark warm brown — body text, nav, footer */
  --color-text-muted:      rgb(197, 160, 89);   /* Muted taupe — hero text */
  --color-text-quote:      #444945;   /* Gray-brown — testimonials */
  --color-text-light:      #ffffff;
  --color-bg-body:         #000000;
  --color-bg-hero:         rgb(3, 26, 8);   /* Warm beige — hero content bg */
  --color-bg-cream:        #F4EFE6;   /* Cream — button bg, tints */
  --color-bg-card:         #e8ddd1;   /* Product card default bg */

  /* --- Accent --- */
  --color-gold:            #B3882A;   /* Gold — event title accent */

  /* --- Section Backgrounds (gradients defined in main.css) --- */
  --color-bg-pale-green:   #F4FFF9;   /* Testimonials, collection, philosophy, event */

  /* --- Borders / Dividers --- */
  --color-divider:         rgba(9, 46, 28, 0.20);
  --color-divider-sage:    rgba(167, 214, 191, 0.30);
  --color-divider-sage-strong: rgba(167, 214, 191, 0.55);

  /* --- Product Hover Gradients (unique per blend) --- */
  --gradient-ar: linear-gradient(135deg, #B53505, #551902);        /* Antioxidant Rooi */
  --gradient-mm: linear-gradient(90deg, #1C6A43 0%, #145737 35%, #0B422A 70%, #052F1E 100%);  /* Moroccan Mint */
  --gradient-ss: linear-gradient(90deg, #C83F5E 0%, #8B1722 100%); /* Strawberry Saga */
  --gradient-cc: linear-gradient(90deg, #816E43 0%, #4C3C1E 100%); /* Calming Chamomile */
  --gradient-gc: linear-gradient(90deg, #F27354 0%, #AA1902 100%); /* Ginger Candy */
  --gradient-tp: linear-gradient(90deg, #533531 0%, #231816 100%); /* Turkish Premium */

  /* --- Section Gradients --- */
  --gradient-gifting:   linear-gradient(47.17deg, rgb(1, 61, 45) 1.2%, rgb(26, 38, 25) 58.3%, rgb(0, 71, 40) 82.8%);
  --gradient-cg:         linear-gradient(47.17deg, rgb(1, 61, 45) 1.2%, rgb(26, 38, 25) 58.3%, rgb(0, 71, 40) 82.8%);
  --gradient-pillar:    linear-gradient(88deg, rgb(9,46,28) 0%, rgb(28,106,67) 109%);
  --gradient-founder:   linear-gradient(100deg, #0B422A 0%, #17814C 100%);
  --gradient-contact:   linear-gradient(to bottom, #EAE0D4, #ffffff);

  /* --- Typography --- */
  --font-heading:  'Playfair Display', serif;
  --font-body:     'Poppins', sans-serif;

  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.875rem;   /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-md:    1.0625rem;  /* 17px */
  --font-size-lg:    1.125rem;   /* 18px */
  --font-size-xl:    1.25rem;    /* 20px */
  --font-size-2xl:   1.5625rem;  /* 25px */
  --font-size-3xl:   2.25rem;    /* 36px */
  --font-size-4xl:   2.875rem;   /* 46px */
  --font-size-5xl:   3.25rem;    /* 52px */
  --font-size-hero:  4.375rem;   /* 70px — hero tagline */
  --font-size-hero-name: 2.5rem; /* 40px — hero brand name */

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.2;
  --line-height-snug:   1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose:   1.85;

  /* --- Spacing Scale (4px base) --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-13:  3.25rem;   /* 52px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-18:  4.5rem;    /* 72px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-25:  6.25rem;   /* 100px */

  /* --- Layout --- */
  --container-max:      1640px;
  --container-pad:      var(--space-10);  /* 40px side padding — matches 170px / 4 scale  */
  --container-pad-wide: 10.625rem;        /* 170px — collection/philosophy/contact */

  /* --- Borders & Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal: 500ms ease;
  --transition-slide:  0.5s ease;
  --transition-zoom:   0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* --- Z-index Scale --- */
  --z-base:    0;
  --z-raised:  1;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   9999;

  /* --- Button Sizes --- */
  --btn-height-sm:   46px;
  --btn-height-md:   50px;
  --btn-height-lg:   52px;
  --btn-height-xl:   56px;

  /* --- Nav & Header --- */
  --nav-padding: var(--space-5) var(--space-10);

}

/* ============================================================
   RESPONSIVE TOKEN OVERRIDES
   All breakpoints update :root tokens — not individual components
   ============================================================ */

/* --- Small Laptop / 13" (max 1024px) --- */
@media (max-width: 1024px) {
  :root {
    --font-size-hero:     3.5rem;   /* 56px */
    --font-size-5xl:      2.75rem;  /* 44px */
    --font-size-4xl:      2.375rem; /* 38px */
    --font-size-3xl:      2rem;     /* 32px */
    --container-pad-wide: var(--space-10);
  }
}

/* --- Tablet (max 768px) --- */
@media (max-width: 768px) {
  :root {
    --font-size-hero:          2.375rem; /* 38px */
    --font-size-hero-name:     1.625rem; /* 26px */
    --font-size-5xl:           1.875rem; /* 30px */
    --font-size-4xl:           2rem;     /* 32px */
    --font-size-3xl:           1.625rem; /* 26px */
    --font-size-2xl:           1.125rem; /* 18px */
    --container-pad-wide:      var(--space-5);
    --container-pad:           var(--space-5);
    --nav-padding:             var(--space-5);
  }
}

/* --- Mobile (max 480px) --- */
@media (max-width: 480px) {
  :root {
    --font-size-hero:     2.375rem;
    --container-pad:      var(--space-5);
  }
}