@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Custom CSS variables and global styles */
:root {
  --progress: 0%;

  /* Custom Tailwind color variables */
  /*
   * Token values are set per theme using [data-theme].
   * Keep :root aligned with the default theme (dark).
   */
  --color-primary: 15 23 42; /* slate-900 */
  --color-secondary: 30 41 59; /* slate-800 */
  --color-text: 248 250 252; /* slate-50 */
  --color-muted: 148 163 184; /* slate-400 */
  --color-accent: 16 185 129; /* emerald-500 */
  --color-success: 34 211 153; /* green-500 */
  --color-warning: 245 158 11; /* amber-500 */
}

/* Theme-aware design tokens (consumed by Tailwind classes like bg-primary/text-text) */
[data-theme="dark"] {
  --color-primary: 15 23 42; /* slate-900 */
  --color-secondary: 30 41 59; /* slate-800 */
  --color-text: 248 250 252; /* slate-50 */
  --color-muted: 148 163 184; /* slate-400 */
  --color-accent: 16 185 129; /* emerald-500 */
  --color-success: 34 211 153; /* green-500 */
  --color-warning: 245 158 11; /* amber-500 */
}

[data-theme="light"] {
  --color-primary: 248 250 252; /* slate-50 */
  --color-secondary: 226 232 240; /* slate-200 */
  --color-text: 30 41 59; /* slate-800 */
  --color-muted: 100 116 139; /* slate-500 */
  --color-accent: 16 185 129; /* emerald-500 */
  --color-success: 34 211 153; /* green-500 */
  --color-warning: 245 158 11; /* amber-500 */
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

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

/* Theme transition helpers (used by src/scripts/dark-mode.js) */
html.theme-transitioning * {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.theme-transition-overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-primary) / 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theme-transition-overlay.active {
  opacity: 1;
}

.theme-toggle-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  opacity: 0.6;
  pointer-events: none;
}

.theme-toggle-ripple.animate {
  transform: scale(4);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus styles */
button:focus,
a:focus {
  outline: 2px solid rgb(var(--color-accent));
  outline-offset: 2px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .animated-counter {
    font-size: 2.5rem; /* Smaller on mobile */
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning * {
    transition: none;
  }

  .theme-transition-overlay {
    transition: none;
  }

  .theme-toggle-ripple.animate {
    transition: none;
  }
}

/* Print styles */
@media print {
  .fixed {
    display: none; /* Hide refresh button */
  }

  .bg-secondary,
  .bg-primary {
    background: white !important;
    color: black !important;
  }
}