/*
 * 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: block;
  /* Lets a grid parent's default `align-items: stretch` actually reach
     the visible card: a block host's own box can be stretched taller by
     an outer grid, but its shadow child doesn't inherit that for free
     (no flex/grid relationship binds them) — `height:100%` on both ends
     threads it through, which is what makes equal-height card rows with
     a `margin-top: auto` footer (e.g. status-scale's "Voorbeeld" line)
     actually land on a shared bottom edge instead of each card's own. */
  height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--elvaio-space-04);
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--elvaio-radius-card);
  border: 1px solid transparent;
}

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

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

.card.inverse {
  background: var(--elvaio-color-band-inverse);
  color: var(--elvaio-color-text-inverse);
  /* Safe as a blanket reassignment: nothing with its own independent
     (light) background reads `--elvaio-color-accent-text` internally.
     `--elvaio-color-text-muted` is NOT overridden the same way here — see
     `packages/tokens/global.css`'s `[data-surface="inverse"] .eyebrow`
     rule, which handles that one instead, for why. */
  --elvaio-color-accent-text: var(--elvaio-color-accent-text-on-inverse);
  --elvaio-color-accent-text-large: var(--elvaio-color-accent-text-on-inverse);
  /* A nested `ds-seal` (Aanpak's ISO band) picks this up the same way:
     ring fill becomes ink (blending into the dark card so only its gold
     stroke reads), stroke becomes gold, text becomes on-dark. */
  --elvaio-color-seal-ring: var(--elvaio-color-text);
  --elvaio-color-seal-ring-stroke: var(--elvaio-color-accent);
  --elvaio-color-seal-text: var(--elvaio-color-text-inverse);
}

.outlined {
  border-color: var(--elvaio-color-border-decorative);
}

/* `.card.dashed`, not just `.dashed`: `.card.card` (surface="card" is the
   default, so the host carries both the base `.card` class and a
   same-named surface class) has two-class specificity and would
   otherwise win over a single-class `.dashed`, silently keeping the
   opaque card background under the dashed border. */
.card.dashed {
  background: transparent;
  border: 1.5px dashed var(--elvaio-color-border-control);
}

/* `bold`: a stronger 2px border than `.outlined`, but the plain card
   background (not `.featured`'s tinted one) — e.g. the situatie "je koopt
   / je verkoopt" cards, one notch more emphasis than the plain cards
   beside them without implying "recommended" the way `.featured` does. */
.bold {
  border-color: var(--elvaio-color-text);
  border-width: 2px;
}

.featured {
  background: var(--elvaio-color-accent-soft);
  border-color: var(--elvaio-color-text);
  border-width: 2px;
}