/* Generic surface card */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow-1);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card--clickable { cursor: pointer; }
.card--clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

.card--ink { background: var(--ink); color: var(--surface); border-color: transparent; }
.card--accent-soft { background: var(--accent-soft); border-color: transparent; }
.card--surface-2 { background: var(--surface-2); border-color: transparent; }

.card-pad-sm { padding: 10px; }
.card-pad-md { padding: 14px; }
.card-pad-lg { padding: 18px; }