/* 
===========================================
Professional Color Theme Variables
===========================================
This file contains all color variables for the website.
Import this file in all CSS files to maintain consistency.
*/

:root {
  /* Primary Colors - Fresh Blue and Yellow Theme */
  --primary-color: #2563eb;          /* Bright Blue - modern and fresh */
  --primary-light: #60a5fa;          /* Light Blue */
  --primary-dark: #1d4ed8;           /* Darker Blue */
  
  /* Secondary Colors - Vibrant Yellow Accent */
  --secondary-color: #fbbf24;        /* Vibrant Yellow - energetic accent */
  --secondary-light: #fde047;        /* Light Yellow */
  --secondary-dark: #f59e0b;         /* Darker Yellow/Amber */
  
  /* Neutral Colors */
  --white-color: #ffffff;
  --black-color: #1f2937;            /* Dark Gray for text */
  --light-gray: #f8fafc;             /* Very light background */
  --medium-gray: #e5e7eb;            /* Border and divider color */
  --dark-gray: #374151;              /* Text color */
  
  /* Text Colors */
  --text-primary: #1f2937;           /* Main text color */
  --text-secondary: #6b7280;         /* Secondary text, descriptions */
  --text-muted: #9ca3af;             /* Muted text */
  
  /* Background Colors */
  --bg-primary: #ffffff;             /* Main background */
  --bg-secondary: #f8fafc;           /* Secondary background */
  --bg-accent: #eff6ff;              /* Light blue accent background */
  --footer-bg: #2563eb;              /* Footer background - blue */
  
  /* State Colors */
  --success-color: #10b981;          /* Green for success */
  --warning-color: #f59e0b;          /* Yellow for warnings */
  --error-color: #ef4444;            /* Red for errors */
  --info-color: #2563eb;             /* Blue for info */
  
  /* Interactive Colors */
  --link-color: #2563eb;             /* Link color */
  --link-hover: #1d4ed8;             /* Link hover color */
  --button-primary: #2563eb;         /* Primary button */
  --button-primary-hover: #1d4ed8;   /* Primary button hover */
  --button-secondary: #fbbf24;       /* Secondary button */
  --button-secondary-hover: #f59e0b; /* Secondary button hover */
  
  /* Updated Home Page Colors - No Gradients, Solid Colors */
  --primary-solid: #2563eb;          /* Solid blue */
  --secondary-solid: #fbbf24;        /* Solid yellow */
  --accent-blue-light: #eff6ff;      /* Very light blue for backgrounds */
  --accent-yellow-light: #fefce8;    /* Very light yellow for backgrounds */
  
  /* Shadow Variables - Updated for blue theme */
  --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 15px 35px rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 8px 15px rgba(37, 99, 235, 0.3);
  --shadow-card: 0 10px 30px rgba(37, 99, 235, 0.2);
  
  /* Text Colors for Home Page */
  --text-light: #555;                /* Light text on white backgrounds */
  --text-medium: #666;               /* Medium gray text */
  --text-white: #ffffff;             /* White text */
  --text-contrast: #333;             /* High contrast text */
  
  /* Background Variations */
  --bg-highlight: #f8fafc;           /* Highlight background */
  --bg-card: rgba(255, 255, 255, 0.9); /* Card background with transparency */
  --bg-overlay: rgba(0, 0, 0, 0.4);  /* Dark overlay */
  
  /* Border Colors */
  --border-light: #e2e8f0;           /* Light borders */
  --border-medium: #cbd5e1;          /* Medium borders */
  --border-dark: #94a3b8;            /* Dark borders */
  
  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);
  
  /* Legacy Color Mappings (for backward compatibility) */
  --mainColor: var(--primary-color);         /* Replaces #ff7e84 */
  --secounderyColor: var(--secondary-color); /* Replaces #30bead */
  --paragraphColor: var(--text-secondary);   /* Replaces #7b7b8a */
  --whiteColor: var(--white-color);
  --blackColor: var(--black-color);
  --footerColor: var(--footer-bg);
  
  /* Typography */
  --fontFamily: 'DM Sans', sans-serif;
  --fontSize: 18px;
  --transition: .5s;
}

/* Color Usage Guidelines (Comment Block)
===========================================
PRIMARY USAGE:
- --primary-color: Main branding, headers, primary buttons
- --primary-light: Hover states, active states
- --primary-dark: Borders, focus states

SECONDARY USAGE:
- --secondary-color: Secondary buttons, accents, badges
- --secondary-light: Subtle highlights
- --secondary-dark: Strong accents

TEXT USAGE:
- --text-primary: Main headings, important text
- --text-secondary: Body text, descriptions
- --text-muted: Placeholders, disabled text

BACKGROUND USAGE:
- --bg-primary: Main content areas
- --bg-secondary: Sidebars, cards
- --bg-accent: Highlighted sections

INTERACTIVE USAGE:
- --button-primary: Main action buttons
- --button-secondary: Secondary actions
- --link-color: All links
*/

/* Legacy variable mappings for existing CSS compatibility */
:root {
  --mainColor: var(--primary-color);  /* Maps to blue for existing styles */
  --whiteColor: #ffffff;
  --blackColor: #1f2937;
  --paragraphColor: #6b7280;
  --fontSize: 16px;
  --fontFamily: 'DM Sans', sans-serif;
  --transition: all 0.3s ease;
}