:root {
    --bs-primary: var(--traxe-primary);
    --bs-success: var(--traxe-success);
    --bs-body-color: var(--traxe-text);
    --bs-body-bg: var(--traxe-bg-subtle);
    --bs-border-color: var(--traxe-border);
    --bs-border-radius: var(--traxe-radius-sm);
    --bs-border-radius-lg: var(--traxe-radius);
    --bs-focus-ring-color: var(--traxe-focus-ring);
    --bs-link-color: var(--traxe-primary);
    --bs-link-hover-color: var(--traxe-success);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--traxe-text);
}

.btn {
    min-height: var(--traxe-control-height);
    border-radius: 999px;
    font-weight: 600;
}

.btn-sm {
    min-height: 2rem;
}

.btn-success {
    background-color: var(--traxe-success);
    border-color: var(--traxe-success);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #2fb95f;
    border-color: #2fb95f;
}

.btn-outline-primary {
    color: var(--traxe-success);
    border-color: rgba(54, 200, 109, 0.45);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background-color: rgba(54, 200, 109, 0.14);
    border-color: var(--traxe-success);
    color: var(--traxe-white);
}

.btn-outline-secondary {
    color: var(--traxe-text);
    border-color: var(--traxe-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary.active {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--traxe-border-strong);
    color: var(--traxe-white);
}

.form-control,
.form-select {
    min-height: var(--traxe-control-height);
    background-color: rgba(18, 35, 56, 0.96);
    border-color: var(--traxe-border);
    color: var(--traxe-text);
}

.form-control::placeholder {
    color: var(--traxe-text-3);
}

.form-control:disabled,
.form-select:disabled {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--traxe-text-3);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(18, 35, 56, 0.96);
    color: var(--traxe-text);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--traxe-success);
    box-shadow: 0 0 0 0.2rem rgba(31, 143, 78, 0.15);
}

.form-check-input {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--traxe-border);
}

.form-check-input:checked {
    background-color: var(--traxe-success);
    border-color: var(--traxe-success);
}

.table {
    color: var(--traxe-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--traxe-border);
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.modal-content {
    border: 1px solid var(--traxe-border);
    border-radius: var(--traxe-radius-lg);
    box-shadow: var(--traxe-shadow);
    background: var(--traxe-surface);
    color: var(--traxe-text);
}

.modal-header,
.modal-footer {
    border-color: var(--traxe-border);
}

.dropdown-menu {
    border-color: var(--traxe-border);
    box-shadow: var(--traxe-shadow);
    background: var(--traxe-surface);
    color: var(--traxe-text);
}

.alert-danger,
.alert-success,
.alert-warning,
.alert-info {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--traxe-border);
    color: var(--traxe-text);
}

:focus-visible {
    outline: 3px solid var(--traxe-focus-ring);
    outline-offset: 2px;
}