/* design.css */
/* Vercel-inspired minimal component styles */

/* Base Layout Polish */
body {
  background: var(--bg);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Clean Card Classes */
.glass-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease;
}
.glass-card:hover {
  border-color: var(--color-primary);
}

/* Nav Improvements */
nav {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Buttons */
.btn, button {
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: all 0.15s ease !important;
}
.btn-primary, button:not(.theme-toggle):not(.ad-modal-close):not(.mode-btn):not(#auth-btn) {
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  color: #ffffff !important;
}
.btn-primary:hover, button:not(.theme-toggle):not(.ad-modal-close):not(.mode-btn):not(#auth-btn):hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

/* Active Nav highlight */
nav a.active {
  color: var(--color-primary) !important;
  background: var(--color-accent-glow) !important;
}

/* Hero Section Refinements */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 48px;
  align-items: center;
  padding: 60px 0;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
}
:root[data-theme="dark"] .hero-copy h1 {
  color: var(--ink);
}

/* Scanner Preview Panel styling */
.scanner-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* Pricing Overrides */
.pricing-grid {
  gap: 16px !important;
  margin-top: 32px !important;
}
.pricing-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  box-shadow: var(--shadow) !important;
  transition: border-color 0.15s ease !important;
}
.pricing-card:hover {
  border-color: var(--color-primary) !important;
}
.pricing-card.pro {
  border: 2px solid var(--color-primary) !important;
}

/* Score Animations */
.score strong {
  font-size: 2rem !important;
  font-weight: 700;
  color: var(--color-primary);
}

/* Micro-animations */
.fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom modern scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}