/*
 * AlurDigital brand-token overrides.
 *
 * Loaded AFTER style.bundle.css so cascade wins without recompiling Keen's
 * SASS. Each token is a CSS variable that Keen's compiled rules reference
 * via var(); overriding the variable shifts every rule that uses it.
 *
 * Brand palette (sourced from src/AlurDigital.Web.Public/wwwroot/css/site.css):
 *   primary           #3b6fe0   (accent)
 *   primary hover     #5184ee   (accent-strong)
 *   primary subtle    #1f3b7a   (accent-soft)
 *   bg                #0e1014   (page)
 *   bg-alt            #161821   (section)
 *   bg-elevated       #1b1d24   (card surface)
 *   border            #2a2c36
 *   border-strong     #3a3d4a
 *   text              #e8e9ee
 *   text-soft         #b6b8c3
 *   text-mute         #8c8fa3
 *   success           #6fcf97
 *   danger            #ff7676
 *
 * The variables Keen reads:
 *   --bs-primary, --bs-primary-rgb         drives .bg-primary, .text-primary,
 *                                          ki-duotone primary fill
 *   --bs-app-bg-color                       the body background
 *   --bs-app-sidebar-*                      sidebar surface chrome
 *   --bs-app-header-*                       header chrome
 *   --bs-btn-bg + friends                   per-button overrides
 *
 * Light-mode AND dark-mode are both shipped; the body data-bs-theme attr
 * switches which set wins.
 */

/* ─────────────────────────────────────────────────────────────────────────
   FONT STACK — Keen ships an Inter-from-Google-Fonts link, blocked by the
   AlurDigital CSP. Override the body font to the system stack used by
   the legacy AlurDigital sites so the typography looks the same as before.
   ───────────────────────────────────────────────────────────────────── */
:root {
    --bs-body-font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   BRAND PRIMARY  — applies in both light + dark, then a stronger value
   under dark theme.
   ───────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --bs-primary:       #3b6fe0;
    --bs-primary-rgb:   59, 111, 224;
    --bs-primary-active:        #5184ee;
    --bs-primary-active-rgb:    81, 132, 238;
    --bs-primary-light:         #e8efff;
    --bs-primary-light-rgb:     232, 239, 255;
    --bs-primary-clarity:       rgba(59, 111, 224, 0.2);
    --bs-primary-inverse:       #ffffff;
    --bs-primary-text-emphasis: #1f3b7a;
    --bs-primary-bg-subtle:     #e8efff;
    --bs-primary-border-subtle: #5184ee;
}

[data-bs-theme="dark"] {
    --bs-primary:       #5184ee;
    --bs-primary-rgb:   81, 132, 238;
    --bs-primary-active:        #3b6fe0;
    --bs-primary-active-rgb:    59, 111, 224;
    --bs-primary-light:         #1f3b7a;
    --bs-primary-light-rgb:     31, 59, 122;
    --bs-primary-clarity:       rgba(81, 132, 238, 0.25);
    --bs-primary-inverse:       #ffffff;
    --bs-primary-text-emphasis: #b6c8ff;
    --bs-primary-bg-subtle:     #1f3b7a;
    --bs-primary-border-subtle: #3b6fe0;

    /* Body / surface tokens — AlurDigital deep slate palette */
    --bs-body-bg:               #0e1014;
    --bs-body-bg-rgb:           14, 16, 20;
    --bs-app-bg-color:          #0e1014;
    --bs-app-blank-bg-color:    #0e1014;

    /* Header — slightly elevated above body */
    --bs-app-header-base-bg-color:   #1b1d24;
    --bs-app-header-base-border-bottom: 1px solid #2a2c36;
    --bs-app-header-base-box-shadow: none;

    /* Footer — sits on body, faint top border */
    --bs-app-footer-bg-color:        #0e1014;
    --bs-app-footer-border-top:      1px solid #2a2c36;

    /* Light sidebar (used by Founder) under dark theme — elevated card */
    --bs-app-sidebar-light-bg-color:        #1b1d24;
    --bs-app-sidebar-light-separator-color: #2a2c36;
    --bs-app-sidebar-light-menu-link-bg-color-active: #1f3b7a;

    /* Dark sidebar (used by Studio) — deeper, contrasting */
    --bs-app-sidebar-dark-bg-color:         #14161c;
    --bs-app-sidebar-dark-separator-color:  #2a2c36;
    --bs-app-sidebar-dark-menu-link-bg-color-active: #1f3b7a;
}

/* ─────────────────────────────────────────────────────────────────────────
   PRIMARY BUTTON — Keen hardcodes --bs-btn-* inside .btn-primary so we
   override there. Same hover / active values from the brand palette.
   ───────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn.btn-primary {
    --bs-btn-color:              #ffffff;
    --bs-btn-bg:                 #3b6fe0;
    --bs-btn-border-color:       #3b6fe0;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #5184ee;
    --bs-btn-hover-border-color: #5184ee;
    --bs-btn-focus-shadow-rgb:   59, 111, 224;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #2f5cc0;
    --bs-btn-active-border-color: #2f5cc0;
    --bs-btn-disabled-color:     #ffffff;
    --bs-btn-disabled-bg:        #3b6fe0;
    --bs-btn-disabled-border-color: #3b6fe0;
}

/* Outline / light variants of the brand button */
.btn-light-primary,
.btn.btn-light-primary {
    --bs-btn-color:              #5184ee;
    --bs-btn-bg:                 #1f3b7a;
    --bs-btn-border-color:       #1f3b7a;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #3b6fe0;
    --bs-btn-hover-border-color: #3b6fe0;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #3b6fe0;
    --bs-btn-active-border-color: #3b6fe0;
}

/* Active-color-primary / icon-muted / active-light combinations used by
   the Keen header icon buttons (theme toggle etc) — pull primary in. */
.btn-active-color-primary:hover,
.btn-active-color-primary.active,
.btn.btn-active-color-primary:hover,
.btn.btn-active-color-primary.active {
    color: #5184ee !important;
}

/* Menu items + link hovers — use the brand primary across the menu system */
.menu-state-primary .menu-item.show > .menu-link,
.menu-state-primary .menu-item .menu-link.active,
.menu-state-primary .menu-item.here > .menu-link {
    color: #5184ee !important;
}

/* Sidebar active state — pull the brand primary into the highlight */
.app-sidebar-menu .menu-link.active,
.app-sidebar-menu .menu-item.show > .menu-link {
    background-color: #1f3b7a !important;
    color: #ffffff !important;
}

/* Brand-coloured badge */
.badge-light-primary {
    color: #5184ee;
    background-color: rgba(31, 59, 122, 0.6);
}

/* Form-field focus — switch the focus ring to brand primary */
.form-control:focus,
.form-select:focus {
    border-color: #5184ee;
    box-shadow: 0 0 0 0.25rem rgba(59, 111, 224, 0.25);
}