:root,
[data-bs-theme="dark"] {
    --glass-blur: 12px;
    --glass-border-strong: rgba(255,255,255,0.24);
}

[data-bs-theme="light"] {
    --glass-bg: rgba(255,255,255,0.55);
    --glass-bg-strong: rgba(255,255,255,0.75);
    --glass-border: rgba(15,23,42,0.08);
    --glass-border-strong: rgba(15,23,42,0.16);
    --glass-blur: 12px;
}

body {
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vw 40vw at 15% 0%, color-mix(in srgb, var(--bg-glow-1) 14%, transparent), transparent 70%),
        radial-gradient(50vw 35vw at 90% 30%, color-mix(in srgb, var(--bg-glow-2) 10%, transparent), transparent 70%);
}

.navbar,
.card,
.list-group-item {
    background-color: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar,
    .card,
    .list-group-item {
        background-color: var(--glass-bg-strong);
    }
}

.navbar {
    border-width: 0 0 1px;
}

.navbar .nav-link {
    transition: color var(--transition);
}

#langToggle {
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    color: var(--text);
}

#langToggle:hover {
    border-color: var(--glass-border-strong);
}

.card {
    --bs-card-bg: transparent;
    --bs-card-color: var(--text);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--glass-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: border-color var(--transition);
}

.card:hover {
    border-color: var(--glass-border-strong);
}

.card .small,
.list-group-item .small {
    color: var(--text-muted);
}

.list-group {
    gap: 8px;
}

.list-group-item,
.list-group-item + .list-group-item {
    border-top-width: 1px;
    border-radius: var(--radius-md);
    color: var(--text);
}

.badge.text-bg-light {
    background-color: transparent !important;
    color: var(--text) !important;
    border-color: var(--glass-border-strong) !important;
    border-radius: var(--radius-pill);
    font-weight: var(--weight-regular);
    padding: .4em .75em;
}

section .section-header-subtitle {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--accent);
    font-weight: var(--weight-medium);
    font-size: .75rem;
    padding: 4px 14px;
}

.btn-accent,
.btn-light {
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    box-shadow: none;
    transition: background-color var(--transition), border-color var(--transition);
}

.btn-light {
    --bs-btn-bg: transparent;
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--glass-border-strong);
    --bs-btn-hover-bg: var(--glass-bg);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--glass-border-strong);
    --bs-btn-active-bg: var(--glass-bg-strong);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-border-color: var(--glass-border-strong);
}

.form-control {
    background-color: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    color: var(--text);
}

.form-control:focus {
    background-color: var(--glass-bg-strong);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--text);
}

.timeline {
    border-left-color: var(--glass-border-strong);
}

.timeline .timeline-item:after {
    background-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .btn-accent,
    .btn-light,
    .navbar .nav-link {
        transition: none;
    }
}