:root {
  --card-padding: 1.5rem;
  --card-bg: var(--color-surface);
  --card-radius: calc(var(--card-padding) / 4);
  --card-gap: 1rem;
  --card-header-padding: 1rem 1.5rem;
  --card-header-bg: var(--color-surface-secondary);
  --card-header-border-bottom-width: 0.0625rem;
  --card-header-border-bottom-style: solid;
  --card-header-border-bottom-color: var(--color-border);
  --card-body-padding: 1.5rem;
  --card-footer-padding: 1rem 1.5rem;
  --card-footer-bg: var(--color-surface-secondary);
  --card-footer-border-top-width: 0.0625rem;
  --card-footer-border-top-style: solid;
  --card-footer-border-top-color: var(--color-border);
}

[data-card],
[data-component~=card] {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  border-radius: var(--card-radius);
  border: var(--card-border, 0.0625rem solid var(--color-border-subtle));
  background-color: var(--card-bg);
  text-align: var(--card-align, left);
}
[data-card] h3,
[data-card] h2,
[data-component~=card] h3,
[data-component~=card] h2 {
  margin-block-end: 0;
  padding-block-end: 0;
}
[data-card] + div,
[data-component~=card] + div {
  margin-block-start: 0;
}
[data-card] > article,
[data-component~=card] > article {
  display: flex;
  flex-direction: column;
  flex: 2;
}
[data-card] > *:not(img),
[data-component~=card] > *:not(img) {
  padding-inline: var(--card-padding);
}
[data-card] > *:last-child:not(img),
[data-component~=card] > *:last-child:not(img) {
  padding-block-end: var(--card-padding);
}
[data-card] > *:first-child:not(img),
[data-component~=card] > *:first-child:not(img) {
  padding-block-start: calc(var(--card-padding) - 0.5rem);
}
[data-card] > header,
[data-card] > [data-card-header],
[data-component~=card] > header,
[data-component~=card] > [data-card-header] {
  padding: var(--card-header-padding);
  background-color: var(--card-header-bg);
  border-bottom: var(--card-header-border-bottom-width) var(--card-header-border-bottom-style) var(--card-header-border-bottom-color);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
[data-card] > [data-card-body],
[data-component~=card] > [data-card-body] {
  padding: var(--card-body-padding);
  flex: 1;
}
[data-card] > footer,
[data-card] > [data-card-footer],
[data-component~=card] > footer,
[data-component~=card] > [data-card-footer] {
  padding: var(--card-footer-padding);
  background-color: var(--card-footer-bg);
  border-top: var(--card-footer-border-top-width) var(--card-footer-border-top-style) var(--card-footer-border-top-color);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

[data-card=interactive] {
  --card-transition-duration: 0.2s;
  --card-transition-timing: ease;
  --card-hover-lift: -0.125rem;
  --card-hover-shadow: 0 0.25rem 0.75rem rgba(var(--color-ui-overlay-base), 0.15);
  cursor: pointer;
  transition: box-shadow var(--card-transition-duration) var(--card-transition-timing), transform var(--card-transition-duration) var(--card-transition-timing);
}
[data-card=interactive]:hover {
  transform: translateY(var(--card-hover-lift));
  box-shadow: var(--card-hover-shadow);
}
[data-card=interactive]:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
[data-card=interactive]:focus:not(:focus-visible) {
  outline: none;
}

/*# sourceMappingURL=card.css.map */