.surface {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
}

.default {
  background: var(--color-surface);
  color: var(--color-text);
}

.muted {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.accent {
  border-color: var(--color-accent-strong);
  background: var(--color-accent);
  color: var(--color-ink);
}

.inverse {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-canvas);
}

.none {
  padding: 0;
}

.small {
  padding: var(--space-3);
}

.medium {
  padding: var(--space-5);
}

.large {
  padding: var(--space-8);
}