/* 
 * Secret Santa Theme Variables
 * Centralized color scheme and design tokens
 */

:root {
  /* Christmas Theme Colors */
  --primary-green: #2d7a3e;
  --primary-green-dark: #1e5c2d;
  --primary-green-darker: #15472a;
  --primary-green-light: rgba(45, 122, 62, 0.1);
  --primary-green-bright: #3fa952;
  
  --christmas-red: #fe8787;
  --christmas-red-dark: #e74c3c;
  --christmas-red-bright: #ff6b6b;
  
  --festive-gold: #ffd700;
  --festive-gold-dark: #daa520;
  
  /* Discord Colors */
  --discord-blue: #5865F2;
  --discord-blue-hover: #4752C4;
  
  /* Status Colors */
  --success-green: #2d7a3e;
  --success-green-dark: #1e5c2d;
  --error-red: #e74c3c;
  --error-red-dark: #c0392b;
  --warning-orange: #ff9800;
  --info-blue: #3498db;
  
  /* Status Badge Colors */
  --status-draft: #F18F01;
  --status-shuffled: #A23B72;
  --status-active: #2d7a3e;
  --status-completed: #7f8c8d;
  
  /* Neutral Colors */
  --white: #ffffff;
  --black: #000000;
  --gray-light: #f5f5f5;
  --gray-medium: #e0e0e0;
  --gray-dark: #2c3e50;
  
  /* Background Colors */
  --bg-hero-pattern: #fe8787;
  --bg-overlay-light: rgba(255, 255, 255, 0.25);
  --bg-overlay-medium: rgba(255, 255, 255, 0.5);
  --bg-overlay-dark: rgba(0, 0, 0, 0.6);
  --bg-gradient: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 100%);
  --bg-hero-gradient: linear-gradient(135deg, rgba(254, 135, 135, 0.9) 0%, rgba(231, 76, 60, 0.9) 100%);
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.9);
  --text-tertiary: rgba(255, 255, 255, 0.8);
  --text-dark: #2c3e50;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 15px hsla(137, 0%, 65%, 0.4);
  --shadow-lg: 0 8px 32px hsla(113, 0%, 33%, 0.37);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.3);
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;
  --spacing-xxl: 40px;
  
  /* Font Sizes */
  --font-xs: 0.85em;
  --font-sm: 0.9em;
  --font-md: 1em;
  --font-lg: 1.2em;
  --font-xl: 1.5em;
  --font-xxl: 2em;
  --font-xxxl: 3em;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index Layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-snackbar: 10001;
  --z-tooltip: 10002;
  
  /* Breakpoints (for reference in media queries) */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1400px;
  
  /* Max widths */
  --max-width-sm: 600px;
  --max-width-md: 900px;
  --max-width-lg: 1200px;
  --max-width-xl: 1400px;
  
  /* Animation durations */
  --anim-duration-fast: 0.2s;
  --anim-duration-normal: 0.3s;
  --anim-duration-slow: 0.5s;
  
  /* Backdrop blur */
  --blur-sm: blur(5px);
  --blur-md: blur(10px);
  --blur-lg: blur(15px);
}

/* Dark mode support (optional for future) */
@media (prefers-color-scheme: dark) {
  :root {
    --text-dark: #ffffff;
    --bg-overlay-light: rgba(0, 0, 0, 0.1);
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* CSS Containment - tells browser these are independent render blocks */
.panel,
.card,
.server-card,
.session-card,
.action-card,
.participant-item,
.member-card,
.role-card,
.assignment-item,
.rule-item {
  contain: layout style paint;
}

.modal-content,
.confirm-box,
.confirm-modal-content {
  contain: layout style;
}

/* Optimized scrollable areas */
.participant-list,
.checkbox-list,
.custom-select-dropdown,
.session-list,
.server-grid,
.member-grid,
.assignments-grid {
  contain: layout style;
  will-change: scroll-position;
}

/* Force GPU acceleration for animated elements */
.santa,
.btn,
.btn-primary,
.btn-secondary,
.btn-login,
.loading::after,
.server-card,
.session-card,
.member-card,
.role-card {
  transform: translateZ(0);
  will-change: transform;
}

/* Optimize hover transitions */
.card:hover,
.server-card:hover,
.session-card:hover,
.btn:hover {
  transform: translateY(-2px) translateZ(0);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hardware acceleration for modals */
.modal.active,
.confirm-modal.active {
  transform: translateZ(0);
  will-change: opacity;
}

/* Optimize animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%) translateZ(0);
  }
  to {
    transform: translateX(0) translateZ(0);
  }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Critical Performance Optimization - Disable hover effects during scroll */
body.scrolling * {
  pointer-events: none !important;
}

body.scrolling a,
body.scrolling button,
body.scrolling input,
body.scrolling select,
body.scrolling textarea {
  pointer-events: auto !important;
}