/* Growthfully Brand Colors & Variables
   Based on brand guidelines from handover document */

:root {
  /* Primary Colors */
  --mallard: #304e25;        /* Authority, stability, growth */
  --chelsea-cucumber: #83b461; /* Vitality, optimism, progress */
  --green-mist: #cbd3ac;     /* Calm, balance, sophistication */
  
  /* Supporting Colors */
  --envy: #94a494;           /* Harmony, wisdom, maturity */
  --red-damask: #d9773b;     /* Energy, warmth, action */
  
  /* Neutral Foundation */
  --charcoal: #2c2c2c;       /* Primary text, premium feel */
  --warm-grey: #6b6b6b;      /* Secondary text, elegant restraint */
  --light-sage: #f7f8f5;     /* Background, breathing space */
  --pure-white: #ffffff;     /* Clean backgrounds, maximum contrast */
  
  /* Spacing Scale (8px base system) */
  --spacing-xs: 8px;    /* Fine adjustments */
  --spacing-sm: 16px;   /* Component spacing */
  --spacing-md: 24px;   /* Section spacing */
  --spacing-lg: 48px;   /* Layout spacing */
  --spacing-xl: 72px;   /* Major section breaks */
  --spacing-xxl: 96px;  /* Page section divisions */
  
  /* Typography Scale */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Inter', 'Arial', sans-serif;
  
  /* Font Sizes */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 2.25rem;  /* 36px */
  --text-4xl: 3rem;     /* 48px */
  --text-5xl: 4rem;     /* 64px - for large hero text */
  
  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.5;
  --leading-loose: 1.6;
  
  /* Container & Grid */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);
  --grid-columns: 12;
  --grid-gap: var(--spacing-md);
  
  /* Responsive Breakpoints */
  --breakpoint-xs: 360px;   /* Small Mobile (Galaxy S8, etc.) */
  --breakpoint-sm: 375px;   /* Mobile (iPhone 6/7/8, iPhone X) */
  --breakpoint-md: 414px;   /* Large Mobile (iPhone 6/7/8 Plus) */
  --breakpoint-lg: 480px;   /* Small Tablet */
  --breakpoint-tablet: 768px;   /* Tablet */
  --breakpoint-desktop: 1024px;  /* Desktop */
  --breakpoint-xl: 1200px;  /* Large Desktop */
  --breakpoint-xxl: 1366px; /* Wide Desktop */
  --breakpoint-xxxl: 1920px; /* Ultra Wide */
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}