/* DragonFly (DFACS) onboarding funnel — shared brand styles.
   Tailwind + Alpine come from CDNs; this file holds only what is
   awkward to express inline. Keep it lean. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Hide Alpine-controlled elements until Alpine initializes (prevents a
   flash of conditionally-shown content before x-show evaluates). */
[x-cloak] {
  display: none !important;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Headlines are heavy/bold to match dragonflydoors.com. */
h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Accent CTA button — neon lime with a darker hover and an
   accessible focus ring. Used on both dark and light themes. */
.btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #B0F058;
  color: #0A0F0A;
  font-weight: 700;
  border-radius: 0.625rem;
  padding: 0.75rem 1.5rem;
  line-height: 1.2;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.btn-accent:hover {
  background-color: #9CD93F;
}

.btn-accent:active {
  transform: translateY(1px);
}

/* Two-tone offset focus ring that stays visible on BOTH the dark
   (#0A0F0A) and light (#F8F8F7) themes. A white gap separates the ring
   from the lime fill, then a layered white-inner / dark-outer ring so at
   least one band always contrasts whichever background is behind it. */
.btn-accent:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #FFFFFF,
    0 0 0 5px #0A0F0A,
    0 0 0 7px #FFFFFF;
}

/* Logo chip — keeps the light-on-dark wordmark legible on any
   header background. */
.logo-chip {
  display: inline-flex;
  align-items: center;
  background-color: #0A0F0A;
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
}