# Card: Стилизация

## Обзор

Стилизация `Card` сосредоточена в одной сгруппированной поверхности: рамка зависит от оформления, внутренние отступы — от размера.

## Публичные CSS-переменные

| Переменная | Где используется | Назначение |
| --- | --- | --- |
| `--card-border-color` | `Card` | Цвет рамки. |
| `--card-background-color` | `Card` | Фон поверхности. |

## Переменные уровня частей

- `Card`: владеет всей поверхностью, внутренними отступами и скруглением.

## Взаимодействие состояний и вариантов

- `size` меняет внутренние отступы и скругление.
- `appearance='outline'` показывает рамку.
- `appearance='transparent'` убирает акцент рамки на уровне карточки.

## Примеры

```css
.brandCard {
  --card-border-color: var(--border-color);
}

.linkCard:hover {
  --card-background-color: var(--fills-tertiary);
}
```

```css
.softCard {
  --card-background-color: var(--surface-primary);
}
```

## Не переопределяйте

- Не полагайтесь на прозрачные карточки там, где фон родителя визуально шумный.
- Не используйте стилизацию карточки вместо семантической структуры заголовков.
- Не ожидайте, что поверхность автоматически решит вопрос внутренних отступов.