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

:root {
  --kv-bg: #f5f8fc;
  --kv-surface: #ffffff;
  --kv-surface-soft: #f8fbff;
  --kv-text: #0f172a;
  --kv-muted: #334155;
  --kv-primary: #2b6cb0;
  --kv-primary-soft: #60a5fa;
  --kv-accent: #b45309;
  --kv-hero-start: #dbeafe;
  --kv-hero-end: #fff1de;
  --kv-cta-start: #ffd693;
  --kv-cta-end: #ffbd73;
  --kv-cta-text: #533106;
  --kv-border: #cbd5e1;
  --kv-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

body {
  font-family: "Lato", "Segoe UI", sans-serif !important;
  color: var(--kv-text) !important;
  font-size: 16.5px;
  line-height: 1.72;
  background:
    radial-gradient(circle at 10% -15%, rgba(59, 130, 246, 0.12) 0, transparent 34%),
    radial-gradient(circle at 90% -8%, rgba(251, 191, 36, 0.12) 0, transparent 32%),
    linear-gradient(180deg, #fbfdff 0%, var(--kv-bg) 100%) !important;
}

h1,
h2,
h3,
h4,
.gradient-text,
.site-title,
.hero-title {
  font-family: "EB Garamond", Georgia, serif !important;
  letter-spacing: 0.01em;
  color: #0b214d !important;
}

p,
li,
span,
label,
small {
  color: var(--kv-muted);
}

header,
.sticky-header,
nav {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(30, 58, 138, 0.07);
}

.hero-gradient,
.hero,
.hero-section {
  background: linear-gradient(130deg, var(--kv-hero-start) 0%, #edf5ff 52%, var(--kv-hero-end) 100%) !important;
  color: #102a43 !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.32);
}

.hero-gradient h1,
.hero h1,
.hero-section h1,
.hero-gradient p,
.hero p,
.hero-section p {
  color: #102a43 !important;
}

.badge,
.badge-confirmed,
.badge-tbd,
.badge-info,
.status-badge {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}

.badge-confirmed {
  background: linear-gradient(125deg, #0f766e 0%, #0d9488 100%) !important;
}

.badge-tbd {
  background: linear-gradient(125deg, #b45309 0%, #d97706 100%) !important;
}

.card,
.modern-card,
.glass-card,
.info-card,
.feature-card,
.tool-card,
.stats-card,
article,
main section,
.content-section {
  background: var(--kv-surface) !important;
  border: 1px solid var(--kv-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--kv-shadow) !important;
}

.card:hover,
.modern-card:hover,
.glass-card:hover,
.info-card:hover,
.feature-card:hover,
.tool-card:hover,
.stats-card:hover,
article:hover {
  transform: translateY(-4px);
  transition: transform 180ms ease-out, box-shadow 220ms ease-out;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.17) !important;
}

.btn,
.btn-primary,
.btn-secondary,
.page-link,
.cta-button,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 180ms ease-out, box-shadow 220ms ease-out !important;
}

.btn-primary,
.page-link,
.cta-button,
button,
input[type="submit"],
input[type="button"] {
  color: var(--kv-cta-text) !important;
  border: 1px solid #f1c27d !important;
  background: linear-gradient(125deg, var(--kv-cta-start) 0%, var(--kv-cta-end) 100%) !important;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.26) !important;
}

.btn-secondary {
  background: #fff7eb !important;
  color: #6b430f !important;
  border: 2px solid #f3cf9c !important;
}

.btn-primary:hover,
.page-link:hover,
.cta-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
}

a {
  color: #2563eb;
}

a:hover {
  color: #1d4ed8;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
}

th,
td {
  border: 1px solid #dbeafe;
  padding: 12px 14px;
}

th {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
}

input,
textarea,
select {
  border: 1px solid #bfdbfe !important;
  border-radius: 12px !important;
  background: #f8fbff !important;
  color: #0f172a !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #f5b261 !important;
  box-shadow: 0 0 0 4px rgba(245, 178, 97, 0.2) !important;
}

footer {
  background: #1f2937 !important;
  color: #d1d5db !important;
  border-top: 1px solid rgba(71, 85, 105, 0.6);
}

footer a {
  color: #93c5fd !important;
}

footer a:hover {
  color: #dbeafe !important;
}

/* Legacy lavender cleanup: remove old #667eea/#764ba2 traces sitewide */
[style*="linear-gradient(135deg, #667eea"],
[style*="linear-gradient(135deg,#667eea"],
[style*="linear-gradient(90deg, #667eea"],
[style*="linear-gradient(90deg,#667eea"] {
  background: linear-gradient(125deg, #3b82f6 0%, #38bdf8 55%, #f59e0b 100%) !important;
}

[style*="#667eea15"],
[style*="#764ba215"] {
  background: #eff6ff !important;
}

[style*="background: #667eea"],
[style*="background:#667eea"] {
  background: #3b82f6 !important;
}

[style*="color: #667eea"],
[style*="color:#667eea"],
[style*="color: #764ba2"],
[style*="color:#764ba2"] {
  color: #2563eb !important;
}

[style*="border-color: #667eea"],
[style*="border-color:#667eea"],
[style*="border: 2px solid #667eea"],
[style*="border:2px solid #667eea"],
[style*="border: 3px solid #667eea"],
[style*="border:3px solid #667eea"],
[style*="border-left: 4px solid #667eea"],
[style*="border-left:4px solid #667eea"] {
  border-color: #60a5fa !important;
}

/* Emergency fallback: override legacy inline deep-blue CTA/button styles */
#feedback-btn,
#feedback-form button,
#feedback-modal button,
button[style*="#667eea"],
button[style*="#764ba2"],
button[style*="#2563eb"],
button[style*="#1d4ed8"],
button[style*="#1e40af"],
button[style*="#1e3a8a"],
input[type="submit"][style*="#667eea"],
input[type="submit"][style*="#764ba2"],
input[type="button"][style*="#667eea"],
input[type="button"][style*="#764ba2"],
a.btn[style*="#667eea"],
a.btn[style*="#764ba2"],
a[style*="#667eea"][style*="background"],
a[style*="#764ba2"][style*="background"],
a[style*="#2563eb"][style*="background"] {
  background: linear-gradient(120deg, var(--kv-cta-start) 0%, var(--kv-cta-end) 100%) !important;
  color: var(--kv-cta-text) !important;
  border: 1px solid #f1c27d !important;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.26) !important;
}

#feedback-btn:hover,
#feedback-form button:hover,
#feedback-modal button:hover,
button[style*="#667eea"]:hover,
button[style*="#764ba2"]:hover,
button[style*="#2563eb"]:hover,
button[style*="#1d4ed8"]:hover,
button[style*="#1e40af"]:hover,
button[style*="#1e3a8a"]:hover,
input[type="submit"][style*="#667eea"]:hover,
input[type="submit"][style*="#764ba2"]:hover,
input[type="button"][style*="#667eea"]:hover,
input[type="button"][style*="#764ba2"]:hover,
a.btn[style*="#667eea"]:hover,
a.btn[style*="#764ba2"]:hover,
a[style*="#667eea"][style*="background"]:hover,
a[style*="#764ba2"][style*="background"]:hover,
a[style*="#2563eb"][style*="background"]:hover {
  filter: brightness(1.03) saturate(1.02);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  h1 {
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
  }

  .card,
  .modern-card,
  .glass-card,
  .info-card,
  .feature-card,
  .tool-card,
  .stats-card,
  article,
  main section,
  .content-section {
    border-radius: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}