/*
 * CN-01 Card / glass panel — app/components/ui/card_component.rb
 *
 * `.surface-glass`/`.surface-inset` (base.css) supply the glass/inset fill,
 * blur, border and shadow — this file only adds padding, variant surfaces
 * that base.css doesn't define (solid/accent/warning/danger), and the
 * selectable interaction states.
 */

.ui-card {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--color-ink);
  padding: var(--space-6);
}

@media (max-width: 767px) {
  .ui-card {
    padding: var(--space-4);
  }
}

.ui-card--no-padding {
  padding: 0;
}

.ui-card--flush {
  padding: 0;
}

.ui-card--inset {
  border-radius: var(--radius-md);
}

.ui-card--solid {
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.ui-card--accent,
.ui-card--warning,
.ui-card--danger {
  border-radius: var(--radius-lg);
  border-width: 1px;
  border-style: solid;
}

/* Ink pairing matches the CN-04 confirmation-dialog icon-frame's tint
   vocabulary (dialog.css) for the same tones — keeping -50 background
   (already the established value here) with --color-accent-pressed ink. */
.ui-card--accent {
  background: var(--color-accent-50);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-pressed);
}

.ui-card--warning {
  background: var(--color-warning-subtle);
  border-color: var(--color-warning);
  color: var(--color-warning-ink);
}

.ui-card--danger {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger);
  color: var(--color-danger-ink);
}

.ui-card--selectable {
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.ui-card--selectable:hover {
  box-shadow: var(--shadow-sm);
}

.ui-card--selectable.ui-card--selected {
  border: var(--border-selected);
}

button.ui-card {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

button.ui-card--selectable {
  border: 1px solid var(--color-border-glass);
}

button.ui-card--selectable.ui-card--selected {
  border: var(--border-selected);
}