/* Seabright sunshine accents
   Loaded after styles.css so the coastal blue foundation remains intact. */

:root {
  --sun: #f2c94c;
  --sun-light: #fff4c2;
  --sun-deep: #d09b1a;
}

/* Keep primary actions sunny while retaining strong navy contrast. */
.button-primary {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--sun-deep);
  border-color: var(--sun-deep);
  color: var(--ink);
}

/* Small yellow touchpoints in the existing header and navigation. */
.topbar {
  background: var(--sun-light);
  border-bottom: 1px solid #f0df9f;
  color: var(--ink);
}

.nav-dropdown a:hover {
  background: var(--sun-light);
  color: var(--ink);
}

/* A gentle wash behind the hero; the coastal image and layout are unchanged. */
.hero {
  background: linear-gradient(112deg, #fffaf0 0%, var(--cream) 58%, #f8fbf8 100%);
}

.hero .eyebrow-dot,
.final-cta .eyebrow-dot {
  background: var(--sun-deep);
}

.hero-sun {
  color: var(--sun-deep);
}

/* Butter trust band, with the original blue icon language preserved. */
.trust-bar {
  background: var(--sun-light);
  border-top-color: #f0df9f;
  border-bottom-color: #f0df9f;
}

/* Selected icon discs: warm yellow surface, navy icon/text for contrast. */
.comfort-icon,
.payment-card-icon,
.contact-symbol {
  background: var(--sun);
  color: var(--ink);
}

/* Light sunshine numbers keep the journey connected to the blue system. */
.step-number,
.journey-inset .step-number {
  background: var(--sun-light);
  border-color: #e8d28a;
  color: var(--ink);
}

/* Restrained section rules add yellow without recoloring the blue sections. */
.principle,
.payment-detail-grid article {
  border-top-color: #e8d28a;
}

.lien-note {
  border-top-color: #e8d28a;
}

/* Warm final invitation band, kept pale so it does not become a large saturated block. */
.final-cta {
  background: var(--sun-light);
  border-top: 1px solid #f0df9f;
  border-bottom: 1px solid #f0df9f;
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--sun-light);
  border-color: var(--sun-deep);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .button-primary:hover,
  .button-primary:focus-visible,
  .button-secondary:hover,
  .button-secondary:focus-visible {
    transform: none;
  }
}