/* ============================================================
   Guestly Homes — Brand tokens
   Guestly Direct 2026 · Direct booking design system
   Homely Away From Home
   ------------------------------------------------------------
   Drop-in custom properties for the pitch page, the property
   listing and the 4-step direct checkout.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. Colour
     ---------------------------------------------------------- */

  /* Navy — headings, dark bands, primary text. */
  --guestly-navy: #2b2d42;

  /* Pink — primary CTA only. One pink action per screen. */
  --guestly-pink: #ff385c;

  /* Yellow — accents: signature dash, "Save 12%" badges,
     design-note lightbulb, highlighted chart bars. Never a CTA. */
  --guestly-yellow: #ffb300;

  /* Teal — trust and confirmation: verified badges, locks,
     included perks, selected add-ons, completed funnel bars. */
  --guestly-teal: #0f7173;

  /* Body grey — all running copy, captions, helper text. */
  --guestly-body-grey: #7e7f8c;

  /* Off-white — section backgrounds and cards on white. */
  --guestly-offwhite: #faf9f7;

  /* Pure white — page background, cards on off-white. */
  --guestly-white: #ffffff;

  /* Derived tints (use as flat values, not new brand colours) */
  --guestly-navy-08: rgb(43 45 66 / 0.08); /* hairline borders   */
  --guestly-navy-15: rgb(43 45 66 / 0.15); /* input borders      */
  --guestly-pink-06: rgb(255 56 92 / 0.06); /* selected card fill */
  --guestly-teal-08: rgb(15 113 115 / 0.08); /* selected add-on    */
  --guestly-yellow-15: rgb(255 179 0 / 0.15); /* badge fill       */
  --guestly-yellow-ink: #9a6b00; /* readable ink on yellow tints  */

  /* ----------------------------------------------------------
     2. Typography — Poppins only
     Load: https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700
     ---------------------------------------------------------- */
  --guestly-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --guestly-weight-body: 400; /* running copy            */
  --guestly-weight-medium: 500; /* labels                  */
  --guestly-weight-semibold: 600; /* buttons, eyebrows       */
  --guestly-weight-bold: 700; /* all headlines           */

  /* Headlines: bold, tight. 110% line-height. */
  --guestly-leading-headline: 1.1;
  /* Body: regular, airy. 160% line-height. */
  --guestly-leading-body: 1.6;

  /* Type scale (mobile → desktop) */
  --guestly-size-hero: clamp(2.25rem, 6vw, 4rem); /* 36 → 64px  */
  --guestly-size-h2: clamp(1.75rem, 4vw, 2.375rem); /* 28 → 38px */
  --guestly-size-h3: 1.0625rem; /* 17px — card titles          */
  --guestly-size-step-title: 1.375rem; /* 22px — checkout steps */
  --guestly-size-body: 0.9375rem; /* 15px                     */
  --guestly-size-small: 0.8125rem; /* 13px — helper text      */
  --guestly-size-caption: 0.75rem; /* 12px — captions         */

  /* Eyebrow: 12px, semibold, uppercase, wide tracking */
  --guestly-eyebrow-size: 0.75rem;
  --guestly-eyebrow-tracking: 0.18em;

  /* ----------------------------------------------------------
     3. Radii
     ---------------------------------------------------------- */
  --guestly-radius-button: 8px; /* every button and input      */
  --guestly-radius-card: 12px; /* compact cards, list rows    */
  --guestly-radius-card-lg: 16px; /* feature and stat cards   */
  --guestly-radius-pill: 999px; /* badges, avatars, chips     */

  /* ----------------------------------------------------------
     4. Shadows — soft navy lift, never grey/black
     ---------------------------------------------------------- */

  /* Resting card */
  --guestly-shadow-card: 0 1px 2px rgb(43 45 66 / 0.05),
    0 14px 34px -20px rgb(43 45 66 / 0.24);

  /* Hover / selected card */
  --guestly-shadow-lift: 0 2px 6px rgb(43 45 66 / 0.06),
    0 26px 50px -26px rgb(43 45 66 / 0.3);

  /* Wide feature card on off-white (pitch page) */
  --guestly-shadow-feature: 0 18px 44px -32px rgb(43 45 66 / 0.45);

  /* Sticky bottom bar (shadow points up) */
  --guestly-shadow-bar: 0 -8px 32px -20px rgb(43 45 66 / 0.32);

  /* Pink CTA glow — rest and hover */
  --guestly-shadow-cta: 0 10px 24px -10px rgb(255 56 92 / 0.55);
  --guestly-shadow-cta-hover: 0 16px 32px -12px rgb(255 56 92 / 0.65);

  /* ----------------------------------------------------------
     5. Motion
     ---------------------------------------------------------- */
  --guestly-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --guestly-duration: 200ms;
  --guestly-hover-lift: -2px; /* translateY on hover          */

  /* ----------------------------------------------------------
     6. Layout
     ---------------------------------------------------------- */
  --guestly-container: 72rem; /* 1152px pitch sections        */
  --guestly-checkout-width: 30rem; /* 480px mobile-first flow */
  --guestly-gutter: 1.25rem; /* 20px page padding            */
  --guestly-section-y: clamp(4rem, 8vw, 6rem);
}

/* ============================================================
   Signature yellow dash
   34 x 4px, fully rounded, sits 16px under a section title.
   Pitch page only — the checkout stays dash-free.
   ============================================================ */
.guestly-dash {
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: var(--guestly-yellow);
  margin-top: 1rem;
}

/* ============================================================
   Core recipes
   ============================================================ */

.guestly-headline {
  font-family: var(--guestly-font);
  font-weight: var(--guestly-weight-bold);
  line-height: var(--guestly-leading-headline);
  color: var(--guestly-navy);
}

.guestly-body {
  font-family: var(--guestly-font);
  font-weight: var(--guestly-weight-body);
  font-size: var(--guestly-size-body);
  line-height: var(--guestly-leading-body);
  color: var(--guestly-body-grey);
}

.guestly-eyebrow {
  font-size: var(--guestly-eyebrow-size);
  font-weight: var(--guestly-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--guestly-eyebrow-tracking);
  color: var(--guestly-pink);
}

/* Primary CTA — pink, 8px, white Poppins SemiBold, soft pink shadow */
.guestly-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px; /* touch target */
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: var(--guestly-radius-button);
  background: var(--guestly-pink);
  color: var(--guestly-white);
  font-family: var(--guestly-font);
  font-weight: var(--guestly-weight-semibold);
  box-shadow: var(--guestly-shadow-cta);
  transition: transform var(--guestly-duration) var(--guestly-ease),
    box-shadow var(--guestly-duration) var(--guestly-ease);
  cursor: pointer;
}

.guestly-cta:hover {
  transform: translateY(var(--guestly-hover-lift));
  box-shadow: var(--guestly-shadow-cta-hover);
}

/* Secondary CTA — navy outline on light, white outline on navy */
.guestly-cta--ghost {
  background: transparent;
  color: var(--guestly-navy);
  border: 1px solid var(--guestly-navy-15);
  box-shadow: none;
}

/* Card */
.guestly-card {
  background: var(--guestly-white);
  border: 1px solid var(--guestly-navy-08);
  border-radius: var(--guestly-radius-card-lg);
  box-shadow: var(--guestly-shadow-card);
  padding: 1rem;
}

.guestly-card--selected {
  border-color: var(--guestly-pink);
  background: var(--guestly-pink-06);
  box-shadow: var(--guestly-shadow-lift);
}

.guestly-card--addon-selected {
  border-color: var(--guestly-teal);
  background: var(--guestly-teal-08);
}

/* Yellow save badge */
.guestly-badge-save {
  border-radius: var(--guestly-radius-pill);
  background: var(--guestly-yellow-15);
  color: var(--guestly-yellow-ink);
  font-size: var(--guestly-size-caption);
  font-weight: var(--guestly-weight-semibold);
  padding: 0.125rem 0.5rem;
}

/* Design note — navy chip with a yellow lightbulb */
.guestly-design-note {
  border-radius: var(--guestly-radius-card);
  background: var(--guestly-navy);
  color: var(--guestly-white);
  font-size: var(--guestly-size-small);
  line-height: var(--guestly-leading-body);
  padding: 0.625rem 0.875rem;
}
.guestly-design-note svg {
  color: var(--guestly-yellow);
}

/* Accessibility: respect reduced motion on every lift/reveal. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}