/**
 * CSS Variables for Theming
 * Change these values to customize the entire application theme
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Primary Colors */
  --primary-color: #536fd4;
  --primary-hover: #fba64b;
  --primary-light: #7a92e0;
  --primary-dark: #3d55b3;

  /* Secondary Colors */
  --secondary-color: #6b84e3;
  --secondary-hover: #fbb868;
  --secondary-light: #a8b8ea;

  /* Accent Colors */
  --accent-success: #00b371;
  --accent-warning: #fba64b;
  --accent-error: #ef4444;
  --accent-info: #536fd4;

  /* Status Colors */
  --success-color: #00b371;
  --warning-color: #fba64b;
  --error-color: #ef4444;
  --info-color: #536fd4;

  /* Background Colors */
  --background-primary: #ffffff;
  --background-secondary: #f8f9fd;
  --background-tertiary: #f1f3fb;
  --background-dark: #2d3748;

  /* Text Colors */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-light: #ffffff;
  
  /* Border Colors */
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-dark: #94a3b8;
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Typography */
  --font-family-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Theme (Optional) */
[data-theme="dark"] {
  --primary-color: #7a92e0;
  --primary-hover: #fba64b;

  --background-primary: #0f172a;
  --background-secondary: #1e293b;
  --background-tertiary: #334155;

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;

  --border-light: #334155;
  --border-medium: #475569;
  --border-dark: #64748b;
}

/* Alternative Color Schemes */

/* Ocean Theme */
[data-theme="ocean"] {
  --primary-color: #0891b2;
  --primary-hover: #0e7490;
  --primary-light: #22d3ee;
  --secondary-color: #0284c7;
}

/* Forest Theme */
[data-theme="forest"] {
  --primary-color: #00b371;
  --primary-hover: #047857;
  --primary-light: #34d399;
  --secondary-color: #10b981;
}

/* Sunset Theme */
[data-theme="sunset"] {
  --primary-color: #f59e0b;
  --primary-hover: #d97706;
  --primary-light: #fbbf24;
  --secondary-color: #ef4444;
}

/* Purple Theme */
[data-theme="purple"] {
  --primary-color: #8b5cf6;
  --primary-hover: #7c3aed;
  --primary-light: #a78bfa;
  --secondary-color: #9333ea;
}