/* CSS Variables for theming */
:root {
  /* Light theme (mobile colors) */
  --color-primary: #6d4cb9;
  --color-secondary: #f5f5f5;
  --color-tertiary: #d1d2f7;
  --color-text: #111111;
  --color-background: #ffffff;
  --color-border: #ddd;
  --color-input-background: #f9f9f9;
  --color-see-more: #6d4cb9; /* Primary color for see more button */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Z-axis scale */
  --z-base: 0;
  --z-raised: 5;
  --z-floating: 10;
  --z-menu: 30;
  --z-controls: 40;
  --z-overlay: 60;
  --z-modal: 90;
  --z-tooltip: 110;
  --z-top: 120;
  
  /* Logo filter (invert in light mode) */
  --logo-filter: invert(1);
}

/* Dark theme */
body.night-mode {
  --color-primary: #311770;
  --color-secondary: #333;
  --color-tertiary: #27252b;
  --color-text: #f5f5f5;
  --color-background: #0f0f0f;
  --color-border: #444;
  --color-input-background: #444;
  --color-see-more: #8a6de8; /* Lighter purple for dark mode */
  --logo-filter: none;
}

/* Logo styling */
.logo img {
  filter: var(--logo-filter);
  transition: filter 0.3s ease;
}

/* Loading spinner */
.loading-spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border-left-color: var(--color-primary);
  animation: spin 1s ease infinite;
  position: relative;
  left: 0;
  margin: 10px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}