/* ===================================
   CSS Variables - Easy Theme Customization
   =================================== */

:root {
  /* Modern Healthcare Color Palette - LIGHT MODE */
  --primary-color: #3A7CA5;        /* Blue-Teal Primary */
  --primary-hover: #26667A;        /* Darker Blue-Teal on hover */
  --primary-light: #D4E7F0;        /* Light Blue-Teal background */
  --secondary-color: #8FD694;      /* Light Green Secondary */
  --accent-color: #B3A7E1;         /* Light Purple Accent */
  --accent-purple: #B3A7E1;        /* Light Purple Accent */
  --accent-orange: #E67A73;        /* Coral/Error Color */
  --accent-green: #8FD694;         /* Green for success */

  /* Background Colors */
  --background-color: #FAFAFA;     /* Very light gray */
  --background-light: #F4F6F8;     /* Light gray-blue surface */
  --background-lighter: #F8F9FB;   /* Even lighter */
  --background-dark: #0f172a;      /* Deep navy (for footer) */
  --background-gradient: linear-gradient(135deg, #3A7CA5 0%, #8FD694 100%);

  /* Text Colors */
  --text-color: #2B2B2B;           /* Dark gray primary text */
  --text-light: #6C757D;           /* Medium gray secondary text */
  --text-lighter: #9CA3AF;         /* Light gray tertiary text */
  --text-white: #ffffff;

  /* Error/Alert Colors */
  --error-color: #E67A73;          /* Coral error color */
  --success-color: #8FD694;        /* Green success color */
  --warning-color: #F4A261;        /* Orange warning color */

  /* Border & Shadow */
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Fonts */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Font Sizes */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;

  /* Container Max Width */
  --container-width: 1200px;
}

/* ===================================
   Dark Mode Variables
   Automatically activated by browser preference
   =================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Modern Healthcare Color Palette - DARK MODE */
    --primary-color: #6DBEEA;        /* Light Blue-Cyan Primary */
    --primary-hover: #55C3E7;        /* Brighter Blue-Cyan on hover */
    --primary-light: #2A3F4D;        /* Dark Blue-Teal background */
    --secondary-color: #7ED6A8;      /* Light Green Secondary */
    --accent-color: #C5B8F2;         /* Light Purple Accent */
    --accent-purple: #C5B8F2;        /* Light Purple Accent */
    --accent-orange: #E8857B;        /* Coral/Error Color */
    --accent-green: #7ED6A8;         /* Green for success */

    /* Background Colors */
    --background-color: #121417;     /* Very dark gray */
    --background-light: #1E2226;     /* Dark gray-blue surface */
    --background-lighter: #2A2E33;   /* Lighter dark gray */
    --background-dark: #0A0B0D;      /* Almost black (for footer) */
    --background-gradient: linear-gradient(135deg, #6DBEEA 0%, #7ED6A8 100%);

    /* Text Colors */
    --text-color: #EDEDED;           /* Light gray primary text */
    --text-light: #A3A3A3;           /* Medium gray secondary text */
    --text-lighter: #737373;         /* Darker gray tertiary text */
    --text-white: #ffffff;

    /* Error/Alert Colors */
    --error-color: #E8857B;          /* Coral error color */
    --success-color: #7ED6A8;        /* Green success color */
    --warning-color: #F4A261;        /* Orange warning color */

    /* Border & Shadow */
    --border-color: #2A2E33;         /* Dark gray border */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  }
}