/* ==========================================================================
   Design Tokens — Vital-Booster
   ========================================================================== */

:root {
  /* Colors — Nature & Organic palette */
  --color-primary-900: #1a3a2a;  /* Forest Deep */
  --color-primary-700: #2d5a3d;  /* Forest */
  --color-primary-500: #4a7c59;  /* Sage */
  --color-primary-300: #7db08a;  /* Sage Light */
  --color-primary-100: #e8f5ec;  /* Mint Cream */

  --color-secondary-700: #8b6b47; /* Warm Earth */
  --color-secondary-500: #c9a96e; /* Sand */
  --color-secondary-300: #e8d5b7; /* Cream */
  --color-secondary-100: #faf6f0; /* Soft Cream */

  --color-neutral-900: #2c2c2c;  /* Charcoal */
  --color-neutral-700: #555555;  /* Dark Gray */
  --color-neutral-500: #888888;  /* Medium Gray */
  --color-neutral-300: #d4d4d4;  /* Light Gray */
  --color-neutral-100: #f5f5f5;  /* Near White */
  --color-neutral-50:  #ffffff;  /* White */

  --color-accent: #d4a843;       /* Gold */
  --color-success: #5cb85c;      /* Nature Green */

  /* Typography */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-2xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-3xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);

  /* Spacing (4px base) */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 50px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-6);

  /* Header */
  --header-height: 80px;
}