:root {
  // Base card properties
  --card-padding: 1.5rem;
  --card-bg: var(--color-surface);
  --card-radius: calc(var(--card-padding) / 4);
  --card-gap: 1rem;

  // Element-specific variables (NEW - for complex card layouts)
  --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);

  h3,
  h2 {
    margin-block-end: 0;
    padding-block-end: 0;
  }
  + div {
    margin-block-start: 0;
  }
  > article {
    display: flex;
    flex-direction: column;
    flex: 2;
  }

  > *:not(img) {
    padding-inline: var(--card-padding);
  }
  > *:last-child:not(img) {
    padding-block-end: var(--card-padding);
  }
  > *:first-child:not(img) {
    // Reduced top padding to account for heading's inherent spacing
    // Prevents excessive whitespace above titles
    padding-block-start: calc(var(--card-padding) - 0.5rem);
  }

  // Element-specific styling (using new scoped variables)
  > header,
  > [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-body] {
    padding: var(--card-body-padding);
    flex: 1;
  }

  > footer,
  > [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);
  }
}

// Interactive card styles - WCAG 2.4.7 compliant focus indicators
[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);

  &:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--card-hover-shadow);
  }

  // Visible focus indicator with 3:1 minimum contrast (WCAG 2.4.7)
  &:focus-visible {
    outline: 0.125rem solid var(--color-focus);
    outline-offset: 0.125rem;
  }

  // Hide outline for mouse users (modern browsers)
  &:focus:not(:focus-visible) {
    outline: none;
  }
}