/* ============================================================
   WellnessAIStudio — Design Tokens & CSS Variables
   ============================================================ */

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

:root {
  /* Brand Palette */
  --sage:        #4a7c59;
  --sage-light:  #6aa07a;
  --sage-deep:   #2d5a3d;
  --sage-pale:   #e8f0ea;
  --saffron:     #e8a020;
  --saffron-warm:#f0b840;
  --clay:        #c4704a;
  --clay-light:  #d4896a;

  /* Neutrals */
  --cream:       #faf7f2;
  --cream-dark:  #f0ebe0;
  --charcoal:    #1a1f1c;
  --charcoal-soft:#2e3530;
  --mist:        #8a9e8f;
  --white:       #ffffff;
  --text-body:   #3a4a3e;
  --text-light:  #6b7d70;
  --border:      rgba(0,0,0,0.07);
  --border-dark: rgba(255,255,255,0.10);

  /* Gradients */
  --gradient-hero:  linear-gradient(135deg, #0d1f15 0%, #1a3325 50%, #0d2218 100%);
  --gradient-sage:  linear-gradient(135deg, #2d5a3d, #4a7c59);
  --gradient-warm:  linear-gradient(135deg, #e8a020, #c4704a);
  --gradient-card:  linear-gradient(135deg, rgba(74,124,89,0.06), rgba(232,160,32,0.04));

  /* Spacing */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  48px;
  --spacing-xl:  80px;
  --spacing-2xl: 120px;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.12);
  --shadow-sage: 0 8px 32px rgba(74,124,89,0.20);
  --shadow-saffron: 0 8px 32px rgba(232,160,32,0.25);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.45s ease;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 72px;
}