/* ================================================================
   BP-DS — Cards
   Load order: 5 of 10.
   Consume palette variables (--bp-c-*) so palette classes theme them.
   ================================================================ */

/* Base card — uses active palette background + text */
.bp-card {
  background: var(--bp-c-bg, var(--bp-bg-light));
  color: var(--bp-c-text, inherit);
  padding: var(--bp-space-md);
  border-radius: var(--bp-radius-md);
}
.bp-card > *:first-child { margin-top: 0; }
.bp-card > *:last-child  { margin-bottom: 0; }

/* Size modifiers */
.bp-card--lg { padding: var(--bp-space-lg); border-radius: var(--bp-radius-lg); }

/* Shadow variants — preserve palette background (v2.0.0 contrast fix).
   Previously hardcoded white; that clobbered .bp-palette-crimson / --midnight /
   --navy backgrounds and produced dark-text-on-white or light-text-on-white
   contrast failures depending on which partial won. Now shadow variants add
   only the shadow; background + text colour remain controlled by the active
   palette (or the default .bp-card fallback). */
.bp-card--shadow    {
  background: var(--bp-c-bg, #fff);
  color: var(--bp-c-text, inherit);
  box-shadow: var(--bp-shadow-md);
}
.bp-card--shadow-lg {
  background: var(--bp-c-bg, #fff);
  color: var(--bp-c-text, inherit);
  box-shadow: var(--bp-shadow-lg);
}
/* When a dark palette is active, strong headings stay white for contrast */
.bp-card--shadow :where(h1, h2, h3, h4, h5),
.bp-card--shadow-lg :where(h1, h2, h3, h4, h5) {
  color: var(--bp-c-text-strong, inherit);
}

/* Dark variants — use when palette forces dark background */
.bp-card--dark {
  background: var(--bp-bg-dark-card);
  color: var(--bp-text-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bp-card--dark :where(h2, h3, h4, h5) { color: #fff; }
.bp-card--dark :where(p) { color: var(--bp-text-light); }

/* Gradient variants — use palette gradient vars */
.bp-card--gradient       { background: linear-gradient(135deg, var(--bp-c-gradient-from) 0%, var(--bp-c-gradient-to) 100%); }
.bp-card--gradient-cool  { background: linear-gradient(135deg, #f8f9fa 0%, #eceff1 100%); }
.bp-card--gradient-warm  { background: linear-gradient(135deg, var(--bp-coral-soft) 0%, var(--bp-blush) 50%, var(--bp-ivory) 100%); }
.bp-card--gradient-teal  { background: linear-gradient(135deg, var(--bp-teal-soft) 0%, var(--bp-bg-light) 100%); }
.bp-card--gradient-dark  {
  background: linear-gradient(135deg, #1a1a1a 0%, var(--bp-navy) 100%);
  color: var(--bp-text-light);
}
.bp-card--gradient-dark :where(h2, h3, h4) { color: #fff; }

/* Accent bar variants — use palette accent colour */
.bp-card--accent-left    { border-left: 4px solid var(--bp-c-accent, var(--bp-teal)); }
.bp-card--accent-top     { border-top: 4px solid var(--bp-c-accent, var(--bp-teal)); }
.bp-card--accent-bottom  { border-bottom: 4px solid var(--bp-c-accent, var(--bp-teal)); }
.bp-card--bordered       { border: 1px solid var(--bp-c-border, var(--bp-border-light)); }

/* Legacy colour modifiers — retained for backward compatibility,
   though .bp-palette-* is the preferred path */
.bp-card--coral   { border-top: 4px solid var(--bp-coral); }
.bp-card--blue    { border-top: 4px solid var(--bp-blue); }
.bp-card--green   { border-top: 4px solid var(--bp-green); }
.bp-card--amber   { border-top: 4px solid var(--bp-amber); }
.bp-card--purple  { border-top: 4px solid var(--bp-purple); }