/**
 * Card styles
 * @countermeasure/web-components/display/card
 */

/* ============================================================================
   CARD BASE
   ============================================================================ */
.cmm-card {
  background-color: var(--color-surface, hsl(var(--card)));
  color: var(--color-text, hsl(var(--card-foreground)));
  border: 1px solid var(--color-border, hsl(var(--border)));
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(
    --shadow-card,
    0 1px 3px rgb(0 0 0 / 0.3),
    0 1px 2px rgb(0 0 0 / 0.2)
  );
  overflow: hidden;
}

/* ============================================================================
   CARD SECTIONS
   ============================================================================ */
.cmm-card__header {
  padding: 0.875rem 0.875rem 0;
  border-bottom: 0;
  color: var(--color-text, hsl(var(--foreground)));
  font: 600 0.8125rem/1.3 var(--font-sans);
}

.cmm-card__body {
  padding: 0.25rem 0.875rem 0.875rem;
  color: var(--color-text-muted, hsl(var(--muted-foreground)));
  font: 400 0.75rem/1.5 var(--font-sans);
}

.cmm-card__footer {
  padding: 0.875rem;
  border-top: 1px solid var(--color-border, hsl(var(--border)));
  background-color: var(--color-surface-alt, hsl(var(--muted) / 0.3));
}

/* ============================================================================
   CARD MODIFIERS
   ============================================================================ */
.cmm-card--hoverable {
  transition:
    box-shadow var(--transition-normal),
    transform var(--transition-normal);
}

.cmm-card--hoverable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cmm-card--no-border {
  border: none;
}

.cmm-card--no-padding .cmm-card__body {
  padding: 0;
}

.cmm-card--clickable {
  cursor: pointer;
}

.cmm-card--clickable:focus-visible {
  outline: 2px solid var(--color-primary, hsl(var(--focus-ring)));
  outline-offset: 2px;
}

/* ============================================================================
   FLOW CARD
   ============================================================================ */
.cmm-flow-card,
.flow-card,
.cmm-card--flow {
  --cmm-flow-card-accent: var(--color-orange-400, #fb923c);

  position: relative;
  overflow: hidden;
  padding: 0.875rem 0.875rem 0.875rem 1.125rem;
  color: var(--color-text, hsl(var(--foreground)));
  background: var(--color-surface, hsl(var(--card)));
  border: 1px solid var(--color-border, hsl(var(--border)));
  border-radius: var(--radius-lg, 0.75rem);
}

.cmm-flow-card::before,
.flow-card::before,
.cmm-card--flow::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--cmm-flow-card-accent);
}

.cmm-flow-card__eyebrow {
  color: var(--color-text-dim, hsl(var(--muted-foreground)));
  font: var(--type-code-sm, 500 0.65625rem/1.4 var(--font-mono, monospace));
}

.cmm-flow-card__title {
  margin-top: 0.25rem;
  color: var(--color-text, hsl(var(--foreground)));
  font: 700 0.875rem/1.3 var(--font-display, var(--font-sans, sans-serif));
}

.cmm-flow-card--blue {
  --cmm-flow-card-accent: var(--color-blue-400, #60a5fa);
}

.cmm-flow-card--violet {
  --cmm-flow-card-accent: var(--color-violet-400, #a78bfa);
}

.cmm-flow-card--amber {
  --cmm-flow-card-accent: var(--color-amber-400, #fbbf24);
}

.cmm-flow-card--emerald {
  --cmm-flow-card-accent: var(--color-emerald-400, #34d399);
}

.cmm-flow-card--orange {
  --cmm-flow-card-accent: var(--color-orange-400, #fb923c);
}

.cmm-flow-card--rose {
  --cmm-flow-card-accent: var(--color-rose-400, #fb7185);
}

.cmm-flow-card--cyan {
  --cmm-flow-card-accent: var(--color-cyan-400, #22d3ee);
}
