/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

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

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: inline-block;
}

:host([block]) {
  display: block;
  width: 100%;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--elvaio-space-02);
  /* Custom property, not a bare value: the header overrides this (see
     `site-header.ts`/`compositions.css`) so its CTA matches `ds-nav`'s
     pill height instead of the standalone-button default. */
  min-height: var(--ds-button-min-height, 3.25rem);
  padding-inline: var(--elvaio-space-06);
  font-family: var(--elvaio-font-body);
  font-size: var(--elvaio-font-size-body);
  font-weight: var(--elvaio-font-weight-button);
  line-height: 1.2;
  border-radius: var(--elvaio-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button.block {
  width: 100%;
}

.primary {
  background: var(--elvaio-color-button-primary-bg);
  border-color: var(--elvaio-color-button-primary-bg);
  color: var(--elvaio-color-button-primary-text);
}

.primary:hover {
  background: var(--elvaio-color-button-primary-bg-hover);
  border-color: var(--elvaio-color-button-primary-bg-hover);
}

.secondary {
  background: var(--elvaio-color-card);
  border-color: var(--elvaio-color-button-primary-bg);
  color: var(--elvaio-color-text);
}

.secondary:hover {
  background: var(--elvaio-color-accent-soft);
}

.outline {
  background: transparent;
  border-color: var(--elvaio-color-text);
  color: var(--elvaio-color-text);
}

.outline:hover {
  background: var(--elvaio-color-text);
  color: var(--elvaio-color-card);
}

.light {
  background: var(--elvaio-color-card);
  border-color: var(--elvaio-color-card);
  color: var(--elvaio-color-text);
}

.light:hover {
  background: var(--elvaio-color-accent-soft);
  border-color: var(--elvaio-color-accent-soft);
}

.ghost-inverse {
  background: transparent;
  border-color: var(--elvaio-color-text-inverse);
  color: var(--elvaio-color-text-inverse);
}

.ghost-inverse:hover {
  background: var(--elvaio-color-text-inverse);
  color: var(--elvaio-color-band-inverse);
}

.text {
  min-height: 2.75rem;
  padding-inline: 0;
  border: 0;
  border-radius: var(--elvaio-radius-field);
  background: none;
  color: var(--elvaio-color-text);
  text-decoration: underline;
  text-decoration-color: var(--elvaio-color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.375rem;
}

.text:hover {
  color: var(--elvaio-color-accent-text);
}

.button[disabled],
.button[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 1.4s;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}