/* ==========================================================================
   GWellth Foods v2.0 — Design System Variables & Base Resets
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&family=DM+Serif+Display&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors - Himalayan Editorial Luxury */
  --color-valley-green:    hsl(152, 38%, 14%);   /* Deep Himalayan pine — primary brand */
  --color-wild-honey:      hsl(36, 88%, 50%);    /* Raw honey amber — gold accent */
  --color-ghee-cream:      hsl(38, 40%, 96%);    /* Warm off-white background */
  --color-stone-oat:       hsl(34, 18%, 91%);    /* Card/section containers */
  
  --color-turmeric-glow:   hsl(44, 95%, 60%);    /* Highlight / sale badges */
  --color-terracotta:      hsl(14, 62%, 47%);    /* CTA buttons, urgency alerts */
  --color-ragi-brown:      hsl(25, 35%, 32%);    /* Secondary text, dividers */
  --color-mist-white:      hsl(0, 0%, 99%);      /* Clean card backgrounds */
  
  /* Functional Colors */
  --color-gut-green:       hsl(142, 52%, 42%);   /* Gut health tag */
  --color-diabetic-blue:   hsl(210, 60%, 45%);   /* Diabetic-friendly tag */
  --color-immunity-orange: hsl(28, 90%, 54%);    /* Immunity tag */
  
  /* Fonts */
  --font-display:   'Cormorant Garamond', serif;   /* Luxury display headings */
  --font-heading:   'DM Serif Display', serif;     /* Section headers */
  --font-body:      'Jost', sans-serif;            /* Body copy — modern Indian */
  --font-mono:      'DM Mono', monospace;          /* Ingredient specs, data */

  /* UI Tokens */
  --shadow-card:    0 4px 20px hsla(152, 40%, 10%, 0.05);
  --shadow-hover:   0 12px 36px hsla(152, 40%, 10%, 0.12);
  --shadow-kart:    -8px 0 48px hsla(0, 0%, 0%, 0.15);
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-spring: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-ghee-cream);
  color: var(--color-valley-green);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.25;
}

/* UI Elements */
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 9999px; /* pill */
  transition: var(--transition-smooth);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.btn-primary {
  background-color: var(--color-terracotta);
  color: var(--color-ghee-cream);
}

.btn-primary:hover {
  background-color: hsl(14, 62%, 40%);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(206, 66, 32, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-valley-green);
  border: 1px solid var(--color-valley-green);
}

.btn-secondary:hover {
  background-color: var(--color-valley-green);
  color: var(--color-ghee-cream);
  transform: translateY(-2px);
}

.btn-secondary-outline {
  border: 1px solid var(--color-ragi-brown);
  color: var(--color-ragi-brown);
  padding: 8px 18px;
  font-size: 0.85rem;
}

.btn-secondary-outline:hover {
  background-color: var(--color-stone-oat);
  color: var(--color-valley-green);
  border-color: var(--color-valley-green);
}

/* Generic Layout Wrapper */
.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-valley-green);
  margin-bottom: 15px;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--color-ragi-brown);
}

/* Scrollbar Sizing */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-ghee-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--color-stone-oat);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-ragi-brown);
}