/* =========================================================================
   EaseAway Design Tokens — Colors + Typography
   Single source of truth. Import once at the top of a page or bundle.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,700&display=swap');

:root {
  /* ------- Brand colors (shipped tokens — do not rename) ------- */
  --ea-forest:           #1b2e1f;   /* Primary text, brand anchor. NOT "navy". */
  --ea-forest-soft:      #2d4a33;   /* Secondary text, nav hover */
  --ea-terracotta:       #e8734a;   /* Primary action, eyebrow, accent */
  --ea-terracotta-hover: #d65f37;
  --ea-cream:            #f9f7f2;   /* Page background — NEVER pure white */
  --ea-cream-deep:       #efeae0;   /* Alternating section background */
  --ea-sand:             #e8dcc5;   /* Card border accent, hairline */

  /* ------- Semantic state colors ------- */
  --ea-amber-warn:       #c05621;   /* Advisory state (70–90% budget, Safe Haven callout) */
  --ea-coral-alert:      #c53030;   /* Alert state (>90% budget, past-cutoff, crowded) */
  --ea-mint-ok:          #22543d;   /* Verified / OK. DEEP forest-mint, NOT #34d399 emerald */

  /* ------- Glass ------- */
  --ea-glass-bg:         rgba(255, 255, 255, 0.72);
  --ea-glass-border:     rgba(255, 255, 255, 0.45);
  --ea-glass-blur:       12px;

  /* ------- Radii ------- */
  --ea-radius-sm:        10px;     /* Inline chips, micro badges */
  --ea-radius-md:        18px;     /* Standard cards */
  --ea-radius-lg:        24px;     /* Hero cards, HUDs, alert boxes */
  --ea-radius-pill:      999px;    /* Pill buttons, tag chips */

  /* ------- Shadows ------- */
  --ea-shadow-soft:      0 10px 30px -10px rgba(27, 46, 31, 0.12);
  --ea-shadow-lift:      0 18px 40px -14px rgba(27, 46, 31, 0.22);
  --ea-shadow-focus:     0 0 0 3px rgba(232, 115, 74, 0.25);

  /* ------- Motion ------- */
  --ea-ease:             cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --ea-ease-story:       cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */

  /* ------- Typography stacks ------- */
  --ea-font-display:     'Fraunces', Georgia, 'Times New Roman', serif;
  --ea-font-body:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ------- Type scale (fluid) ------- */
  --ea-text-eyebrow:     0.72rem;       /* 11.5px. Uppercase, 0.22em tracking */
  --ea-text-body:        1rem;          /* 16px. Body default */
  --ea-text-body-lg:     1.18rem;       /* 18.9px. Editorial paragraph */
  --ea-text-h3:          1.25rem;       /* Card title */
  --ea-text-h2:          clamp(1.6rem, 3vw, 2.4rem);
  --ea-text-h1:          clamp(2.2rem, 6vw, 5rem);     /* Editorial headline */
  --ea-text-h1-xl:       clamp(3rem, 10vw, 6.5rem);    /* Motion Narrative chapter title */

  --ea-line-body:        1.65;   /* @kind font */
  --ea-line-display:     0.98;   /* @kind font */
  --ea-track-eyebrow:    0.22em;

  /* ------- Spacing scale ------- */
  --ea-space-xs:         4px;
  --ea-space-sm:         8px;
  --ea-space-md:         16px;
  --ea-space-lg:         24px;
  --ea-space-xl:         32px;
  --ea-space-2xl:        48px;
  --ea-space-3xl:        64px;
}

/* =========================================================================
   Base / semantic element styles
   Use these so raw h1/p/body work without class names.
   ========================================================================= */

html { scroll-behavior: smooth; }

body {
  font-family: var(--ea-font-body);
  font-size: var(--ea-text-body);
  line-height: var(--ea-line-body);
  color: var(--ea-forest);
  background: var(--ea-cream);             /* never pure white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
  font-family: var(--ea-font-display);
  font-weight: 800;
  color: var(--ea-forest);
  letter-spacing: -0.03em;
  line-height: var(--ea-line-display);
}

h1 { font-size: var(--ea-text-h1); margin: 0 0 1.5rem; }
h2 { font-size: var(--ea-text-h2); margin: 0 0 1rem; }
h3 { font-size: var(--ea-text-h3); font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.02em; }

p {
  font-family: var(--ea-font-body);
  font-size: var(--ea-text-body-lg);
  line-height: var(--ea-line-body);
  color: var(--ea-forest-soft);
  max-width: 62ch;
  margin: 0 0 1.2rem;
}
p strong { color: var(--ea-forest); font-weight: 700; }

small, .eyebrow {
  font-family: var(--ea-font-body);
  font-size: var(--ea-text-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ea-track-eyebrow);
  text-transform: uppercase;
  color: var(--ea-terracotta);
}

a { color: var(--ea-forest); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ea-terracotta); }

/* Focus ring — every interactive element gets this */
:focus-visible {
  outline: none;
  box-shadow: var(--ea-shadow-focus);
  border-radius: var(--ea-radius-sm);
}

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

/* =========================================================================
   Shared result-card utilities (hotel + camping grids)
   ========================================================================= */

@keyframes ea-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ea-shimmer {
  background: linear-gradient(
    90deg,
    var(--ea-cream-deep) 25%,
    var(--ea-sand) 50%,
    var(--ea-cream-deep) 75%
  );
  background-size: 200% 100%;
  animation: ea-shimmer 1.2s var(--ea-ease) infinite;
}

.ea-skeleton-card {
  background: var(--ea-cream);
  border: 1px solid var(--ea-sand);
  border-radius: var(--ea-radius-md);
  overflow: hidden;
  box-shadow: var(--ea-shadow-soft);
  pointer-events: none;
}

.ea-skeleton-card__photo {
  aspect-ratio: 3 / 2;
  width: 100%;
}

.ea-skeleton-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-skeleton-card__line {
  height: 12px;
  border-radius: var(--ea-radius-pill);
}

.ea-skeleton-card__line--title {
  height: 18px;
  width: 72%;
}

.ea-skeleton-card__line--meta {
  width: 55%;
}

.ea-skeleton-card__line--price {
  width: 38%;
  height: 22px;
}

.ea-skeleton-card__cta {
  height: 44px;
  border-radius: var(--ea-radius-pill);
  margin-top: 4px;
}

.ea-img-blur {
  filter: blur(12px);
  transform: scale(1.03);
  opacity: 0.88;
  transition: filter 0.35s var(--ea-ease), opacity 0.35s var(--ea-ease), transform 0.35s var(--ea-ease);
}

.ea-img-loaded {
  filter: none;
  opacity: 1;
  transform: none;
}