:root {
  --ty-card-radius: var(--ty-border-radius);
  --ty-card-bg: var(--ty-color-bg-container);
  --ty-card-bg-filled: var(--ty-color-fill);
  --ty-card-border: var(--ty-color-border-secondary);
  --ty-card-shadow: var(--ty-shadow-card);
  --ty-card-shadow-hover: var(--ty-shadow-card);
  --ty-card-header-padding: var(--ty-spacing-5);
  --ty-card-body-padding: var(--ty-spacing-5);
  --ty-card-footer-padding: var(--ty-spacing-5);
  --ty-card-header-color: var(--ty-color-text-heading);
  --ty-card-header-font-size: var(--ty-font-size-base);
  --ty-card-header-font-weight: var(--ty-font-weight-medium);
}

[data-tiny-theme='dark'] {
  --ty-card-radius: var(--ty-border-radius);
  --ty-card-bg: var(--ty-color-bg-container);
  --ty-card-bg-filled: var(--ty-color-fill);
  --ty-card-border: var(--ty-color-border-secondary);
  --ty-card-shadow: var(--ty-shadow-card);
  --ty-card-shadow-hover: var(--ty-shadow-card);
  --ty-card-header-padding: var(--ty-spacing-5);
  --ty-card-body-padding: var(--ty-spacing-5);
  --ty-card-footer-padding: var(--ty-spacing-5);
  --ty-card-header-color: var(--ty-color-text-heading);
  --ty-card-header-font-size: var(--ty-font-size-base);
  --ty-card-header-font-weight: var(--ty-font-weight-medium);
}

@media (prefers-color-scheme: dark) {
  [data-tiny-theme='system'] {
  --ty-card-radius: var(--ty-border-radius);
  --ty-card-bg: var(--ty-color-bg-container);
  --ty-card-bg-filled: var(--ty-color-fill);
  --ty-card-border: var(--ty-color-border-secondary);
  --ty-card-shadow: var(--ty-shadow-card);
  --ty-card-shadow-hover: var(--ty-shadow-card);
  --ty-card-header-padding: var(--ty-spacing-5);
  --ty-card-body-padding: var(--ty-spacing-5);
  --ty-card-footer-padding: var(--ty-spacing-5);
  --ty-card-header-color: var(--ty-color-text-heading);
  --ty-card-header-font-size: var(--ty-font-size-base);
  --ty-card-header-font-weight: var(--ty-font-weight-medium);
}
}