:root {
    --zoft-primary: #5a34a1;
    --zoft-primary-2: #7b57cb;
    --zoft-primary-3: #9a84d9;
    --zoft-primary-hover: #8b6fda;
    --zoft-ink: #1f2233;
    --zoft-muted: #6d7390;
    --zoft-surface: #ffffff;
    --zoft-surface-soft: #f4f6ff;
    --zoft-bg: #f7f8fd;
    --zoft-border: #e6e6f4;
    --zoft-shadow: 0 18px 38px rgba(39, 23, 83, 0.08);
    --zoft-radius: 14px;
    --zoft-focus-ring: 0 0 0 0.2rem rgba(90, 52, 161, 0.15);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --zoft-primary: #6f8fe6;
    --zoft-primary-2: #4f74d3;
    --zoft-primary-3: #9db4ef;
    --zoft-primary-hover: #88a4ed;
    --zoft-ink: #e8eeff;
    --zoft-muted: #a8b6d4;
    --zoft-surface: #1a2234;
    --zoft-surface-soft: #121b2f;
    --zoft-bg: #0f1422;
    --zoft-border: rgba(149, 172, 226, 0.24);
    --zoft-shadow: 0 22px 44px rgba(5, 10, 20, 0.42);
    --zoft-focus-ring: 0 0 0 0.2rem rgba(127, 158, 230, 0.28);
}

html,
body {
    color: var(--zoft-ink);
}

body {
    font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: linear-gradient(180deg, var(--zoft-bg) 0%, #fbfbff 100%);
}

html[data-theme="dark"] body {
    background: radial-gradient(circle at top left, #1b2439 0%, #131a2b 48%, #101728 100%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--zoft-ink);
    font-weight: 700;
}

.card {
    border-radius: var(--zoft-radius);
    border: 1px solid var(--zoft-border);
    box-shadow: var(--zoft-shadow);
}

.btn {
    border-radius: 10px;
}

.btn-primary {
    border: none;
    background: linear-gradient(125deg, var(--zoft-primary) 0%, var(--zoft-primary-2) 100%);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border: none;
    background: linear-gradient(125deg, var(--zoft-primary-2) 0%, var(--zoft-primary-hover) 100%);
}

.btn-outline-primary {
    color: var(--zoft-primary);
    border-color: var(--zoft-primary-3);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(125deg, var(--zoft-primary) 0%, var(--zoft-primary-2) 100%);
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: #d8d9eb;
    background: var(--zoft-surface);
    color: var(--zoft-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--zoft-primary-3);
    box-shadow: var(--zoft-focus-ring);
}

html[data-theme="dark"] .form-select:hover {
    border-color: rgba(149, 172, 226, 0.5);
    background-color: #15213a;
}

html[data-theme="dark"] .form-select option,
html[data-theme="dark"] select option {
    background: #11182a;
    color: #eaf0ff;
}

html[data-theme="dark"] .form-select option:checked,
html[data-theme="dark"] .form-select[multiple] option:checked,
html[data-theme="dark"] select option:checked {
    background: linear-gradient(#4f74d3, #4f74d3);
    color: #ffffff;
}

html[data-theme="dark"] .form-select option:hover,
html[data-theme="dark"] .form-select[multiple] option:hover,
html[data-theme="dark"] select option:hover {
    background: #213356;
    color: #f3f7ff;
}

html[data-theme="dark"] .dropdown-menu {
    background: #1a2234;
    border-color: rgba(149, 172, 226, 0.26);
    box-shadow: 0 16px 34px rgba(5, 10, 20, 0.36);
}

html[data-theme="dark"] .dropdown-item {
    color: #e7efff;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    color: #ffffff;
    background: rgba(111, 143, 230, 0.2);
}

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

.modal-content {
    background: var(--zoft-surface);
    color: var(--zoft-ink);
    border-color: var(--zoft-border);
}