/* ============================================
   CSS Variables & Themes
   ============================================ */

/* Light Theme (default) */
:root {
  --bg-main: #ffffff;
  --bg-surface: #f9fafb;
  --bg-surface-alt: #f3f4f6;
  --text-main: #111827;
  --text-secondary: #4b5563;
  --text-inverted: #ffffff;
  --primary: #000000;
  --primary-hover: #374151;
  --divider: #e5e7eb;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --shadow-color: rgba(0, 0, 0, 0.05);
  /* RGB values for backdrop-filter (used in navbar) */
  --bg-main-rgb: 255, 255, 255;
}

/* Dark Theme */
.theme-dark {
  --bg-main: #0B1120;          /* bluish black */
  --bg-surface: #111827;
  --bg-surface-alt: #1F2937;
  --text-main: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-inverted: #0B1120;
  --primary: #ffffff;
  --primary-hover: #e5e7eb;
  --divider: #374151;
  --input-bg: #1F2937;
  --input-border: #374151;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --bg-main-rgb: 11, 17, 32;
}

/* ============================================
   Base Styles
   ============================================ */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Inter', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Utility Classes (using CSS variables)
   ============================================ */
.bg-primary     { background-color: var(--primary); }
.text-primary   { color: var(--primary); }
.text-inverted  { color: var(--text-inverted); }
.text-secondary { color: var(--text-secondary); }
.border-primary { border-color: var(--primary); }
.border-divider { border-color: var(--divider); }
.bg-surface-alt { background-color: var(--bg-surface-alt); }

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--divider);
}

.hover-bg:hover {
  background-color: var(--bg-surface-alt);
}

/* ============================================
   Navbar (with backdrop blur)
   ============================================ */
.navbar {
  background-color: rgba(var(--bg-main-rgb), 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
}

/* Fallback for browsers that don't support CSS variables in rgba() */
.theme-light .navbar {
  background-color: rgba(255, 255, 255, 0.85);
}

.theme-dark .navbar {
  background-color: rgba(11, 17, 32, 0.85);
}

/* ============================================
   Form Elements
   ============================================ */
.input-field {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-main);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.2);
}

/* ============================================
   Modal Animations
   ============================================ */
.modal.show {
  display: flex !important;
}

.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* ============================================
   Skeleton Loading
   ============================================ */
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0%   { background-color: var(--bg-surface-alt); }
  100% { background-color: var(--divider); }
}

/* ============================================
   Project Card Hover
   ============================================ */
.project-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px var(--shadow-color);
}