/*
 * 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-flex;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--elvaio-space-02);
  height: 1.875rem;
  padding: 0 var(--elvaio-space-03) 0 var(--elvaio-space-02);
  font-family: var(--elvaio-font-body);
  font-size: var(--elvaio-font-size-caption);
  font-weight: var(--elvaio-font-weight-button);
  line-height: 1;
  border-radius: var(--elvaio-radius-pill);
  border: 1.5px solid currentColor;
  white-space: nowrap;
  flex: none;
}

.badge.large {
  height: 2.5rem;
  padding: 0 var(--elvaio-space-05) 0 var(--elvaio-space-04);
  font-size: var(--elvaio-font-size-body);
}

.glyph {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
}

.badge.large .glyph {
  width: 1.125rem;
  height: 1.125rem;
}

.danger {
  background: var(--elvaio-color-tone-danger);
  border-color: var(--elvaio-color-tone-danger);
  color: var(--elvaio-color-text-inverse);
}

.warning {
  background: var(--elvaio-color-tone-warning-tint);
  color: var(--elvaio-color-tone-warning);
}

.info {
  background: var(--elvaio-color-card);
  color: var(--elvaio-color-tone-info);
}

.success {
  background: var(--elvaio-color-tone-success-tint);
  border-color: transparent;
  color: var(--elvaio-color-tone-success);
}

.neutral {
  background: var(--elvaio-color-band);
  border-color: var(--elvaio-color-border-decorative);
  color: var(--elvaio-color-text-muted);
}