/* Mini Gallery - Global CSS Variables */
/* All CSS variables centralized here - DO NOT duplicate in component files */
/* Fonts are imported once here and used across all admin views */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap");

:root {
  /* =========================================
     PRIMARY BRAND COLORS - Teal Theme
     ========================================= */
  --mg-primary: #07babe;
  --mg-primary-hover: #069a9d;
  --mg-primary-glow: rgba(7, 186, 190, 0.2);
  --mg-secondary: #05a0a8;
  --mg-secondary-glow: rgba(5, 160, 168, 0.2);
  --mg-accent: #07babe;
  --mg-accent-hover: #069a9d;
  --mg-accent-light: rgba(7, 186, 190, 0.15);
  --mg-accent-gradient: linear-gradient(135deg, #07babe 0%, #06a0a8 100%);

  /* =========================================
     SEMANTIC COLORS
     ========================================= */
  --mg-danger: #ff4757;
  --mg-success: #2ecc71;
  --mg-warning: #ffa502;
  --mg-info: #54a0ff;

  /* =========================================
     BORDER RADIUS
     ========================================= */
  --mg-radius: 8px;
  --mg-radius-sm: 8px;
  --mg-radius-md: 16px;
  --mg-radius-lg: 24px;
  --mgwpp-border-radius-sm: 6px;
  --mgwpp-border-radius-md: 8px;
  --mgwpp-border-radius-lg: 16px;
  --mgwpp-border-radius-xl: 20px;
  --mgwpp-border-radius-full: 9999px;

  /* =========================================
     BLUR EFFECTS
     ========================================= */
  --mgwpp-backdrop-blur: blur(16px);
  --mgwpp-backdrop-blur-sm: blur(8px);

  /* =========================================
     TRANSITION SPEED
     ========================================= */
  --mgwpp-transition-speed: 0.3s;

  /* =========================================
     LIGHT THEME (Default)
     ========================================= */
  --mg-bg-dark: #f0f2f5;
  --mg-bg-panel: rgba(255, 255, 255, 0.8);
  --mg-bg-card: rgba(255, 255, 255, 0.4);
  --mg-bg-input: #ffffff;
  --mg-border: rgba(0, 0, 0, 0.08);
  --mg-border-light: #eeeeee;
  --mg-text-main: #1a1a2e;
  --mg-text-secondary: #555555;
  --mg-text-muted: rgba(0, 0, 0, 0.5);
  --mg-shadow-luxury: 0 20px 50px rgba(0, 0, 0, 0.05);
  --mg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --mg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --mg-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);

  /* MGWPP Prefixed (for compatibility) */
  --mgwpp-background: #f8fafc;
  --mgwpp-foreground: #1e293b;
  --mgwpp-card-bg: rgba(255, 255, 255, 0.7);
  --mgwpp-card-border: rgba(140, 140, 140, 0.4);
  --mgwpp-card-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  --mgwpp-icon-bg: rgba(236, 254, 255, 0.6);
  --mgwpp-icon-color: #07babe;
  --mgwpp-button-bg: rgba(241, 245, 249, 0.6);
  --mgwpp-button-text: #64748b;
  --mgwpp-primary-color: #07babe;
  --mgwpp-primary-hover: #069a9d;
}

/* =========================================
   DARK THEME - Activated by body class
   ========================================= */
body.mgwpp-dark-mode {
  --mg-bg-dark: #050505;
  --mg-bg-panel: rgba(15, 15, 20, 0.8);
  --mg-bg-card: rgba(25, 25, 35, 0.4);
  --mg-bg-input: #2a2a2a;
  --mg-border: rgba(255, 255, 255, 0.08);
  --mg-border-light: #444444;
  --mg-text-main: #ffffff;
  --mg-text-secondary: #b0b0b0;
  --mg-text-muted: rgba(255, 255, 255, 0.6);
  --mg-shadow-luxury: 0 20px 50px rgba(0, 0, 0, 0.8);
  --mg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --mg-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --mg-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --mg-primary-glow: rgba(7, 186, 190, 0.4);
  --mg-secondary-glow: rgba(5, 160, 168, 0.4);

  /* MGWPP Prefixed (for compatibility) */
  --mgwpp-background: #0f172a;
  --mgwpp-foreground: #f8fafc;
  --mgwpp-card-bg: rgba(15, 23, 42, 0.7);
  --mgwpp-card-border: rgba(255, 255, 255, 0.1);
  --mgwpp-card-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  --mgwpp-icon-bg: rgba(12, 157, 181, 0.3);
  --mgwpp-icon-color: #07babe;
  --mgwpp-button-bg: rgba(30, 41, 59, 0.6);
  --mgwpp-button-text: #cbd5e1;
}