/**
 * EGM StyleKit - CSS Variables
 * 
 * Global CSS custom properties for the Educational Games Manager ecosystem.
 * These variables provide consistency across all EGM modules and themes.
 * 
 * @package EGM_StyleKit
 * @since 1.0.0
 */

/* ========================================
   ROOT VARIABLES (EGM Default Theme)
   ======================================== */

:root {
  /* Colors - Primary Palette */
  --egm-color-primary: #0073aa;
  --egm-color-secondary: #005177;
  --egm-color-accent: #00b9eb;
  
  /* Colors - Semantic */
  --egm-color-success: #46b450;
  --egm-color-warning: #ffb900;
  --egm-color-error: #dc3232;
  --egm-color-info: #00a0d2;
  
  /* Colors - Backgrounds */
  --egm-bg-light: #f9f9f9;
  --egm-bg-dark: #1e1e1e;
  --egm-bg-white: #ffffff;
  --egm-bg-gray: #f0f0f1;
  
  /* Colors - Text */
  --egm-text-light: #ffffff;
  --egm-text-dark: #333333;
  --egm-text-muted: #666666;
  --egm-text-secondary: #757575;
  
  /* Colors - Borders */
  --egm-border-color: #ddd;
  --egm-border-color-light: #e0e0e0;
  --egm-border-color-dark: #444;
  
  /* Layout & Spacing */
  --egm-border-radius: 6px;
  --egm-border-radius-sm: 4px;
  --egm-border-radius-lg: 12px;
  --egm-shadow: 0 2px 6px rgba(0,0,0,0.1);
  --egm-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --egm-shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
  
  /* Spacing Scale */
  --egm-spacing-xs: 4px;
  --egm-spacing-sm: 8px;
  --egm-spacing-md: 16px;
  --egm-spacing-lg: 24px;
  --egm-spacing-xl: 32px;
  --egm-spacing-xxl: 48px;
  
  /* Typography */
  --egm-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --egm-font-family-secondary: Georgia, serif;
  --egm-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  
  /* Font Sizes */
  --egm-font-size-xs: 12px;
  --egm-font-size-sm: 14px;
  --egm-font-size-md: 16px;
  --egm-font-size-lg: 18px;
  --egm-font-size-xl: 24px;
  --egm-font-size-xxl: 32px;
  
  /* Font Weights */
  --egm-font-weight-normal: 400;
  --egm-font-weight-medium: 500;
  --egm-font-weight-semibold: 600;
  --egm-font-weight-bold: 700;
  
  /* Line Heights */
  --egm-line-height-tight: 1.2;
  --egm-line-height-normal: 1.5;
  --egm-line-height-relaxed: 1.7;
  
  /* Transitions & Animations */
  --egm-transition-fast: 0.15s ease;
  --egm-transition-normal: 0.3s ease;
  --egm-transition-slow: 0.5s ease;
  
  /* Z-Index Scale */
  --egm-z-dropdown: 1000;
  --egm-z-modal: 1050;
  --egm-z-popover: 1060;
  --egm-z-tooltip: 1070;
  --egm-z-fixed: 1030;
  
  /* Breakpoints (for CSS usage) */
  --egm-breakpoint-sm: 576px;
  --egm-breakpoint-md: 768px;
  --egm-breakpoint-lg: 992px;
  --egm-breakpoint-xl: 1200px;
}

/* ========================================
   DARK THEME OVERRIDES
   ======================================== */

[data-theme="dark"],
.egm-theme-dark {
  /* Colors - Primary Palette (adjusted for dark) */
  --egm-color-primary: #00b9eb;
  --egm-color-secondary: #0073aa;
  --egm-color-accent: #005177;
  
  /* Colors - Backgrounds */
  --egm-bg-light: #121212;
  --egm-bg-dark: #000000;
  --egm-bg-white: #1e1e1e;
  --egm-bg-gray: #2c2c2c;
  
  /* Colors - Text */
  --egm-text-light: #f1f1f1;
  --egm-text-dark: #ffffff;
  --egm-text-muted: #cccccc;
  --egm-text-secondary: #b0b0b0;
  
  /* Colors - Borders */
  --egm-border-color: #444;
  --egm-border-color-light: #555;
  --egm-border-color-dark: #222;
  
  /* Shadows (adjusted for dark) */
  --egm-shadow: 0 2px 6px rgba(255,255,255,0.1);
  --egm-shadow-sm: 0 1px 3px rgba(255,255,255,0.05);
  --egm-shadow-lg: 0 4px 12px rgba(255,255,255,0.15);
}

/* ========================================
   EDUCATIONAL THEME OVERRIDES
   ======================================== */

.egm-theme-educational {
  /* Colors - Primary Palette (child-friendly) */
  --egm-color-primary: #ff6b6b;
  --egm-color-secondary: #4ecdc4;
  --egm-color-accent: #45b7d1;
  
  /* Colors - Semantic (brighter) */
  --egm-color-success: #5cb85c;
  --egm-color-warning: #f0ad4e;
  --egm-color-error: #d9534f;
  --egm-color-info: #5bc0de;
  
  /* Colors - Backgrounds */
  --egm-bg-light: #fff8f0;
  --egm-bg-white: #ffffff;
  --egm-bg-gray: #f8f9fa;
  
  /* Colors - Text */
  --egm-text-dark: #2c3e50;
  --egm-text-muted: #7f8c8d;
  --egm-text-secondary: #95a5a6;
  
  /* Layout (more rounded, playful) */
  --egm-border-radius: 12px;
  --egm-border-radius-sm: 8px;
  --egm-border-radius-lg: 20px;
  --egm-shadow: 0 4px 12px rgba(0,0,0,0.15);
  --egm-shadow-lg: 0 6px 20px rgba(0,0,0,0.2);
  
  /* Spacing (more generous) */
  --egm-spacing-xs: 6px;
  --egm-spacing-sm: 12px;
  --egm-spacing-md: 20px;
  --egm-spacing-lg: 28px;
  --egm-spacing-xl: 36px;
  
  /* Typography (child-friendly fonts) */
  --egm-font-family-primary: "Comic Sans MS", cursive, sans-serif;
  --egm-font-size-xs: 14px;
  --egm-font-size-sm: 16px;
  --egm-font-size-md: 18px;
  --egm-font-size-lg: 20px;
  --egm-font-size-xl: 26px;
}

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --egm-color-primary: #0000ff;
    --egm-color-secondary: #000080;
    --egm-text-dark: #000000;
    --egm-text-light: #ffffff;
    --egm-border-color: #000000;
    --egm-shadow: none;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --egm-transition-fast: none;
    --egm-transition-normal: none;
    --egm-transition-slow: none;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  :root {
    --egm-color-primary: #000000;
    --egm-color-secondary: #666666;
    --egm-bg-light: #ffffff;
    --egm-bg-dark: #ffffff;
    --egm-bg-white: #ffffff;
    --egm-text-dark: #000000;
    --egm-text-light: #000000;
    --egm-shadow: none;
  }
}

/* ========================================
   UTILITY CLASSES FOR VARIABLES
   ======================================== */

/* Background utilities */
.egm-bg-primary { background-color: var(--egm-color-primary) !important; }
.egm-bg-secondary { background-color: var(--egm-color-secondary) !important; }
.egm-bg-success { background-color: var(--egm-color-success) !important; }
.egm-bg-warning { background-color: var(--egm-color-warning) !important; }
.egm-bg-error { background-color: var(--egm-color-error) !important; }
.egm-bg-light { background-color: var(--egm-bg-light) !important; }
.egm-bg-white { background-color: var(--egm-bg-white) !important; }

/* Text color utilities */
.egm-text-primary { color: var(--egm-color-primary) !important; }
.egm-text-secondary { color: var(--egm-color-secondary) !important; }
.egm-text-success { color: var(--egm-color-success) !important; }
.egm-text-warning { color: var(--egm-color-warning) !important; }
.egm-text-error { color: var(--egm-color-error) !important; }
.egm-text-dark { color: var(--egm-text-dark) !important; }
.egm-text-light { color: var(--egm-text-light) !important; }
.egm-text-muted { color: var(--egm-text-muted) !important; }

/* Border utilities */
.egm-border { border: 1px solid var(--egm-border-color) !important; }
.egm-border-top { border-top: 1px solid var(--egm-border-color) !important; }
.egm-border-bottom { border-bottom: 1px solid var(--egm-border-color) !important; }
.egm-border-left { border-left: 1px solid var(--egm-border-color) !important; }
.egm-border-right { border-right: 1px solid var(--egm-border-color) !important; }

/* Border radius utilities */
.egm-rounded { border-radius: var(--egm-border-radius) !important; }
.egm-rounded-sm { border-radius: var(--egm-border-radius-sm) !important; }
.egm-rounded-lg { border-radius: var(--egm-border-radius-lg) !important; }
.egm-rounded-none { border-radius: 0 !important; }