@import "tailwindcss";

@theme inline {
  /* Color tokens */
  --color-forest: #1E4A3D;
  --color-forest-deep: #14332A;
  --color-sage: #F4F6F0;
  --color-mist: #DCE6DD;
  --color-ink: #1A2420;
  --color-ink-soft: #5B6B63;
  --color-gold: #D7A23E;
  --color-gold-deep: #B8842A;
  --color-clay: #C2613F;

  /* Fonts */
  --font-display: var(--font-fraunces);
  --font-body: var(--font-plex-sans);
  --font-mono: var(--font-plex-mono);

  /* Radius */
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 2px 16px rgba(20, 51, 42, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(20, 51, 42, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-sage);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-forest-deep);
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   Loading + notification motion
   ───────────────────────────────────────────────────────────────────────────── */

/* Shimmer skeleton — a soft sweep instead of a flat pulse */
@keyframes villa-shimmer {
  0%   { background-position: -450px 0; }
  100% { background-position:  450px 0; }
}
.villa-skeleton {
  background-color: #E9EFE9;
  background-image: linear-gradient(90deg, rgba(233, 239, 233, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(233, 239, 233, 0) 100%);
  background-size: 450px 100%;
  background-repeat: no-repeat;
  animation: villa-shimmer 1.5s ease-in-out infinite;
}

/* Gentle rise + fade for page/section loaders */
@keyframes villa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.villa-fade-in { animation: villa-fade-in 0.4s ease both; }

/* Slow pulse for the loader's inner mark */
@keyframes villa-pulse-soft {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.82); }
}
.villa-pulse-soft { animation: villa-pulse-soft 1.5s ease-in-out infinite; }

/* Toast: spring in from the top-right, ease out to the right */
@keyframes villa-toast-in {
  0%   { opacity: 0; transform: translateX(24px) scale(0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.villa-toast-in { animation: villa-toast-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Toast auto-dismiss progress bar */
@keyframes villa-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Indeterminate top progress bar for in-flight searches */
@keyframes villa-bar-slide {
  0%   { transform: translateX(-100%) scaleX(0.4); }
  50%  { transform: translateX(0%)    scaleX(0.6); }
  100% { transform: translateX(100%)  scaleX(0.4); }
}
.villa-bar-slide { animation: villa-bar-slide 1.15s ease-in-out infinite; }