/*
 * e4 theme overrides for the Bootstrap CDN build (see App.razor for the version).
 * Must be loaded right after bootstrap.min.css.
 *
 * Most colors cascade from the :root variables. Some components have their colors
 * baked in at Bootstrap compile time, so they are overridden explicitly below.
 */

/* 1. Theme variables */
:root {
    --e4-primary: #e26900;
    --e4-primary-light: #ff9e49; /* primary, +20% lightness */
    --e4-bg: #222222;
    --e4-bg-light: #2f2f2f;      /* bg, +5% lightness */
    --e4-bg-dark: #151515;       /* bg, -5% lightness */

    --bs-gray-800: #222222;
    --bs-gray-900: #202020;
    --bs-dark: #202020;
    --bs-dark-rgb: 32, 32, 32;

    --bs-primary: var(--e4-primary);
    --bs-primary-rgb: 226, 105, 0;
    --bs-secondary: var(--e4-bg);
    --bs-secondary-rgb: 34, 34, 34;
    --bs-secondary-bg-subtle: var(--e4-bg-light);

    --bs-body-bg: var(--e4-bg);
    --bs-body-bg-rgb: 34, 34, 34;
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-heading-color: var(--e4-primary-light);

    --bs-link-color: var(--e4-primary);
    --bs-link-color-rgb: 226, 105, 0;
    --bs-link-hover-color: #b55400;
    --bs-link-hover-color-rgb: 181, 84, 0;

    --bs-focus-ring-color: rgba(226, 105, 0, 0.25);
}

/* 2. Typography (h1 size is set in app.css) */
h2, .h2 {
    font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
    h2, .h2 {
        font-size: 1.5rem;
    }
}

/* 3. Components with compile-time colors */
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: #e26900;
    --bs-btn-border-color: #e26900;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #e68026;
    --bs-btn-hover-border-color: #e5781a;
    --bs-btn-focus-shadow-rgb: 192, 89, 0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e88733;
    --bs-btn-active-border-color: #e5781a;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #e26900;
    --bs-btn-disabled-border-color: #e26900;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #222222;
    --bs-btn-border-color: #222222;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1d1d1d;
    --bs-btn-hover-border-color: #1b1b1b;
    --bs-btn-focus-shadow-rgb: 67, 67, 67;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1b1b1b;
    --bs-btn-active-border-color: #1a1a1a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #222222;
    --bs-btn-disabled-border-color: #222222;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--e4-primary);
}

.dropdown-menu-dark {
    --bs-dropdown-bg: var(--e4-bg);
}

.nav-link:focus-visible,
.form-control:focus {
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control:focus {
    border-color: #f1b480;
}