/*
 * --------------------------------------------------------------------------
 * HEART MATTERS GLOBAL THEME TOKENS
 * --------------------------------------------------------------------------
 */
:root {
    /* Styleguide: Heart Matters Academy brand palette */
    --primary: #E11D48;
    --primary-dark: #BE123C;
    --primary-light: #F43F5E;
    --secondary: #0EA5E9;
    --secondary-dark: #0284C8;
    --accent: #FBBF24;
    --accent-2: #10B981;
    --bg: #FFF7ED;
    --bg-light: #FFFFFF;
    --text: #1F2937;
    --text-light: #4B5563;
    --border: #E5E7EB;
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 1.5rem;
    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-card: 0 10px 15px -3px rgb(225 29 72 / 0.1), 0 4px 6px -4px rgb(225 29 72 / 0.08);

    --bs-primary: var(--primary);
    --bs-secondary: var(--secondary);
    --bs-success: var(--accent-2);
    --bs-info: var(--secondary);
    --bs-warning: var(--accent);
    --bs-danger: var(--primary-dark);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-link-color: var(--secondary-dark);
    --bs-link-hover-color: var(--secondary);
}

.hm-theme {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--text);
    background: var(--bg);
}

.hm-theme h1,
.hm-theme h2,
.hm-theme h3,
.hm-theme h4,
.hm-theme h5,
.hm-theme h6,
.hm-theme .display-1,
.hm-theme .display-2,
.hm-theme .display-3,
.hm-theme .display-4,
.hm-theme .display-5,
.hm-theme .display-6 {
    font-family: "Poppins", "Inter", sans-serif;
    color: var(--text);
}

.hm-theme a {
    color: var(--secondary-dark);
}

.hm-theme a:hover {
    color: var(--secondary);
}

.hm-theme .btn {
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all 0.2s ease;
}

.hm-theme .btn:hover {
    transform: translateY(-1px);
}

.hm-theme .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hm-theme .btn-primary:hover,
.hm-theme .btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

.hm-theme .btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.hm-theme .btn-outline-primary:hover,
.hm-theme .btn-outline-primary:focus {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.hm-theme .card,
.hm-theme .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    background-color: var(--bg-light);
}

.hm-theme .form-control,
.hm-theme .form-select {
    border-radius: 1rem;
    border-color: var(--border);
}

.hm-theme .form-control:focus,
.hm-theme .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgb(225 29 72 / 0.2);
}

.hm-theme #alerts-wrapper .alert {
    border-radius: var(--radius-sm);
}

.hm-app-theme .main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.hm-app-theme footer {
    margin: 2rem auto;
    max-width: 1280px;
    padding: 1.25rem 1rem;
    color: var(--text-light);
    font-size: 0.925rem;
}

/*
 * Enroll page: same background as login, card readable over image
 */
.hm-enroll-page {
    background-image: url('/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hm-enroll-page .card {
    background-color: rgb(255 255 255 / 0.98);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hm-enroll-page .card-header.hm-enroll-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

/* Enroll header: styleguide primary gradient */
.hm-enroll-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    border: none;
}

.hm-enroll-header h2 {
    color: #fff;
}

/* Start Over: high-contrast secondary-style button on header */
.btn-enroll-reset {
    background: #fff;
    color: var(--primary);
    border: 2px solid #fff;
    border-radius: var(--radius-lg);
    font-weight: 600;
    padding: 0.35rem 1rem;
}

.btn-enroll-reset:hover {
    background: rgb(255 255 255 / 0.9);
    color: var(--primary-dark);
    border-color: #fff;
}

/* Step badges: styleguide palette */
.hm-enroll-steps .badge {
    padding: 0.4rem 0.9rem;
    font-weight: 500;
}

.hm-step-current {
    background-color: var(--primary);
    color: #fff;
}

.hm-step-complete {
    background-color: var(--accent-2);
    color: #fff;
}

.hm-step-pending {
    background-color: var(--border);
    color: var(--text-light);
}

@media (max-width: 768px) {
    .hm-theme {
        background: var(--bg);
    }

    .hm-enroll-page {
        background-image: url('/background.jpg');
    }
}