/* ============================================================
   SHARED BUTTON CONTRACT — public site runtime
   ============================================================

   Single source of truth for every CTA button on every client site.
   The cascade is:

     1. --el-btn-*   (per-element override — user explicitly set it
                      on this element via the inspector)
     2. --site-btn-* (theme token emitted by ThemeProvider from the
                      btnPrimary*/btnSecondary*/btnOutline* tokens)
     3. --site-accent / --site-primary / --site-border
                     (legacy palette fallback so old tokens still work)

   Adding a new button-emitting renderer? Give its <a>/<button> the
   classes `site-btn site-btn--primary` (or --secondary/--outline/
   --custom). Do NOT inline background/color/border/border-radius
   via React style — emit per-element overrides as --el-btn-* vars
   on the same element. Theme tokens must win unless the user
   explicitly overrode.

   See src/ai_skills/evara-website-builder/SKILL_DESIGN.md
   "Buttons" for the token matrix. */

.site-btn {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px tap-target floor — never break WCAG 2.5.5 / Apple HIG even when
     a label is short, the size variant is "sm", or padding is overridden.
     Hardcoded so the floor cannot be lowered by an inspector mistake;
     element renderers needing a smaller hit-box (e.g. icon-only chip
     variants) ship their own component class instead of `.site-btn`. */
  min-height: 44px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--el-btn-radius, var(--site-btn-radius, var(--site-radius, 8px)));
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.15s ease,
              box-shadow 0.2s ease;
}

.site-btn:hover {
  transform: translateY(-1px);
}

/* Reduced-motion: kill the 1px hover lift so users with vestibular
   sensitivity don't see the button shift on every pointer enter. The
   global animations.css guard zeros transition-duration; this one zeros
   the destination too so the static state stays static. */
@media (prefers-reduced-motion: reduce) {
  .site-btn:hover {
    transform: none;
  }
}

.site-btn:focus-visible {
  /* Universal focus ring: every interactive element on a tenant site
     reads from the same token cascade. Override per-element via
     `--el-focus-ring-color` etc., or per-site via the design panel's
     focus-ring tokens. */
  outline: var(--site-focus-ring-width, 2px) solid
           var(--site-focus-ring-color, var(--site-accent, currentColor));
  outline-offset: var(--site-focus-ring-offset, 2px);
}

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

/* ── Primary ─────────────────────────────────────────────────── */
.site-btn--primary {
  background-color: var(--el-btn-bg, var(--site-btn-primary-bg, var(--site-primary)));
  color:            var(--el-btn-text, var(--site-btn-primary-text, var(--site-primary-fg, currentColor)));
  border-color:     var(--el-btn-border, var(--site-btn-primary-bg, var(--site-primary)));
}
.site-btn--primary:hover {
  background-color: var(--el-btn-hover-bg, var(--site-btn-primary-hover-bg, var(--site-btn-primary-bg, var(--site-primary))));
  color:            var(--el-btn-hover-text, var(--site-btn-primary-hover-text, var(--el-btn-text, var(--site-btn-primary-text, var(--site-primary-fg, currentColor)))));
  border-color:     var(--el-btn-hover-border, var(--el-btn-border, var(--site-btn-primary-hover-bg, var(--site-btn-primary-bg, var(--site-primary)))));
}

/* ── Secondary ───────────────────────────────────────────────── */
.site-btn--secondary {
  background-color: var(--el-btn-bg, var(--site-btn-secondary-bg, var(--site-secondary)));
  color:            var(--el-btn-text, var(--site-btn-secondary-text, var(--site-secondary-fg, var(--site-primary))));
  border-color:     var(--el-btn-border, var(--site-btn-secondary-bg, var(--site-secondary)));
}
.site-btn--secondary:hover {
  background-color: var(--el-btn-hover-bg, var(--site-btn-secondary-hover-bg, var(--site-btn-secondary-bg, var(--site-secondary))));
  color:            var(--el-btn-hover-text, var(--site-btn-secondary-hover-text, var(--el-btn-text, var(--site-btn-secondary-text, var(--site-secondary-fg, var(--site-primary))))));
  border-color:     var(--el-btn-hover-border, var(--el-btn-border, var(--site-btn-secondary-hover-bg, var(--site-btn-secondary-bg, var(--site-secondary)))));
}

/* ── Outline ─────────────────────────────────────────────────── */
.site-btn--outline {
  background-color: var(--el-btn-bg, transparent);
  color:            var(--el-btn-text, var(--site-btn-outline-text, var(--site-primary)));
  border-color:     var(--el-btn-border, var(--site-btn-outline-border, var(--site-primary)));
}
.site-btn--outline:hover {
  background-color: var(--el-btn-hover-bg, var(--site-btn-outline-hover-bg, var(--site-btn-outline-text, var(--site-primary))));
  color:            var(--el-btn-hover-text, var(--site-btn-outline-hover-text, var(--site-primary-fg, currentColor)));
  border-color:     var(--el-btn-hover-border, var(--el-btn-border, var(--site-btn-outline-border, var(--site-primary))));
}

/* ── Ghost / Link ────────────────────────────────────────────── */
.site-btn--ghost {
  background-color: var(--el-btn-bg, transparent);
  color:            var(--el-btn-text, var(--site-btn-outline-text, var(--site-primary)));
  border-color:     var(--el-btn-border, transparent);
}
.site-btn--ghost:hover {
  background-color: var(--el-btn-hover-bg, color-mix(in srgb, var(--site-primary, currentColor) 12%, transparent));
  color:            var(--el-btn-hover-text, var(--site-btn-outline-hover-text, var(--site-primary)));
  border-color:     var(--el-btn-hover-border, var(--el-btn-border, transparent));
}

.site-btn--link {
  display: inline;
  padding: 0;
  background-color: transparent;
  color: var(--el-btn-text, var(--site-link, var(--site-primary)));
  border: none;
  text-decoration: underline;
  border-radius: 0;
}
.site-btn--link:hover {
  color: var(--el-btn-hover-text, var(--site-link-hover, var(--site-primary)));
  transform: none;
}

/* ── Custom ───────────────────────────────────────────────────
   Used by renderers that don't know (or don't want to declare) a
   variant but still need every --el-btn-* override to flow through.
   If the renderer didn't emit any override vars, this falls back
   to the primary token set so it never renders an invisible
   transparent button. */
.site-btn--custom {
  background-color: var(--el-btn-bg, var(--site-btn-primary-bg, var(--site-primary)));
  color:            var(--el-btn-text, var(--site-btn-primary-text, var(--site-primary-fg, currentColor)));
  border-color:     var(--el-btn-border, transparent);
}
.site-btn--custom:hover {
  background-color: var(--el-btn-hover-bg, var(--site-btn-primary-hover-bg, var(--el-btn-bg, var(--site-btn-primary-bg, var(--site-primary)))));
  color:            var(--el-btn-hover-text, var(--site-btn-primary-hover-text, var(--el-btn-text, var(--site-btn-primary-text, var(--site-primary-fg, currentColor)))));
  border-color:     var(--el-btn-hover-border, var(--el-btn-border, transparent));
}