:root {
    /* Brand palette */
    --brand-purple-50: #f5f2ff;
    --brand-purple-100: #ece5ff;
    --brand-purple-300: #a78bfa;
    --brand-purple-400: #8b5cf6;
    --brand-purple-500: #7c3aed;
    --brand-purple-600: #6d28d9;
    --brand-purple-700: #5b21b6;
    --brand-purple-900: #2e1065;

    --brand-orange: #ff710d;
    --brand-orange-hover: #e6650b;
    --brand-orange-active: #cc580a;

    --brand-gradient: linear-gradient(135deg, var(--brand-purple-600) 0%, var(--brand-purple-400) 60%, #a78bfa 100%);
    --brand-gradient-dark: linear-gradient(160deg, #1e0f45 0%, var(--brand-purple-900) 55%, var(--brand-purple-700) 100%);

    --brand-text-on-dark: #f5f3ff;
    --brand-muted-on-dark: rgba(245, 243, 255, 0.72);

    --brand-radius-sm: 0.5rem;
    --brand-radius-md: 1rem;
    --brand-radius-lg: 1.5rem;
    --brand-radius-pill: 999px;

    --brand-shadow-sm: 0 2px 8px rgba(76, 29, 149, 0.08);
    --brand-shadow-md: 0 8px 24px rgba(76, 29, 149, 0.12);
    --brand-shadow-lg: 0 16px 40px rgba(76, 29, 149, 0.18);

    --bs-primary: var(--brand-purple-500);
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: var(--brand-purple-600);
    --bs-link-color-rgb: 109, 40, 217;
    --bs-link-hover-color: var(--brand-purple-700);
    --bs-border-radius: var(--brand-radius-sm);
    --bs-border-radius-lg: var(--brand-radius-md);
    --bs-body-font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}

a {
    text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) a {
    color: #0070c0;
}

:is(h1, h2, h3, h4, h5, h6) a:hover,
:is(h1, h2, h3, h4, h5, h6) a:focus {
    color: var(--brand-orange);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-orange);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-orange-hover);
    --bs-btn-hover-border-color: var(--brand-orange-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-orange-active);
    --bs-btn-active-border-color: var(--brand-orange-active);
    --bs-btn-focus-shadow-rgb: 255, 113, 13;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-purple-500);
    --bs-btn-border-color: var(--brand-purple-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-purple-500);
    --bs-btn-hover-border-color: var(--brand-purple-500);
    --bs-btn-active-bg: var(--brand-purple-600);
    --bs-btn-active-border-color: var(--brand-purple-600);
}

.card {
    --bs-card-border-radius: var(--brand-radius-md);
    border: 0;
    box-shadow: var(--brand-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--brand-shadow-md);
}

.nav-link.active {
    color: var(--brand-purple-600) !important;
    font-weight: 600;
}

.site-footer {
    background: var(--brand-gradient-dark);
    color: var(--brand-muted-on-dark);
    padding: 3rem 0 1.5rem;
}

.site-footer .nav-pills {
    --bs-nav-pills-link-active-bg: transparent;
    --bs-nav-pills-link-active-color: #fff;
}

.site-footer .nav-link {
    color: var(--brand-text-on-dark);
    background-color: transparent !important;
    border: 1px solid transparent;
    border-radius: var(--brand-radius-pill);
    transition: border-color .15s ease, color .15s ease;
}

.site-footer .nav-link:hover,
.site-footer .nav-link:focus {
    color: #fff;
    border-color: var(--brand-purple-300);
}

.site-footer .nav-link.active {
    color: #fff;
    border-color: var(--brand-purple-300);
}

.site-footer a {
    color: var(--brand-text-on-dark);
}

.site-footer a:hover {
    color: #fff;
}

/* Shared component accents, reused across post cards, Stepik courses, author achievements */
.icon-badge {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-purple-50);
    color: var(--brand-purple-600);
    font-size: 1.4rem;
}

.badge-muted {
    background-color: transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.card-accent-top {
    border-top: 4px solid var(--brand-purple-500);
    border-top-left-radius: var(--brand-radius-md);
    border-top-right-radius: var(--brand-radius-md);
}

.section-title {
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Dark theme (site default) — retint Bootstrap's built-in dark-mode variables
   to the brand purple palette instead of its neutral gray */
[data-bs-theme="dark"] {
    --bs-body-bg: #130b26;
    --bs-body-color: #efeaff;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: #a99fcf;
    --bs-secondary-bg: #1d1638;
    --bs-tertiary-color: #a99fcf;
    --bs-tertiary-bg: #1d1638;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--brand-purple-300);
    --bs-link-color-rgb: 167, 139, 250;
    --bs-link-hover-color: #c4b5fd;
    --bs-link-hover-color-rgb: 196, 181, 253;
    --bs-card-bg: #1d1638;
    --bs-card-color: #efeaff;
    --bs-card-cap-bg: #241c47;

    --brand-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --brand-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
    --brand-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55);
}

[data-bs-theme="dark"] .card {
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme="dark"] .nav-link.active {
    color: var(--brand-purple-300) !important;
}

[data-bs-theme="dark"] .dropArea {
    background: #1d1638;
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .dropArea:hover {
    background: #241c47;
    color: #efeaff;
}