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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--text);
    background: var(--background);
    font-weight: 400;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

::selection {
    background: var(--primary);
    color: var(--white);
}

.text-primary {
    color: var(--primary) !important;
}

.bg-soft {
    background: var(--background-soft);
}

.container-fluid {
    width: 100%;
}

.btn {
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
}

.brand-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-gradient-bg {
    background: var(--brand-gradient);
}

.card {
    border-color: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

.form-control,
.form-select {
    border-color: var(--border);
    border-radius: var(--radius-md);
    min-height: 44px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(63, 111, 255, 0.12);
}

.page-width {
    width: min(100%, var(--content-width));
    margin-inline: auto;
}