/* ============================================
   LIFT & SHIFT FOUNDATION - GAMES & PUZZLES THEME
   ============================================ */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
  /* ========== LIGHT THEME COLORS ========== */
  /* Primary Colors */
  --color-primary: #7dbff8;
  --color-primary-hover: #6bb0f0;
  --color-primary-active: #5a9fd6;
  --color-primary-light: #b8d9fc;
  --color-primary-dark: #4a8bc7;
  
  /* Secondary Colors */
  --color-secondary: #f9943b;
  --color-secondary-hover: #f0853a;
  --color-secondary-active: #e67629;
  --color-secondary-light: #fbb876;
  --color-secondary-dark: #d6792b;
  
  /* Accent Colors */
  --color-accent: #e61f93;
  --color-accent-hover: #d11c85;
  --color-accent-active: #bc1976;
  --color-accent-light: #f06bb5;
  --color-accent-dark: #a5166a;
  
  /* Text Colors */
  --color-text-primary: #000056;
  --color-text-secondary: #a4acbc;
  --color-text-muted: #c1c7d0;
  --color-text-inverse: #ffffff;
  
  /* Background & Surface Colors */
  --color-background: #f2efeb;
  --color-surface: #ffffff;
  --color-surface-elevated: #fefefe;
  --color-surface-hover: #f8f8f8;
  --color-overlay: rgba(0, 0, 86, 0.1);
  
  /* Game-Specific Colors */
  --color-game-board: #ffffff;
  --color-tile-default: #f8f9fa;
  --color-tile-hover: #e9ecef;
  --color-tile-active: #dee2e6;
  --color-tile-selected: var(--color-primary-light);
  --color-tile-correct: #28a745;
  --color-tile-incorrect: #dc3545;
  --color-tile-hint: #ffc107;
  
  /* Grid & Lines */
  --color-grid-line: #dee2e6;
  --color-grid-line-major: #adb5bd;
  --color-connector: var(--color-text-secondary);
  --color-connector-active: var(--color-accent);
  
  /* Status Colors */
  --color-success: #28a745;
  --color-success-light: #d4edda;
  --color-error: #dc3545;
  --color-error-light: #f8d7da;
  --color-warning: #ffc107;
  --color-warning-light: #fff3cd;
  --color-info: var(--color-primary);
  --color-info-light: var(--color-primary-light);
  
  /* Shadows & Effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 86, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 86, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 86, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 86, 0.15);
  
  /* Typography */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Spacing & Sizing */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ========== DARK THEME ========== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary Colors - Slightly muted for dark backgrounds */
    --color-primary: #5a9fd6;
    --color-primary-hover: #6bb0f0;
    --color-primary-active: #7dbff8;
    --color-primary-light: #4a8bc7;
    --color-primary-dark: #3a7ab5;
    
    /* Secondary Colors */
    --color-secondary: #e8843a;
    --color-secondary-hover: #f0923a;
    --color-secondary-active: #f9943b;
    --color-secondary-light: #d6792b;
    --color-secondary-dark: #c26d24;
    
    /* Accent Colors */
    --color-accent: #d61e8a;
    --color-accent-hover: #e61f93;
    --color-accent-active: #f530a0;
    --color-accent-light: #bc1976;
    --color-accent-dark: #a5166a;
    
    /* Text Colors */
    --color-text-primary: #e8eaf0;
    --color-text-secondary: #9ca3b3;
    --color-text-muted: #6c757d;
    --color-text-inverse: #000056;
    
    /* Background & Surface Colors */
    --color-background: #1a1b1f;
    --color-surface: #252730;
    --color-surface-elevated: #2d3039;
    --color-surface-hover: #353842;
    --color-overlay: rgba(255, 255, 255, 0.1);
    
    /* Game-Specific Colors */
    --color-game-board: #2d3039;
    --color-tile-default: #353842;
    --color-tile-hover: #3f424c;
    --color-tile-active: #494d57;
    --color-tile-selected: #4a8bc7;
    --color-tile-correct: #198754;
    --color-tile-incorrect: #dc2626;
    --color-tile-hint: #f59e0b;
    
    /* Grid & Lines */
    --color-grid-line: #3f424c;
    --color-grid-line-major: #565a65;
    --color-connector: var(--color-text-secondary);
    --color-connector-active: var(--color-accent);
    
    /* Status Colors */
    --color-success: #198754;
    --color-success-light: #1e3a2a;
    --color-error: #dc2626;
    --color-error-light: #3a1f1f;
    --color-warning: #f59e0b;
    --color-warning-light: #3a2f1a;
    --color-info: var(--color-primary);
    --color-info-light: #1e2a3a;
    
    /* Adjusted shadows for dark theme */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  }
}

/* Force dark theme class (for manual toggle) */
.theme-dark {
  --color-primary: #5a9fd6;
  --color-primary-hover: #6bb0f0;
  --color-primary-active: #7dbff8;
  --color-primary-light: #4a8bc7;
  --color-primary-dark: #3a7ab5;
  
  --color-secondary: #e8843a;
  --color-secondary-hover: #f0923a;
  --color-secondary-active: #f9943b;
  --color-secondary-light: #d6792b;
  --color-secondary-dark: #c26d24;
  
  --color-accent: #d61e8a;
  --color-accent-hover: #e61f93;
  --color-accent-active: #f530a0;
  --color-accent-light: #bc1976;
  --color-accent-dark: #a5166a;
  
  --color-text-primary: #e8eaf0;
  --color-text-secondary: #9ca3b3;
  --color-text-muted: #6c757d;
  --color-text-inverse: #000056;
  
  --color-background: #1a1b1f;
  --color-surface: #252730;
  --color-surface-elevated: #2d3039;
  --color-surface-hover: #353842;
  --color-overlay: rgba(255, 255, 255, 0.1);
  
  --color-game-board: #2d3039;
  --color-tile-default: #353842;
  --color-tile-hover: #3f424c;
  --color-tile-active: #494d57;
  --color-tile-selected: #4a8bc7;
  --color-tile-correct: #198754;
  --color-tile-incorrect: #dc2626;
  --color-tile-hint: #f59e0b;
  
  --color-grid-line: #3f424c;
  --color-grid-line-major: #565a65;
  
  --color-success: #198754;
  --color-success-light: #1e3a2a;
  --color-error: #dc2626;
  --color-error-light: #3a1f1f;
  --color-warning: #f59e0b;
  --color-warning-light: #3a2f1a;
  --color-info: var(--color-primary);
  --color-info-light: #1e2a3a;
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-sans);
  background-color: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  transition: background-color var(--transition-base), color var(--transition-base);
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1rem 0;
}

h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; font-weight: 500; }

p {
  margin: 0 0 1rem 0;
  color: var(--color-text-primary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-small {
  font-size: 0.875rem;
}

.text-mono {
  font-family: var(--font-family-mono);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--border-radius-md);
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background-color: var(--color-primary-active);
  transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-secondary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary:active {
  background-color: var(--color-secondary-active);
  transform: translateY(0);
}

/* Accent Button */
.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn-accent:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent:active {
  background-color: var(--color-accent-active);
  transform: translateY(0);
}

/* Outline Buttons */
.btn-outline {
  background-color: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Ghost Buttons */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text-primary);
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* ============================================
   MODALS & SPLASH SCREENS
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn var(--transition-base) forwards;
}

.modal, .splash {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  animation: scaleIn var(--transition-base) forwards;
}

.modal-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-grid-line);
}

.modal-title {
  margin: 0;
  color: var(--color-text-primary);
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--color-text-primary);
}

/* ============================================
   NOTIFICATIONS & ALERTS
   ============================================ */

.notification, .alert {
  padding: 1rem;
  border-radius: var(--border-radius-md);
  margin: 1rem 0;
  border-left: 4px solid transparent;
  animation: slideInRight var(--transition-base) ease-out;
}

.notification.success, .alert.success {
  background-color: var(--color-success-light);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.notification.error, .alert.error {
  background-color: var(--color-error-light);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.notification.warning, .alert.warning {
  background-color: var(--color-warning-light);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.notification.info, .alert.info {
  background-color: var(--color-info-light);
  border-left-color: var(--color-info);
  color: var(--color-info);
}

/* Floating notifications */
.notification-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  min-width: 300px;
  box-shadow: var(--shadow-lg);
}

/* ============================================
   SHARE BUTTONS
   ============================================ */

.share-buttons {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0 0 0;
}

.share-buttons .btn {
  min-width: 120px;
}