:host {
  display: block;
  background: var(--bg-primary, #fff);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  transition: box-shadow var(--transition-fast, 120ms ease),
    border-color var(--transition-fast, 120ms ease);
}

:host.app-card--bordered {
  border: 1px solid var(--border-color, #e4e4e7);
}

:host.app-card--interactive {
  cursor: pointer;

  &:hover {
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  }

  &:focus-visible {
    outline: 2px solid var(--primary-color, #2f6e5d);
    outline-offset: 2px;
  }
}

:host.app-card--pad-none {
  padding: 0;
}

:host.app-card--pad-sm {
  padding: var(--space-sm, 0.5rem);
}

:host.app-card--pad-md {
  padding: var(--space-md, 1rem);
}

:host.app-card--pad-lg {
  padding: var(--space-lg, 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
  :host {
    transition: none;
  }
}
