/* Yepleads — static site stylesheet
   CSS variables, custom utilities, and keyframes lifted from the React app's index.css
   so the Tailwind utility classes used in markup keep their semantic colors. */

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 84%, 5%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215, 16%, 47%);
  --card: hsl(0, 0%, 100%);
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  --primary: hsl(221, 83%, 53%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(262, 83%, 58%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --accent: hsl(48, 96%, 53%);
  --accent-foreground: hsl(222, 84%, 5%);
  --success: hsl(142, 76%, 36%);
  --destructive: hsl(0, 84%, 60%);
  --ring: hsl(221, 83%, 53%);
  --radius: 0.75rem;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--background);
  color: var(--foreground);
}

/* Tailwind color shortcut overrides so semantic classes resolve to our HSL vars */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-foreground { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-success { background-color: var(--success); }
.bg-muted { background-color: var(--muted); }
.bg-background { background-color: var(--background); }

.border-primary { border-color: var(--primary); }
.border-border { border-color: var(--border); }

.from-primary { --tw-gradient-from: var(--primary) var(--tw-gradient-from-position); --tw-gradient-to: hsl(221 83% 53% / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-secondary { --tw-gradient-to: hsl(262 83% 58% / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--secondary) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.to-secondary { --tw-gradient-to: var(--secondary) var(--tw-gradient-to-position); }
.to-accent { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position); }
.from-secondary { --tw-gradient-from: var(--secondary) var(--tw-gradient-from-position); --tw-gradient-to: hsl(262 83% 58% / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

.hover\:text-primary:hover { color: var(--primary); }
.hover\:bg-primary:hover { background-color: var(--primary); }
.hover\:border-primary\/50:hover { border-color: hsl(221 83% 53% / 0.5); }
.focus\:border-primary:focus { border-color: var(--primary); }

.bg-primary\/5  { background-color: hsl(221 83% 53% / 0.05); }
.bg-primary\/10 { background-color: hsl(221 83% 53% / 0.10); }
.bg-primary\/20 { background-color: hsl(221 83% 53% / 0.20); }
.bg-primary\/30 { background-color: hsl(221 83% 53% / 0.30); }
.bg-secondary\/5  { background-color: hsl(262 83% 58% / 0.05); }
.bg-secondary\/10 { background-color: hsl(262 83% 58% / 0.10); }
.bg-secondary\/20 { background-color: hsl(262 83% 58% / 0.20); }
.bg-accent\/10 { background-color: hsl(48 96% 53% / 0.10); }
.from-primary\/10 { --tw-gradient-from: hsl(221 83% 53% / 0.10) var(--tw-gradient-from-position); --tw-gradient-to: hsl(221 83% 53% / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary\/20 { --tw-gradient-from: hsl(221 83% 53% / 0.20) var(--tw-gradient-from-position); --tw-gradient-to: hsl(221 83% 53% / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-secondary\/10 { --tw-gradient-to: hsl(262 83% 58% / 0.10) var(--tw-gradient-to-position); }
.to-primary\/30 { --tw-gradient-to: hsl(221 83% 53% / 0.30) var(--tw-gradient-to-position); }
.border-primary\/20 { border-color: hsl(221 83% 53% / 0.20); }

/* Custom utilities */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.glow-box { box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15); }

.bg-grid {
  background-image: radial-gradient(circle, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
  background-size: 50px 50px;
}

.glass-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Animations */
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.animate-fade-in {
  animation: fadeIn 1s ease-in-out both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-in {
  animation: slideIn 0.6s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}
@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }

.animate-slide-up {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(30px);
}
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }

.animate-slide-down {
  animation: slideDown 0.4s ease-out forwards;
  opacity: 0;
  transform: translateY(-15px);
}
@keyframes slideDown { to { opacity: 1; transform: translateY(0); } }

.animate-scale-in {
  animation: scaleIn 0.5s ease-out forwards;
  opacity: 0;
  transform: scale(0.9);
}
@keyframes scaleIn { to { opacity: 1; transform: scale(1); } }

.animate-bounce-in {
  animation: bounceIn 0.8s ease-out forwards;
  opacity: 0;
  transform: scale(0.3);
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-glow { animation: glow 2s ease-in-out infinite alternate; }
@keyframes glow {
  from { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
  to   { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6), 0 0 40px rgba(147, 51, 234, 0.3); }
}

/* Form bits */
input, textarea, select {
  font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px hsl(221 83% 53% / 0.15);
}

/* Toast */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 100;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 360px;
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  animation: toastIn 0.25s ease-out;
}
.toast.error { border-left-color: var(--destructive); }
.toast.success { border-left-color: var(--success); }
.toast-title { font-weight: 700; font-size: 0.95rem; color: var(--foreground); margin-bottom: 2px; }
.toast-desc { font-size: 0.85rem; color: var(--muted-foreground); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page section show/hide for in-page routing */
.page-section { display: none; }
.page-section.active { display: block; }

/* Hide bot/search-engine-only legal pages by default */
section[data-page]:not(.active) { display: none; }

/* Lucide icons render at 1em by default — give them sensible sizing when used inline */
[data-lucide] { display: inline-block; vertical-align: middle; }

/* Better default for the white-text-on-yellow accent so it stays readable */
.text-accent-foreground { color: var(--accent-foreground); }