/* 
 * Theme definitions for Gonzaga's Art & Shine
 * Dark psychedelic and geometric theme with nature-inspired elements
 * ✅ 100% MODULAR - Usa APENAS variáveis do variables.css
 */

:root {
  /* Dark forest theme with psychedelic accents */
  --color-primary: var(--color-primary);
  --color-secondary: var(--color-secondary);
  --color-tertiary: var(--color-tertiary);
  
  /* Psychedelic highlights - USANDO VARIÁVEIS */
  --color-highlight: var(--color-silver); /* Era #b19cd9 ❌ */
  --color-accent: var(--color-accent); /* Era #43c59e ❌ */
  --color-accent-alt: var(--color-bronze); /* Era #ff7e5f ❌ */
  
  /* Text colors */
  --color-text: var(--color-text);
  --color-text-muted: var(--color-text-muted);
  
  /* State colors */
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);
  --color-danger: var(--color-danger);
  --color-info: var(--color-info); /* Era #64b5f6 ❌ */
  
  /* Special effects - USANDO VARIÁVEIS */
  --glow-neon: var(--glow-neon);
  --glow-accent: var(--glow-accent);
  
  /* Gradients - USANDO VARIÁVEIS */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-tertiary));
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-silver-light));
  --gradient-highlight: linear-gradient(135deg, var(--color-silver), var(--color-bronze));
  --gradient-psychedelic: linear-gradient(135deg, var(--color-accent), var(--color-silver), var(--color-bronze));
  
  /* Dashboard specific - USANDO VARIÁVEIS */
  --admin-primary: var(--color-secondary);
  --admin-secondary: var(--color-primary);
  --admin-accent: var(--color-silver); /* Era #805ad5 ❌ */
  --admin-text: var(--color-text);
  --admin-muted: var(--color-text-muted);
  --admin-border: var(--color-info);
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  
  /* Animations */
  --transition-slow: 0.5s ease;
  --transition-medium: 0.3s ease;
  --transition-fast: 0.15s ease;
}

/* Dark mode adjustments */
.dark-mode {
  --color-primary: #0a0a0a;
  --color-secondary: #121214;
  --color-tertiary: #1c1c1f;
  --color-highlight: var(--color-silver-dark);
  --color-text: #e0e0e0;
}

/* Light mode (optional) */
.light-mode {
  --color-primary: #f5f5f5;
  --color-secondary: #e9e9e9;
  --color-tertiary: #dedede;
  --color-text: var(--color-primary);
  --color-text-muted: #555555;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
}

/* Admin theme */
.admin-theme {
  --color-primary: var(--admin-primary);
  --color-secondary: var(--admin-secondary);
  --color-highlight: var(--admin-accent);
  --color-text: var(--admin-text);
  --color-text-muted: var(--admin-muted);
}

/* Special themed backgrounds - DESATIVADO (preto sólido) */
.geometric-bg {
  background-color: var(--color-primary) !important;
  background-image: none !important;
}

.forest-bg {
  background-color: var(--color-primary) !important;
  background-image: none !important;
}

.psychedelic-bg {
  background: var(--color-primary) !important;
  background-image: none !important;
  animation: none !important;
}

@keyframes psychedelic-pulse {
  0% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 120% 120%;
  }
  100% {
    background-size: 100% 100%;
  }
}

/* Special text effects */
.text-glow {
  text-shadow: var(--glow-neon);
}

.text-gradient {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Special border effects */
.border-glow {
  border: 1px solid var(--color-highlight);
  box-shadow: var(--glow-neon);
}

.border-psychedelic {
  position: relative;
}

.border-psychedelic::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-psychedelic);
  z-index: -1;
  border-radius: inherit;
  opacity: 0.7;
  animation: border-rotate 3s linear infinite;
}

@keyframes border-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Interactive elements special effects */
.hover-glow:hover {
  box-shadow: var(--glow-neon);
  transform: translateY(-3px);
  transition: all var(--transition-medium);
}

.hover-scale:hover {
  transform: scale(1.05);
  transition: transform var(--transition-medium);
}

.pulse-effect {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Typography */
.font-display {
  font-family: 'Playfair Display', serif;
}

.font-body {
  font-family: 'Poppins', sans-serif;
}

/* Loading effects */
.shimmer {
  background: linear-gradient(90deg, 
    var(--color-tertiary) 0%, 
    var(--color-secondary) 50%, 
    var(--color-tertiary) 100%);
  background-size: 200% 100%;
  animation: shimmer-effect 1.5s infinite;
}

@keyframes shimmer-effect {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Accessibility utilities */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}