/* ================================================
   CSS Variables - Design System
   ================================================
   Centralized design tokens for consistent styling
   across the entire application.
   ================================================ */

:root {
  /* ==========================================
     Brand Colors
     ========================================== */
  --color-primary: #0066cc;
  --color-primary-dark: #004999;
  --color-primary-light: #e8f4fc;
  --color-primary-hover: #0052a3;

  --color-secondary: #4cc9f0;
  --color-secondary-dark: #00b4d8;
  --color-secondary-light: #cff4fc;

  /* ==========================================
     Semantic Colors
     ========================================== */
  --color-success: #28a745;
  --color-success-dark: #1e7e34;
  --color-success-light: #d4edda;

  --color-warning: #ffc107;
  --color-warning-dark: #d39e00;
  --color-warning-light: #fff3cd;

  --color-danger: #dc3545;
  --color-danger-dark: #bd2130;
  --color-danger-light: #f8d7da;

  --color-info: #17a2b8;
  --color-info-dark: #117a8b;
  --color-info-light: #d1ecf1;

  /* ==========================================
     Neutral Colors
     ========================================== */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* ==========================================
     Campus Colors
     ========================================== */
  --campus-calais: #dc3545;
  --campus-calais-light: #fee2e2;
  --campus-longuenesse: #0066cc;
  --campus-longuenesse-light: #dbeafe;
  --campus-dunkerque: #28a745;
  --campus-dunkerque-light: #d1fae5;
  --campus-boulogne: #6f42c1;
  --campus-boulogne-light: #e8e0f3;

  /* ==========================================
     Typography
     ========================================== */
  --font-family: "Inter", "Segoe UI", "Arial", sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ==========================================
     Spacing
     ========================================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */

  /* ==========================================
     Border Radius
     ========================================== */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ==========================================
     Shadows
     ========================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --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 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* ==========================================
     Z-Index System
     ==========================================
     Layer hierarchy (lowest to highest):
     
     RELATIVE (within parent):
     - z-below: -1     → Behind parent content
     - z-base: 0       → Default layer
     - z-above: 1      → Above sibling content
     
     CONTENT LAYER:
     - z-dropdown: 50       → Content dropdowns (forms, search)
     - z-sticky: 100        → Sticky table headers
     
     NAVIGATION STACK (all sticky/fixed):
     - z-navbar: 900        → Navigation bar
     - z-quick-actions: 950 → Quick actions bar
     - z-header: 1000       → Main header (sticky, topmost nav)
     
     OVERLAY LAYER (above everything):
     - z-overlay: 1100      → Mobile menu, overlays
     - z-modal: 1200        → Modal dialogs
     - z-popover: 1300      → Popovers, dropdowns from nav
     - z-tooltip: 1400      → Tooltips
     - z-notification: 1500 → Notifications
     - z-toast: 1600        → Toast messages (highest)
     ========================================== */
  --z-below: -1;
  --z-base: 0;
  --z-above: 1;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-navbar: 900;
  --z-quick-actions: 950;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-popover: 1300;
  --z-tooltip: 1400;
  --z-notification: 1500;
  --z-toast: 1600;

  /* ==========================================
     Transitions
     ========================================== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* ==========================================
     Container Widths
     ========================================== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* ==========================================
     Gradients
     ========================================== */
  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
  --gradient-secondary: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    var(--color-secondary-dark) 100%
  );
  --gradient-header: linear-gradient(
    135deg,
    #0066cc 0%,
    #004080 50%,
    #002855 100%
  );
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --gradient-footer: linear-gradient(
    135deg,
    #0a1628 0%,
    #1a2942 50%,
    #0a1628 100%
  );
}

/* Dark mode support (future) - uncomment when ready
@media (prefers-color-scheme: dark) {
  :root {
    --color-gray-50: #0f172a;
    --color-gray-800: #f1f5f9;
  }
}
*/