/* ============================================================
   GIGAnalyser — Premium UI polish (global)
   ------------------------------------------------------------
   Load this AFTER theme.css on every page:
     <link rel="stylesheet" href="/css/app.css?v=2" />

   It layers premium touches on top of the theme tokens:
   gradient accents, button hovers, card depth, and dark-mode
   contrast guarantees. All rules are theme-aware (use
   rgb(var(--token-rgb)) so they adapt to light/dark).
   ============================================================ */

/* ---------- Premium accent gradient ---------- */
.accent-gradient {
  background-image: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
}
.accent-gradient:hover {
  background-image: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
}

/* Gradient text for headlines / hero numbers */
.text-gradient {
  background-image: linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Gold accent (stars, badges, highlights) ---------- */
.text-gold { color: #F59E0B; }
.bg-gold { background-color: #F59E0B; }
.border-gold { border-color: rgba(245, 158, 11, 0.4); }

.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #F59E0B;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
}
html.dark .badge-gold { color: #FBBF24; }

.star-gold {
  color: #F59E0B;
  -webkit-text-stroke: 0.5px rgba(245, 158, 11, 0.4);
}

/* ---------- Premium buttons ---------- */
.btn-gradient {
  background-image: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #fff;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.25);
}
.btn-gradient:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.35);
}
.btn-gradient:active {
  transform: translateY(0);
}

/* Generic button hover lift for solid accent buttons */
button:not(:disabled),
a {
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
button:not(:disabled):hover {
  filter: brightness(1.05);
}

/* ---------- Card depth + borders ---------- */
.card-premium {
  background: rgb(var(--surface-raised-rgb));
  border: 1px solid rgb(var(--surface-border-rgb));
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
}

/* ---------- Dark mode contrast guarantees ---------- */
html.dark body {
  color: #FFFFFF;
}
html.dark .text-text-primary,
html.dark [class*="text-text-primary"] {
  color: #FFFFFF;
}
html.dark .text-text-secondary {
  color: #E6EDF3;
}
html.dark .text-text-muted {
  color: #8B949E;
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark .font-bold {
  color: #FFFFFF;
}
html.dark .bg-surface-raised,
html.dark .card-premium {
  background-color: rgb(var(--surface-raised-rgb));
  border-color: rgb(var(--surface-border-rgb));
}

/* Ensure inputs are clearly visible in dark mode */
html.dark input,
html.dark select,
html.dark textarea {
  color: #FFFFFF;
  background-color: rgb(var(--surface-rgb));
  border-color: rgb(var(--surface-border-rgb));
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6B7280;
}

/* ---------- Scrollbar polish (theme-aware) ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--surface-border-rgb));
  border-radius: 8px;
}

/* ---------- Scrolling testimonials (login/signup) ---------- */
.testi-viewport {
  height: 320px;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.testi-track {
  display: flex;
  flex-direction: column;
  animation: testiScroll 30s linear infinite;
  will-change: transform;
}
.testi-card { margin-bottom: 12px; }
.testi-viewport:hover .testi-track { animation-play-state: paused; }
@keyframes testiScroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@media (min-width: 768px) {
  .testi-viewport { height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; }
}