/* ==========================================
   CSS VARIABLES - EASY CUSTOMIZATION
   ========================================== 
   
   Change these variables to customize the entire template!
   All colors, fonts, and spacing are controlled here.
*/

:root {
  /* ==========================================
     COLOR SCHEME
     Change these to match your brand!
     ========================================== */
  
  /* Primary Colors */
  --primary-color: #FF6B6B;           /* Main accent color (buttons, links, highlights) */
  --primary-hover: #ff5252;           /* Primary color on hover */
  --secondary-color: #4ECDC4;         /* Secondary accent color */
  --secondary-hover: #3db8ae;         /* Secondary color on hover */
  --accent-color: #FFE66D;            /* Highlight/accent color */
  
  /* Text Colors */
  --text-dark: #2c3e50;               /* Main text color */
  --text-medium: #555555;             /* Medium text color */
  --text-light: #666666;              /* Light text color */
  --text-white: #ffffff;              /* White text */
  --text-khaki: #113731;
  --text-navy: #375982;
  
  /* Background Colors */
  --bg-primary: #ffffff;              /* Main background */
  --bg-secondary: #f8f9fa;            /* Secondary background */
  --bg-dark: #2c3e50;                 /* Dark background (footer, etc.) */
  
  /* Border & Divider Colors */
  --border-color: #e0e0e0;            /* Default border color */
  --divider-color: #ecf0f1;           /* Divider lines */
  
  /* Hero Background Gradient */
  --hero-gradient: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 50%, #90EE90 100%);
  
  
  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  
  /* Font Families */
  --font-primary: 'Georgia', serif;   /* Main font */
  --font-secondary: 'Helvetica Neue', sans-serif; /* Secondary font */
  
  /* Font Sizes */
  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-medium: 18px;
  --font-size-large: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 56px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  
  
  /* ==========================================
     SPACING
     ========================================== */
  
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  
  
  /* ==========================================
     LAYOUT
     ========================================== */
  
  --nav-height: 70px;                 /* Navigation bar height */
  --container-max-width: 1400px;      /* Maximum content width */
  --content-max-width: 900px;         /* Maximum text content width */
  
  
  /* ==========================================
     BORDER RADIUS
     ========================================== */
  
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-full: 9999px;              /* Fully rounded (pills, circles) */
  
  
  /* ==========================================
     SHADOWS
     ========================================== */
  
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 5px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);
  
  
  /* ==========================================
     TRANSITIONS
     ========================================== */
  
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  
  /* ==========================================
     Z-INDEX LAYERS
     ========================================== */
  
  --z-negative: -1;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-fixed: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}


/* ==========================================
   ALTERNATIVE COLOR SCHEMES
   Uncomment one of these to use a different theme
   ========================================== */

/* OCEAN BLUE THEME */
/*
:root {
  --primary-color: #16a085;
  --primary-hover: #138871;
  --secondary-color: #2980b9;
  --secondary-hover: #206a9c;
  --accent-color: #f1c40f;
  --hero-gradient: linear-gradient(to bottom, #34495e 0%, #2c3e50 50%, #1a252f 100%);
}
*/

/* SUNSET ORANGE THEME */
/*
:root {
  --primary-color: #e67e22;
  --primary-hover: #d35400;
  --secondary-color: #c0392b;
  --secondary-hover: #a93226;
  --accent-color: #f39c12;
  --hero-gradient: linear-gradient(to bottom, #8B4513 0%, #A0522D 50%, #8B4513 100%);
}
*/

/* FOREST GREEN THEME */
/*
:root {
  --primary-color: #27ae60;
  --primary-hover: #229954;
  --secondary-color: #16a085;
  --secondary-hover: #138d75;
  --accent-color: #f39c12;
  --hero-gradient: linear-gradient(to bottom, #2ecc71 0%, #27ae60 50%, #229954 100%);
}
*/

/* PURPLE DREAM THEME */
/*
:root {
  --primary-color: #9b59b6;
  --primary-hover: #8e44ad;
  --secondary-color: #e74c3c;
  --secondary-hover: #c0392b;
  --accent-color: #f1c40f;
  --hero-gradient: linear-gradient(to bottom, #667eea 0%, #764ba2 50%, #5b3a7f 100%);
}
*/