/**
 * MedPrepOnline - Global CSS Variables
 * Unified design system for consistent styling across all modules
 * 
 * IMPORTANT: This file must be loaded FIRST (after Bootstrap)
 * Add to base.html: <link rel="stylesheet" href="{% static 'css/variables.css' %}">
 */

:root {
   /* ============================================
       PRIMARY COLORS - TEAL THEME
       ============================================ */
   --primary-gradient: linear-gradient(135deg, #4fb3d9 0%, #5dbea3 100%);
   --primary-color: #4fb3d9;
   --primary-dark: #3a9dbf;
   --primary-light: #e6f7fc;
   --secondary-color: #5dbea3;
   --accent-color: #2e8b8b;

   /* ============================================
       SEMANTIC COLORS
       ============================================ */

   --success-green: #28a745;
   --success-light: #20c997;
   --danger-red: #dc3545;
   --danger-dark: #c82333;
   --warning-yellow: #ffc107;
   --info-blue: #17a2b8;
   --success-color: var(--success-green);
   --info-color: var(--info-blue);
   --warning-color: var(--warning-yellow);

   /* ============================================
       TEXT COLORS
       ============================================ */
   --text-primary: #212529;
   --text-secondary: #6c757d;
   --text-muted: #59626b;
   --text-dark: #2c3e50;
   --text-medium: #6b7280;
   --text-light: #7f8c8d;
   --text-lighter: #9ca3af;

   /* ============================================
       BACKGROUND COLORS
       ============================================ */
   --bg-white: #ffffff;
   --bg-light: #f8fffe;
   --bg-gray: #f3f4f6;
   --bg-gray-dark: #e5e7eb;
   --bg-secondary: #f8f9fa;
   --bg-tertiary: #e9ecef;


   /* ============================================
       BORDER COLORS
       ============================================ */
   --border-light: #e5e7eb;
   --border-color: #dee2e6;
   --border-radius: 12px;
   --border-primary: rgba(79, 179, 217, 0.2);
   --border-primary-light: rgba(79, 179, 217, 0.1);

   /* ============================================
       SHADOWS
       ============================================ */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 40px rgba(79, 179, 217, 0.15);
   --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
   --shadow-primary: 0 4px 15px rgba(79, 179, 217, 0.3);
   --shadow-light: 0 2px 15px rgba(79, 179, 217, 0.1);
   --shadow-medium: 0 10px 40px rgba(79, 179, 217, 0.15);

   /* ============================================
       BORDER RADIUS
       ============================================ */
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-full: 999px;

   /* ============================================
       TRANSITIONS
       ============================================ */
   --transition-fast: all 0.2s ease;
   --transition-base: all 0.3s ease;
   --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --transition-normal: 0.3s ease-in-out;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

   /* ============================================
       SPACING
       ============================================ */
   --spacing-xs: 0.25rem;
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;

   /* ============================================
       Z-INDEX LAYERS
       ============================================ */
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal: 1050;
   --z-tooltip: 1070;
}