/* DetailerStack _core v4 — base layer for agent-authored pages.
 * Loaded by the platform shell on every marketing page, before tenant styles.
 * Load order: core.v4.css → styles/theme.css (brand vars) → styles/custom.css → page inline <style>.
 *
 * Keep this file SMALL. It owns: reset, brand CSS variables (defaults),
 * dialog/lead-form baseline, accessibility helpers. It does NOT own layout,
 * typography scale, or component styling — that is the agent's job per client.
 */

/* ---------- Reset ---------- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* v4: the reset skips anything marked [data-ds-chrome].
 *
 * The React platform chrome (lead-capture modal, member login, booking, toasts)
 * is styled with Tailwind, whose margin utilities live in `@layer utilities`.
 * An UNLAYERED rule beats an entire cascade layer regardless of specificity, so
 * a plain `* { margin: 0 }` silently flattened every `mb-*`, `mt-*`, `mx-auto`
 * and `space-y-*` in those components — labels sat directly on their inputs and
 * form rows ran together with no gap.
 *
 * The exclusion is wrapped in :where() so the selector stays at zero
 * specificity: the `dialog` rule below (and every other core rule) still
 * outranks it, exactly as it did in v3.
 */
*:where(:not([data-ds-chrome], [data-ds-chrome] *)) {
  margin: 0;
}

/* The * reset above kills the UA's margin:auto that centers native dialogs — restore it. */
dialog {
  margin: auto;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--ds-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--ds-text, #111);
  background: var(--ds-bg, #fff);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

/* ---------- Brand variables (defaults; theme.css overrides) ---------- */

:root {
  --ds-accent: #2563eb;
  --ds-accent-contrast: #ffffff;
  --ds-bg: #ffffff;
  --ds-text: #111111;
  --ds-muted: #6b7280;
  --ds-radius: 8px;
}

/* ---------- Dialog / lead modal baseline ---------- */

dialog[data-modal] {
  border: none;
  border-radius: var(--ds-radius);
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  width: 100%;
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
  /* Native dialogs default to a white canvas regardless of page theme —
   * pin them to the brand surface so dark themes don't get white-on-white. */
  background: var(--ds-bg, #fff);
  color: var(--ds-text, #111);
}

dialog[data-modal]::backdrop {
  background: rgb(0 0 0 / 0.55);
}

dialog[data-modal] [data-modal-close] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.5rem;
  color: var(--ds-muted);
}

/* ---------- Lead form states ----------
 * core.v1.js sets data-state="submitting|success|error" on the form.
 * Put success copy in [data-lead-success] and error copy in [data-lead-error];
 * both are hidden until their state is active. */

form[data-lead-form] [data-lead-success],
form[data-lead-form] [data-lead-error] {
  display: none;
}

form[data-lead-form][data-state="success"] [data-lead-success] {
  display: block;
}

form[data-lead-form][data-state="success"] [data-lead-fields] {
  display: none;
}

form[data-lead-form][data-state="error"] [data-lead-error] {
  display: block;
}

form[data-lead-form][data-state="submitting"] button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Accessibility helpers ---------- */

.ds-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Lead-form control baseline (v3) ----------
 * Native form controls ignore inherited colors (white inputs, gray buttons)
 * which breaks on themed pages — give every data-lead-form branded controls.
 * Pages/custom.css can still override. */

form[data-lead-form] input:not([type="checkbox"]):not([type="radio"]),
form[data-lead-form] textarea,
form[data-lead-form] select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ds-surface, rgb(127 127 127 / 0.08));
  color: var(--ds-text, inherit);
  border: 1px solid var(--ds-hairline, rgb(127 127 127 / 0.3));
  border-radius: var(--ds-radius);
  margin-bottom: 0.75rem;
}

form[data-lead-form] ::placeholder {
  color: var(--ds-muted, #6b7280);
  opacity: 1;
}

form[data-lead-form] input:focus-visible,
form[data-lead-form] textarea:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 0;
  border-color: var(--ds-accent);
}

form[data-lead-form] button[type="submit"] {
  padding: 0.75rem 2rem;
  background: var(--ds-accent);
  color: var(--ds-accent-contrast);
  border: none;
  border-radius: var(--ds-radius);
  font-weight: 600;
  cursor: pointer;
}

form[data-lead-form] button[type="submit"]:hover {
  filter: brightness(1.08);
}

form[data-lead-form] label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ds-muted, inherit);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

form[data-lead-form] input[type="checkbox"],
form[data-lead-form] input[type="radio"] {
  accent-color: var(--ds-accent);
  width: 1rem;
  height: 1rem;
}

/* Sensible default spacing inside modals when the page doesn't wrap content */
dialog[data-modal] > :not([class]) {
  margin: 1.5rem;
}