/* =============================================================================
   EVERLEAF DESIGN SYSTEM  ·  v1
   Direction: "Specimen" — engineered nature. Fraunces + Hanken Grotesk + IBM
   Plex Mono, cool paper, deep evergreen, one synthetic emerald accent.

   Usage: include the font link, then this file.
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Surfaces (light) — */
  --ev-paper:        #ecede6;   /* page background */
  --ev-paper-raised: #f5f5f0;   /* cards, inputs */
  --ev-paper-sunken: #e4e6dc;   /* spec strips, wells */
  --ev-line:         #d8d4c6;   /* hairline on light */
  --ev-line-soft:    #e1ddce;   /* softer divider */

  /* — Evergreen (dark surfaces + brand) — */
  --ev-green-900: #cfe9d8;      /* footer (flipped to mint band) */
  --ev-green-800: #cfe9d8;      /* hero / dark sections (flipped to mint band) */
  --ev-green-700: #16271d;      /* headings on light */
  --ev-green-600: #1e3a2b;      /* primary brand green */
  --ev-green-500: #28543d;      /* dark-button hover */
  --ev-line-dark: #aacdb8;      /* hairline on the mint bands */

  /* — Accent: synthetic emerald (the "proudly faux" note) — */
  --ev-accent:       #1f9d63;
  --ev-accent-hover: #28b073;
  --ev-accent-soft:  #cfe9d8;
  --ev-accent-ink:   #08130d;   /* text on an accent fill */

  /* — Text — */
  --ev-ink:           #1b241d;
  --ev-ink-muted:     #56604f;
  --ev-ink-faint:     #7a8175;
  --ev-on-dark:       #f4f3ec;  /* still used as text on green-600 buttons/pills/chips — keep light */
  --ev-on-dark-muted: #3c4a3f;  /* now reads on mint bands (footers/leads) */
  --ev-on-dark-faint: #5a6657;

  /* — Type families — */
  --ev-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ev-font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --ev-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* — Type scale — */
  --ev-text-display: 66px;
  --ev-text-h1:      54px;
  --ev-text-h2:      44px;
  --ev-text-h3:      28px;
  --ev-text-h4:      22px;
  --ev-text-lg:      18px;
  --ev-text-md:      16px;
  --ev-text-sm:      14px;
  --ev-text-xs:      12px;
  --ev-text-eyebrow: 11px;

  --ev-leading-tight: 1.02;
  --ev-leading-snug:  1.18;
  --ev-leading-body:  1.7;
  --ev-tracking-eyebrow: 0.2em;
  --ev-tracking-mono:    0.14em;

  /* — Spacing scale (4px base) — */
  --ev-space-1: 4px;
  --ev-space-2: 8px;
  --ev-space-3: 12px;
  --ev-space-4: 16px;
  --ev-space-5: 20px;
  --ev-space-6: 24px;
  --ev-space-8: 32px;
  --ev-space-10: 40px;
  --ev-space-12: 48px;
  --ev-space-16: 64px;
  --ev-space-20: 80px;
  --ev-space-24: 96px;

  /* — Radius — */
  --ev-radius-sharp: 2px;
  --ev-radius:       3px;
  --ev-radius-lg:    4px;
  --ev-radius-pill:  999px;

  /* — Elevation — */
  --ev-shadow-sm: 0 1px 2px rgba(16, 32, 23, 0.06);
  --ev-shadow:    0 6px 24px rgba(16, 32, 23, 0.10);
  --ev-shadow-lg: 0 18px 48px rgba(16, 32, 23, 0.16);

  /* — Motion — */
  --ev-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ev-dur:  180ms;

  /* Component bridge: --accent maps to the emerald so existing markup that
     references var(--accent) keeps working. */
  --accent: var(--ev-accent);
  --accent-soft: var(--ev-accent-soft);
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
.ev-root {
  font-family: var(--ev-font-body);
  color: var(--ev-ink);
  background: var(--ev-paper);
  -webkit-font-smoothing: antialiased;
  line-height: var(--ev-leading-body);
}
.ev-root *,
.ev-root *::before,
.ev-root *::after { box-sizing: border-box; }

::selection { background: var(--ev-accent); color: var(--ev-accent-ink); }

/* Focus floor — applies everywhere */
.ev-root a:focus-visible,
.ev-root button:focus-visible,
.ev-root input:focus-visible,
.ev-root [tabindex]:focus-visible,
reveal-slider:focus-within {
  outline: 2px solid var(--ev-accent);
  outline-offset: 3px;
  border-radius: var(--ev-radius-sharp);
}

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.ev-display,
.ev-h1, .ev-h2, .ev-h3, .ev-h4 {
  font-family: var(--ev-font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  color: var(--ev-green-700);
  letter-spacing: -0.015em;
  margin: 0;
}
.ev-display { font-size: var(--ev-text-display); line-height: var(--ev-leading-tight); }
.ev-h1 { font-size: var(--ev-text-h1); line-height: var(--ev-leading-tight); }
.ev-h2 { font-size: var(--ev-text-h2); line-height: var(--ev-leading-snug); }
.ev-h3 { font-size: var(--ev-text-h3); line-height: 1.2; letter-spacing: -0.01em; }
.ev-h4 { font-size: var(--ev-text-h4); line-height: 1.25; letter-spacing: -0.005em; }
.ev-quote-type { font-family: var(--ev-font-display); font-style: italic; font-weight: 400; }

.ev-lead { font-size: var(--ev-text-lg); line-height: var(--ev-leading-body); color: var(--ev-ink-muted); font-weight: 300; }
.ev-body { font-size: var(--ev-text-md); line-height: var(--ev-leading-body); color: var(--ev-ink); }
.ev-body--muted { color: var(--ev-ink-muted); font-weight: 300; }
.ev-small { font-size: var(--ev-text-sm); line-height: 1.6; color: var(--ev-ink-muted); }

/* Mono utility / data / labels — the "engineered spec" voice */
.ev-mono { font-family: var(--ev-font-mono); }
.ev-eyebrow {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-text-eyebrow);
  letter-spacing: var(--ev-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ev-accent);
}
.ev-label {
  font-family: var(--ev-font-mono);
  font-size: var(--ev-text-xs);
  letter-spacing: var(--ev-tracking-mono);
  text-transform: uppercase;
  color: var(--ev-ink-faint);
}

/* On-"dark" variants — bands are now mint, so text is dark green */
.ev-on-dark { color: #16271d; }
.ev-on-dark .ev-display,
.ev-on-dark .ev-h1, .ev-on-dark .ev-h2,
.ev-on-dark .ev-h3, .ev-on-dark .ev-h4 { color: #16271d; }
.ev-on-dark .ev-lead,
.ev-on-dark .ev-body--muted { color: var(--ev-on-dark-muted); }

/* ----------------------------------------------------------------------------
   4. SECTION HEADER (eyebrow + display heading)
   -------------------------------------------------------------------------- */
.ev-section-head { display: flex; flex-direction: column; gap: var(--ev-space-3); }
.ev-section-head--center { text-align: center; align-items: center; }

/* ----------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.ev-btn {
  --_bg: var(--ev-green-600);
  --_fg: var(--ev-on-dark);
  --_bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ev-space-2);
  font-family: var(--ev-font-mono);
  font-size: var(--ev-text-xs);
  font-weight: 500;
  letter-spacing: var(--ev-tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 15px 28px;
  border: 1px solid var(--_bd);
  border-radius: var(--ev-radius-sharp);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: background var(--ev-dur) var(--ev-ease),
              color var(--ev-dur) var(--ev-ease),
              border-color var(--ev-dur) var(--ev-ease),
              transform var(--ev-dur) var(--ev-ease);
}
.ev-btn:active { transform: translateY(1px); }

.ev-btn--primary { --_bg: var(--ev-accent); --_fg: var(--ev-accent-ink); }
.ev-btn--primary:hover { --_bg: var(--ev-accent-hover); }

.ev-btn--dark { --_bg: var(--ev-green-600); --_fg: var(--ev-on-dark); }
.ev-btn--dark:hover { --_bg: var(--ev-green-500); }

.ev-btn--outline { --_bg: transparent; --_fg: var(--ev-green-600); --_bd: var(--ev-green-600); }
.ev-btn--outline:hover { --_bg: var(--ev-green-600); --_fg: var(--ev-on-dark); }

.ev-btn--ghost {
  --_bg: transparent; --_fg: var(--ev-green-600); --_bd: transparent;
  padding-left: 6px; padding-right: 6px;
  border-bottom: 1px solid var(--ev-accent);
  border-radius: 0;
}
.ev-btn--ghost:hover { --_fg: var(--ev-ink); }

/* On-dark ghost (used in the hero) */
.ev-on-dark .ev-btn--ghost { --_fg: var(--ev-on-dark); }
.ev-on-dark .ev-btn--ghost:hover { --_fg: #fff; }

.ev-btn--sm { padding: 11px 18px; font-size: 10.5px; }
.ev-btn--lg { padding: 18px 34px; font-size: 13px; }
.ev-btn--block { display: flex; width: 100%; }

.ev-btn:disabled,
.ev-btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}

/* ----------------------------------------------------------------------------
   6. BADGES & CHIPS
   -------------------------------------------------------------------------- */
.ev-badge {
  display: inline-flex; align-items: center;
  font-family: var(--ev-font-mono);
  font-size: 9.5px; letter-spacing: var(--ev-tracking-mono);
  text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--ev-radius-sharp);
  background: var(--ev-green-600); color: var(--ev-accent-soft);
}
.ev-badge--accent { background: var(--ev-accent); color: var(--ev-accent-ink); }
.ev-badge--quiet  { background: var(--ev-paper-sunken); color: var(--ev-ink-muted); }

.ev-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ev-font-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--ev-radius-sharp);
  background: rgba(8, 18, 13, 0.62); color: var(--ev-on-dark);
  backdrop-filter: blur(3px);
}

/* Cart count pill */
.ev-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--ev-radius-pill);
  background: var(--ev-green-600); color: var(--ev-on-dark);
  font-family: var(--ev-font-mono); font-size: 11px;
}

/* ----------------------------------------------------------------------------
   7. FORM CONTROLS
   -------------------------------------------------------------------------- */
.ev-input {
  width: 100%;
  font-family: var(--ev-font-body); font-size: var(--ev-text-sm);
  color: var(--ev-ink);
  background: var(--ev-paper-raised);
  border: 1px solid var(--ev-line);
  border-radius: var(--ev-radius-sharp);
  padding: 14px 16px;
  outline: none;
  transition: border-color var(--ev-dur) var(--ev-ease);
}
.ev-input::placeholder { color: var(--ev-ink-faint); }
.ev-input:focus { border-color: var(--ev-accent); }
.ev-input:disabled { opacity: 0.5; cursor: not-allowed; }

.ev-field { display: flex; flex-direction: column; gap: var(--ev-space-2); }
.ev-form-inline { display: flex; gap: 10px; }
.ev-form-inline .ev-input { flex: 1; }

/* ----------------------------------------------------------------------------
   8. CARDS, TILES & MEDIA
   -------------------------------------------------------------------------- */

/* Product card */
.ev-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--ev-paper-raised);
  border: 1px solid var(--ev-line-soft);
  border-radius: var(--ev-radius-lg);
  transition: border-color var(--ev-dur) var(--ev-ease),
              box-shadow var(--ev-dur) var(--ev-ease);
}
.ev-card:hover { border-color: #c7d3c0; box-shadow: var(--ev-shadow-sm); }
.ev-card__media { position: relative; aspect-ratio: 1/1; background: #e7eae0; overflow: hidden; }
.ev-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.ev-card__type { margin-bottom: var(--ev-space-2); }
.ev-card__title { margin: 0 0 4px; }
.ev-card__price { font-family: var(--ev-font-mono); font-size: 13px; color: var(--ev-ink-muted); margin-bottom: var(--ev-space-4); }
.ev-card__cta { margin-top: auto; }

/* Wishlist toggle (floats over media) */
.ev-fav {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; border: none; border-radius: var(--ev-radius-pill);
  background: rgba(245, 245, 240, 0.92); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; color: var(--ev-ink-faint);
  transition: background var(--ev-dur) var(--ev-ease), color var(--ev-dur) var(--ev-ease);
}
.ev-fav:hover { background: #fff; }
.ev-fav[aria-pressed="true"] { color: var(--ev-accent); }

/* Collection tile (3:4 image + caption below) */
.ev-tile { display: block; text-decoration: none; color: inherit; }
.ev-tile__media { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--ev-radius); background: #dfe2d6; }
.ev-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ev-ease); }
.ev-tile:hover .ev-tile__media img { transform: scale(1.03); }
.ev-tile__title { margin: 16px 0 0; }
.ev-tile__meta { margin: 6px 0 0; }

/* Room tile (image + gradient + overlaid label) */
.ev-room { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--ev-radius); text-decoration: none; background: #dfe2d6; }
.ev-room img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ev-ease); }
.ev-room:hover img { transform: scale(1.03); }
.ev-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,36,26,0.7), rgba(20,36,26,0) 55%); pointer-events: none; }
.ev-room__label { position: absolute; left: 20px; bottom: 18px; z-index: 1; color: var(--ev-on-dark); font-family: var(--ev-font-display); font-size: 27px; font-weight: 500; pointer-events: none; }

/* ----------------------------------------------------------------------------
   9. SPEC LIST (mono key + plain-language description)
   -------------------------------------------------------------------------- */
.ev-spec { display: flex; flex-direction: column; border-top: 1px solid var(--ev-line); }
.ev-spec__row { display: flex; gap: var(--ev-space-5); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--ev-line); }
.ev-spec__key { font-family: var(--ev-font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ev-accent); min-width: 124px; flex-shrink: 0; }
.ev-spec__val { font-size: 14px; color: var(--ev-ink); }
.ev-on-dark .ev-spec { border-top-color: var(--ev-line-dark); }
.ev-on-dark .ev-spec__row { border-bottom-color: var(--ev-line-dark); }
.ev-on-dark .ev-spec__val { color: #2c3a2e; }

/* ----------------------------------------------------------------------------
   10. MISC: divider, quote, announcement, spec strip
   -------------------------------------------------------------------------- */
.ev-divider { height: 1px; background: var(--ev-line); border: 0; margin: 0; }
.ev-on-dark .ev-divider { background: var(--ev-line-dark); }

.ev-quote { text-align: center; }
.ev-quote__text { font-family: var(--ev-font-display); font-style: italic; font-size: 30px; line-height: 1.4; color: #1f2c22; margin: 0 0 22px; }
.ev-quote__cite { font-family: var(--ev-font-mono); font-size: 11px; letter-spacing: var(--ev-tracking-mono); text-transform: uppercase; color: var(--ev-ink-faint); }

.ev-announce {
  background: var(--ev-green-800); color: var(--ev-green-700);
  font-family: var(--ev-font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; padding: 10px 16px;
}

.ev-spec-strip {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 36px;
  font-family: var(--ev-font-mono); font-size: 11px; letter-spacing: var(--ev-tracking-mono);
  text-transform: uppercase; color: #3f4a3e;
  background: var(--ev-paper-sunken); padding: 18px 0;
}
.ev-spec-strip b { color: var(--ev-accent); font-weight: 500; }

/* ----------------------------------------------------------------------------
   11. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ev-root *, .ev-root *::before, .ev-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}