/* Light/Blue theme variables (Bootstrap 5.3 compatible) */
:root {
    --bs-body-bg: #f7fafc;
    /* very light background */
    --bs-body-color: #0b1324;
    /* dark slate text */
    --bs-primary: #0d6efd;
    /* Bootstrap default blue */
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Custom theme backgrounds - light blues */
.hero-radial-bg {
    background: radial-gradient(1200px 600px at 10% -20%, #e6f0ff 0%, #d6e8ff 45%, #cfe4ff 100%);
}

.callout-linear-bg {
    background: linear-gradient(135deg, #e8f2ff 0%, #d9ecff 60%, #d0e7ff 100%);
}

/* Hero background slider */
.hero-section {
    position: relative;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.hero-slide-img.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.25) 100%);
    z-index: 1;
}

.hero-section .container,
.hero-section .container-fluid {
    position: relative;
    z-index: 2;
}

/* Progress width helpers */
.progress-50 {
    width: 50% !important;
}

.progress-30 {
    width: 30% !important;
}

.progress-20 {
    width: 20% !important;
}

/* Spacing and sizing utilities (when Bootstrap utilities aren't exact) */
.mt-20px {
    margin-top: 20px !important;
}

.img-h-200 {
    height: 200px !important;
}

/* Modal sizing for video/tutorial */
.video-modal-content {
    width: 800px;
    margin-left: -120px;
    height: 540px;
}

/* Inline message style replacement */
.inline-warning {
    background-color: rgb(238, 255, 0);
    color: #ff0000;
    padding: 0.1rem 0.25rem;
    border-radius: 0.2rem;
}

/* Avatar styles */
.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-lg {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}

/* Black button variant (Bootstrap 5 custom) */
.btn-black {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #111;
    --bs-btn-hover-border-color: #111;
    --bs-btn-focus-shadow-rgb: 0, 0, 0;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
}