:root {
    /* Brand palette */
    --brand-blue-50: #e8f3ff;
    --brand-blue-100: #d1e7ff;
    --brand-blue-300: #b3d8ff;
    --brand-blue-400: #7ebcff;
    --brand-blue-500: #3698ff;
    --brand-blue-600: #007cff;
    --brand-blue-700: #0066d3;
    --brand-blue-900: #044589;
    --brand-orange: #ff710d;
    --brand-orange-hover: #e6650b;
    --brand-orange-active: #cc580a;
    --brand-gradient: linear-gradient(135deg, var(--brand-blue-700) 0%, var(--brand-blue-900) 60%, #044589 100%);
    --brand-gradient-dark: #2b3035;
    --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-blue-500);
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: var(--brand-blue-600);
    --bs-link-color-rgb: 109, 40, 217;
    --bs-link-hover-color: var(--brand-blue-700);
    --bs-border-radius: var(--brand-radius-sm);
    --bs-border-radius-lg: var(--brand-radius-md);
    --bs-body-font-family: 'Arial Narrow', '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-blue-500);
    --bs-btn-border-color: var(--brand-blue-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-blue-500);
    --bs-btn-hover-border-color: var(--brand-blue-500);
    --bs-btn-active-bg: var(--brand-blue-600);
    --bs-btn-active-border-color: var(--brand-blue-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-blue-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-blue-300);
        }

        .site-footer .nav-link.active {
            color: #fff;
            border-color: var(--brand-blue-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-blue-50);
    color: var(--brand-blue-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-blue-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 blue palette instead of its neutral gray */
[data-bs-theme="dark"] {
    --bs-body-bg: #1e1e1e;
    --bs-body-color: #e9e9e9;
    --bs-emphasis-color: ##d1e7ff;
    --bs-secondary-color: #808080;
    --bs-secondary-bg: #031d38;
    --bs-tertiary-color: #646464;
    --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-blue-300);
    --bs-link-color-rgb: 167, 139, 250;
    --bs-link-hover-color: #b3d8ff;
    --bs-link-hover-color-rgb: 179, 216, 255 --bs-card-bg: #001122;
    --bs-card-color: #efeaff;
    --bs-card-cap-bg: #021e3c;
    --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-blue-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;
        }