.am-ui {
    --am-color-bg: #f5f7fa;
    --am-color-surface: #fff;
    --am-color-surface-subtle: #f8fafc;
    --am-color-text: #1f2933;
    --am-color-text-muted: #667085;
    --am-color-border: #dde4ea;
    --am-color-border-strong: #cbd5df;
    --am-color-primary: #2f80a7;
    --am-color-primary-soft: #eef8fb;
    --am-color-success: #247a5a;
    --am-color-success-soft: #e7f5f0;
    --am-color-warning: #946200;
    --am-color-warning-soft: #fff6df;
    --am-color-danger: #9b1c1c;
    --am-color-danger-soft: #fff7f7;
    --am-color-info: #155e75;
    --am-color-info-soft: #ecfeff;
    --am-radius-sm: 8px;
    --am-radius-lg: 12px;
    --am-shadow-focus: 0 0 0 3px rgba(47, 128, 167, .2);
    --am-space-1: 4px;
    --am-space-2: 8px;
    --am-space-3: 12px;
    --am-space-4: 16px;
    --am-space-5: 24px;
    color: var(--am-color-text);
}

.am-ui *,
.am-ui *::before,
.am-ui *::after {
    box-sizing: border-box;
}

.am-ui h1,
.am-ui h2,
.am-ui h3,
.am-ui h4,
.am-ui h5 {
    color: var(--am-color-text);
}

.am-ui button:focus-visible,
.am-ui a:focus-visible,
.am-ui input:focus-visible,
.am-ui select:focus-visible,
.am-ui textarea:focus-visible {
    outline: none;
    box-shadow: var(--am-shadow-focus);
}

.am-ui .form-control:focus {
    border-color: var(--am-color-primary);
    box-shadow: var(--am-shadow-focus);
}