/* ===== CSS Variables - Natural/Earthy Design System ===== */
:root {
  /* ===== Color Palette ===== */
  /* Primary Colors - Warm Orange */
  --primary-orange: #E67E22;
  --primary-orange-light: #F39C12;
  --primary-orange-dark: #D35400;
  --primary-orange-50: #FEF5E7;
  --primary-orange-100: #FDEBD0;
  --primary-orange-200: #FAD7A1;
  --primary-orange-300: #F8C471;
  --primary-orange-400: #F5B041;
  --primary-orange-500: #E67E22;
  --primary-orange-600: #D35400;
  --primary-orange-700: #BA4A00;
  --primary-orange-800: #A04000;
  --primary-orange-900: #7D3200;

  /* Secondary Colors - Sage Green */
  --secondary-sage: #6B8E23;
  --secondary-sage-light: #8FBC8F;
  --secondary-sage-dark: #556B2F;
  --secondary-sage-50: #F0F4E8;
  --secondary-sage-100: #E1E9D1;
  --secondary-sage-200: #C3D3A3;
  --secondary-sage-300: #A5BD75;
  --secondary-sage-400: #87A747;
  --secondary-sage-500: #6B8E23;
  --secondary-sage-600: #5A7A1E;
  --secondary-sage-700: #496619;
  --secondary-sage-800: #385214;
  --secondary-sage-900: #273E0F;

  /* Neutral Colors - Warm Beige/Cream */
  --neutral-cream: #F5F1E8;
  --neutral-cream-light: #E8E3D6;
  --neutral-cream-dark: #D4C4A8;
  --neutral-white: #FFFFFF;
  --neutral-off-white: #FEFCF9;
  --neutral-light: #F9F7F3;
  --neutral-medium: #E8E3D6;
  --neutral-dark: #D4C4A8;

  /* Text Colors - Deep Brown */
  --text-primary: #3E2723;
  --text-secondary: #5D4037;
  --text-tertiary: #8D6E63;
  --text-light: #A1887F;
  --text-lighter: #BCAAA4;
  --text-disabled: #D7CCC8;

  /* Accent Colors - Warm Gold */
  --accent-gold: #F39C12;
  --accent-gold-light: #F7DC6F;
  --accent-gold-dark: #E67E22;
  --accent-gold-50: #FEF9E7;
  --accent-gold-100: #FDF2CF;
  --accent-gold-200: #FBE59F;
  --accent-gold-300: #F9D86F;
  --accent-gold-400: #F7CB3F;
  --accent-gold-500: #F39C12;
  --accent-gold-600: #E67E22;
  --accent-gold-700: #D35400;
  --accent-gold-800: #BA4A00;
  --accent-gold-900: #A04000;

  /* Status Colors */
  --success-green: #2E7D32;
  --success-green-light: #4CAF50;
  --success-green-dark: #1B5E20;
  --error-red: #C62828;
  --error-red-light: #F44336;
  --error-red-dark: #B71C1C;
  --warning-orange: #F57C00;
  --warning-orange-light: #FF9800;
  --warning-orange-dark: #E65100;
  --info-blue: #1976D2;
  --info-blue-light: #2196F3;
  --info-blue-dark: #0D47A1;

  /* ===== Typography ===== */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ===== Spacing ===== */
  --space-0: 0;
  --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-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ===== Border Radius ===== */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-base: 0.5rem;  /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-2xl: 2rem;     /* 32px */
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px 0 rgba(62, 39, 35, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(62, 39, 35, 0.1), 0 1px 2px 0 rgba(62, 39, 35, 0.06);
  --shadow-base: 0 4px 6px -1px rgba(62, 39, 35, 0.1), 0 2px 4px -1px rgba(62, 39, 35, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(62, 39, 35, 0.1), 0 4px 6px -2px rgba(62, 39, 35, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(62, 39, 35, 0.1), 0 10px 10px -5px rgba(62, 39, 35, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(62, 39, 35, 0.25);
  --shadow-2xl: 0 25px 50px -12px rgba(62, 39, 35, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(62, 39, 35, 0.06);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-all: all var(--transition-base);

  /* ===== Z-Index ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ===== Breakpoints ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ===== Container Sizes ===== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* ===== Component Specific ===== */
  /* Navbar */
  --navbar-height: 4rem;
  --navbar-bg: var(--neutral-white);
  --navbar-shadow: var(--shadow-sm);

  /* Footer */
  --footer-bg: var(--text-primary);
  --footer-text: var(--neutral-white);

  /* Cards */
  --card-bg: var(--neutral-white);
  --card-border: var(--neutral-medium);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Buttons */
  --btn-primary-bg: var(--primary-orange);
  --btn-primary-hover: var(--primary-orange-dark);
  --btn-secondary-bg: var(--secondary-sage);
  --btn-secondary-hover: var(--secondary-sage-dark);
  --btn-outline-border: var(--primary-orange);
  --btn-outline-text: var(--primary-orange);

  /* Forms */
  --input-bg: var(--neutral-white);
  --input-border: var(--neutral-medium);
  --input-border-focus: var(--primary-orange);
  --input-shadow-focus: 0 0 0 3px rgba(230, 126, 34, 0.1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange-light) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-sage) 0%, var(--secondary-sage-light) 100%);
  --gradient-hero: linear-gradient(135deg, var(--neutral-cream) 0%, var(--neutral-cream-light) 100%);
  --gradient-warm: linear-gradient(135deg, var(--primary-orange-50) 0%, var(--neutral-cream) 100%);
}