/* colors.css
 * ============================================
 * Color system with modern color-mix() for dynamic variants.
 * Centralizes all color-related styling and generates hover/active
 * states dynamically instead of hardcoding hex values.
 *
 * Browser support: Chrome 111+, Firefox 113+, Safari 16.2+
 * Fallback: Older browsers use the explicit --bs-* variables
 *
 * Last updated: 2025-12-25
 * See: docs/delivery/74-bootstrap-vanilla-css/74-4.md
 */

/* === DYNAMIC COLOR VARIANTS ===
 * Generate hover/active states using color-mix()
 * This replaces hardcoded hex values like #A0522D with computed blends
 */
:root {
    /* Primary color variants */
    --primary-hover: color-mix(in srgb, var(--bs-primary) 85%, black);
    --primary-active: color-mix(in srgb, var(--bs-primary) 70%, black);
    --primary-light: color-mix(in srgb, var(--bs-primary) 10%, white);
    --primary-subtle: color-mix(in srgb, var(--bs-primary) 5%, white);

    /* Secondary color variants */
    --secondary-hover: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --secondary-active: color-mix(in srgb, var(--bs-secondary) 70%, black);
    --secondary-light: color-mix(in srgb, var(--bs-secondary) 10%, white);

    /* Warning (gold star) variants */
    --warning-subtle: color-mix(in srgb, var(--bs-warning) 20%, white);
    --warning-bg: color-mix(in srgb, var(--bs-warning) 5%, white);
}

/* === PRIMARY BUTTON ===
 * Brown theme button styling with color-mix() hover states
 */
.btn-primary {
    color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), 0.65);
    --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 0.65);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-primary,
a.btn-primary {
    color: #fff !important;
}

/* === OUTLINE BUTTONS === */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
}

/* Explicit hover rule for outline-primary buttons (ensure white text) */
a.btn-outline-primary:hover,
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Fix: btn-check + btn-outline-primary hover (Bootstrap resets to non-hover vars) */
.btn-check + .btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Checked btn-outline-primary hover: darken slightly for feedback */
.btn-check:checked + .btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 0.65);

    &:hover,
    &.active {
        color: var(--bs-white);
        background-color: var(--bs-secondary);
        border-color: var(--bs-secondary);
    }
}

a.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

/* === DANGER BUTTON === */
.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;

    &:hover {
        background-color: #bb2d3b;
        border-color: #b02a37;
    }
}

/* === TEXT COLORS === */
.text-primary {
    color: var(--bs-primary) !important;
}

.text-warning,
.border-warning {
    color: var(--bs-warning) !important;
}

.bg-warning-subtle {
    background-color: var(--warning-bg) !important;
}

/* === FOCUS RING ===
 * Use primary color for focus states
 */
.btn:focus,
.btn:active,
a:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* === DISABLED BUTTON STATES === */
.btn.disabled,
.btn:disabled {
    pointer-events: auto !important;
    background-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.4) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    pointer-events: auto !important;
    color: rgba(var(--bs-primary-rgb), 0.5) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.3) !important;
    background-color: transparent !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
    pointer-events: auto !important;
    color: rgba(var(--bs-secondary-rgb), 0.5) !important;
    border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
    background-color: transparent !important;
}

/* === ALERT COLORS ===
 * Themed to match vintage book aesthetic
 */
.alert {
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-success {
    color: #43683C;
    background-color: #E8F3E6;
    border-color: #C8E6C2;
}

.alert-danger {
    color: #7A2A27;
    background-color: #F8E7E6;
    border-color: #F0CCCA;
}

.alert-info {
    color: var(--bs-secondary);
    background-color: #E6F0F0;
    border-color: #C8DCDC;
}

.alert-warning {
    color: #856404;
    background-color: #FFF8E6;
    border-color: #FFEEBA;
}

/* === CARD LINKS ===
 * Primary color for card links with hover state
 */
.card a,
.card-title a,
.originator-name a {
    color: var(--bs-primary);
    text-decoration: none;

    &:hover {
        color: var(--primary-hover);
    }
}

/* === NAVBAR COLORS === */
.navbar-dark {
    --bs-navbar-color: rgba(255, 255, 255, 0.75);
    --bs-navbar-hover-color: rgba(255, 255, 255, 0.9);
    --bs-navbar-active-color: #fff;
    --bs-navbar-brand-color: #fff;
    --bs-navbar-brand-hover-color: #fff;
}

.navbar.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

/* === HERO SECTION ===
 * Subtle primary color gradient
 */
.hero-section {
    background: linear-gradient(
        rgba(var(--bs-primary-rgb), 0.05),
        rgba(var(--bs-primary-rgb), 0.02)
    );
}

/* === FEATURE ICONS === */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* === ALPHABET NAVIGATION ===
 * Letter buttons with primary color theme
 */
.alphabet-nav .btn {
    min-width: 2.5rem;
    font-weight: 500;
    border-color: var(--bs-primary);
    color: var(--bs-primary);

    &:hover {
        background-color: var(--primary-light);
        border-color: var(--bs-primary);
        color: var(--bs-primary);
    }
}

.alphabet-nav .btn-primary {
    font-size: 1.1em;
    color: white;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);

    &:hover {
        color: white;
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
    }
}

.alphabet-nav .nav-link {
    color: var(--bs-body-color);
    background-color: var(--bs-gray-100);
    border-radius: var(--bs-border-radius);
    margin: 0.25rem;
    transition: all 0.2s ease-in-out;

    &:hover {
        background-color: var(--bs-gray-200);
    }

    &.active {
        color: var(--bs-white);
        background-color: var(--bs-primary);
        font-weight: 500;
    }
}

/* === MOBILE ALPHABET SIDEBAR === */
.alphabet-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.2rem 0;
    color: var(--bs-primary);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.2s ease;

    &:hover {
        color: var(--bs-primary);
        background-color: var(--primary-light);
        opacity: 1;
    }

    &.active {
        color: white;
        background-color: var(--bs-primary);
        opacity: 1;
        border-radius: 0;
    }
}

.alphabet-link-clear {
    color: white;
    background-color: var(--bs-secondary);
    opacity: 1;
    margin: 0.5rem 1px 0.2rem;
    width: calc(100% - 2px);
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover,
    &:active {
        color: white;
        background-color: var(--bs-secondary);
    }
}