/* ========================================================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   ========================================================================

   Single source of truth for all design tokens.
   Imported before all other stylesheets to establish base values.

   Organization:
   - Color System (primary, semantic, neutrals)
   - Typography
   - Border Radius (corner sizes)
   - Shadows (depth effects)
   - Spacing (consistent gaps)
   - Z-Index (stacking order)
   - Transitions & Animations
   - Legacy Dashboard Aliases (for compatibility)

   ======================================================================= */

:root {
   /* ====================================================================
       COLOR SYSTEM — Core Colors
       ==================================================================== */

   /* Primary Brand Colors */
   --color-primary: #2d5a87;
   --color-primary-dark: #1e3a5f;
   --color-primary-light: #3a7ca5;

   /* Semantic Colors */
   --color-success: #28a745;
   --color-danger: #dc3545;
   --color-warning: #FF9800;
   --color-info: #2196F3;

   /* Text Colors */
   --color-text-dark: #212529;
   --color-text-muted: #6b7280;
   --color-text-light: #6c757d;

   /* Background Colors */
   --color-bg-white: #ffffff;
   --color-bg-light: #f8f9fa;
   --color-bg-light-blue: rgba(232, 244, 252, 1);

   /* Borders & Neutrals */
   --color-border: rgba(45, 90, 135, 0.1);
   --color-border-light: #e9ecef;

   /* ====================================================================
       TYPOGRAPHY
       ==================================================================== */

   --font-primary: 'Poppins', sans-serif;

   /* ====================================================================
       SPACING SCALE
       ==================================================================== */

   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 40px;
   --spacing-2xl: 80px;

   /* ====================================================================
       BORDER RADIUS
       ==================================================================== */

   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
   --radius-pill: 50px;

   /* ====================================================================
       SHADOWS (Elevation Effects)
       ==================================================================== */

   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.15);
   --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.3);

   /* ====================================================================
       Z-INDEX STACKING
       ==================================================================== */

   --z-modal: 10000;
   --z-toast: 3000;

   /* ====================================================================
       GRADIENTS
       ==================================================================== */

   --gradient-accent: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --gradient-primary: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #3a7ca5 100%);

   /* ====================================================================
       TRANSITIONS & ANIMATIONS
       ==================================================================== */

   --transition-fast: all 0.15s ease;
   --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

   /* ====================================================================
       DASHBOARD COMPATIBILITY ALIASES
       These map to base tokens above for existing CSS references.
       ==================================================================== */

   --primary-color: var(--color-primary);
   --secondary-color: #00c1d4;
   --text-muted: var(--color-text-muted);
   --text-color: var(--color-text-dark);
   --text-color-dark: var(--color-text-dark);
   --text-light: var(--color-bg-white);

   /* Compatibility Aliases for style.min.css and other files */
   --font-family: var(--font-primary);
   --font-stack: var(--font-primary);
}

/* ========================================================================
   GLOBAL FONT RESET & STANDARDIZATION
   Ensures all UI components inherit the brand font correctly.
   ======================================================================== */

* {
   font-family: var(--font-primary);
}

/* Explicit reset for elements that don't always inherit correctly */
input,
button,
select,
textarea,
optgroup {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
}

/* Material Icons need their own font stack */
.material-icons {
   font-family: 'Material Icons' !important;
}

/* Monospaced elements fallback */
code,
kbd,
pre,
samp,
.mono-text,
.project-id,
.user-id {
   font-family: 'Courier New', Courier, monospace !important;
}

/* ========================================================================
   DARK MODE VARIANTS (if needed)
   ======================================================================= */
/*
   Dark mode is implemented on dashboard.css via:
   - body.dark-mode { --bg-primary: #1a1a1a; ... }

   This system file provides the base light mode. Override in dark-mode
   selector if you need different colors for dark theme.
*/