/*
 * ============================================================
 *  theme.css  —  Bangla-O-Biswa
 * ============================================================
 *
 *  ARCHITECTURE — read before editing:
 *
 *  :root        → structural tokens ONLY (fonts, spacing,
 *                 radii, layout). No colours here, ever.
 *
 *  .palette-*   → ALL colour tokens live here, grouped by
 *                 named palette. Adding a new palette =
 *                 copy any palette block, rename the class,
 *                 change the values. Nothing else changes.
 *
 *  public-ui.css / admin-ui.css
 *               → zero hardcoded colours or fonts.
 *                 Every visual value is var(--bob-...).
 *
 *  config.php controls which palette each section uses:
 *    define('PUBLIC_PALETTE', 'palette-ember');
 *    define('ADMIN_PALETTE',  'palette-slate');
 *  Change either line → that entire section repaints.
 * ============================================================
 */

/* ============================================================
   STRUCTURAL TOKENS  —  fonts, spacing, radii, layout.
   These apply globally. Never put colours here.
   ============================================================ */
:root {
    /* Fonts */
    --bob-font-body:    "DM Sans",          Arial, sans-serif;
    --bob-font-ui:      "Poppins",          Arial, sans-serif;
    --bob-font-display: "Playfair Display", Georgia, serif;

    /* Layout */
    --bob-max-w:    1400px;
    --bob-gutter:   clamp(18px, 5vw, 80px);

    /* Header heights */
    --bob-topbar-h: 40px;
    --bob-nav-h:    72px;

    /* Border radii */
    --bob-r-sm:   6px;
    --bob-r-md:   12px;
    --bob-r-lg:   24px;
    --bob-r-pill: 999px;

    /* Motion */
    --bob-ease: 0.22s ease;

    /* Admin layout (structural — no colours) */
    --bob-sidebar-w:      260px;
    --bob-admin-topbar-h: 64px;
}


/* ============================================================
   PALETTE: EMBER
   Warm orange-red gradient — default / Durga Puja season
   ============================================================ */
.palette-ember {

    /* ── Core brand ──────────────────────────────────────── */
    --bob-clr-primary:      #A83A1A;
    --bob-clr-secondary:    #CE5D35;
    --bob-clr-accent:       #EE8B58;
    --bob-clr-accent-soft:  #FFF1E8;
    --bob-clr-highlight:    #E6B43A;
    --bob-clr-on-primary:   #FFFFFF;   /* text on primary-coloured backgrounds */

    /* ── Page surfaces ───────────────────────────────────── */
    --bob-clr-bg:           #FFF8F3;
    --bob-clr-surface:      #FFFFFF;
    --bob-clr-text:         #25211F;
    --bob-clr-text-muted:   #7A6C65;
    --bob-clr-border:       #EDD9CC;

    /* ── Footer ──────────────────────────────────────────── */
    --bob-clr-footer-bg:    #3B1E0E;
    --bob-clr-footer-text:  #F5E0D4;

    /* ── Topbar ──────────────────────────────────────────── */
    --bob-topbar-bg:        linear-gradient(135deg, #F7E2CF 0%, #FDEBD8 55%, #F3D9C4 100%);
    --bob-topbar-clr:       #4A2A18;
    --bob-topbar-link-clr:  #833A18;
    --bob-topbar-icon-bg:   rgba(168,58,26,0.12);
    --bob-topbar-border:    rgba(0,0,0,0.06);

    /* ── Header nav ──────────────────────────────────────── */
    --bob-nav-bg:
        radial-gradient(ellipse 68% 90% at 14% 24%, rgba(248,166,118,0.92) 0%, transparent 100%),
        radial-gradient(ellipse 54% 75% at 80% 11%, rgba(206,78,38,0.88)   0%, transparent 100%),
        radial-gradient(ellipse 60% 72% at 58% 82%, rgba(232,130,76,0.80)  0%, transparent 100%),
        radial-gradient(ellipse 50% 66% at 4%  90%, rgba(158,44,18,0.86)   0%, transparent 100%),
        linear-gradient(135deg, #A83A1A 0%, #CE5D35 50%, #EC8C58 100%);
    --bob-nav-clr:          #FFFFFF;
    --bob-nav-shadow:       0 10px 36px rgba(168,58,26,0.30);
    --bob-nav-link-clr:     rgba(255,255,255,0.86);
    --bob-nav-link-hover-clr: #FFFFFF;
    --bob-nav-active-line:  rgba(255,255,255,0.85);
    --bob-nav-mobile-border: rgba(255,255,255,0.12);
    --bob-nav-divider:      rgba(255,255,255,0.10);
    --bob-nav-active-border: rgba(255,255,255,0.75);
    --bob-nav-signin-divider: rgba(255,255,255,0.22);

    /* ── Brand mark ──────────────────────────────────────── */
    --bob-brand-mark-bg:           rgba(255,255,255,0.16);
    --bob-brand-mark-border:       rgba(255,255,255,0.30);
    --bob-brand-mark-clr:          #FFFFFF;
    --bob-brand-mark-shadow:       inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 20px rgba(0,0,0,0.14);
    --bob-brand-mark-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 28px rgba(0,0,0,0.20);
    --bob-brand-name-shadow:       0 1px 4px rgba(0,0,0,0.18);
    --bob-brand-tagline-clr:       rgba(255,255,255,0.78);

    /* ── Support Us nav button ───────────────────────────── */
    --bob-nav-btn-bg:          rgba(255,255,255,0.15);
    --bob-nav-btn-border:      rgba(255,255,255,0.32);
    --bob-nav-btn-clr:         #FFFFFF;
    --bob-nav-btn-hover-bg:    rgba(255,255,255,0.26);
    --bob-nav-btn-hover-border: rgba(255,255,255,0.55);
    --bob-nav-btn-hover-clr:   #FFFFFF;

    /* ── Mobile hamburger ────────────────────────────────── */
    --bob-toggle-bg:       rgba(255,255,255,0.12);
    --bob-toggle-border:   rgba(255,255,255,0.25);
    --bob-toggle-hover-bg: rgba(255,255,255,0.20);
    --bob-toggle-bar-clr:  #FFFFFF;

    /* ── Dropdown (desktop) ──────────────────────────────── */
    --bob-dropdown-bg:                #FFFFFF;
    --bob-dropdown-shadow:            0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    --bob-dropdown-notch-shadow:      -2px -2px 4px rgba(0,0,0,0.06);
    --bob-dropdown-item-clr:          #25211F;
    --bob-dropdown-item-border:       #EDD9CC;
    --bob-dropdown-item-hover-bg:     #FFF1E8;
    --bob-dropdown-item-hover-clr:    #A83A1A;
    --bob-dropdown-item-icon-clr:     #CE5D35;
    --bob-dropdown-item-icon-hover-clr: #A83A1A;

    /* ── Dropdown (mobile — inside dark nav) ─────────────── */
    --bob-dropdown-mobile-bg:              rgba(0,0,0,0.12);
    --bob-dropdown-mobile-item-clr:        rgba(255,255,255,0.88);
    --bob-dropdown-mobile-item-hover-bg:   rgba(255,255,255,0.10);
    --bob-dropdown-mobile-item-hover-clr:  #FFFFFF;
    --bob-dropdown-mobile-icon-clr:        rgba(255,255,255,0.70);

    /* ── Shadows (site-wide) ─────────────────────────────── */
    --bob-shadow-sm: 0 4px 14px  rgba(168,58,26,0.10);
    --bob-shadow-md: 0 10px 32px rgba(168,58,26,0.16);
    --bob-shadow-lg: 0 24px 64px rgba(168,58,26,0.22);

    /* ── Gradients ───────────────────────────────────────── */
    --bob-gradient-brand: linear-gradient(135deg, var(--bob-clr-primary), var(--bob-clr-secondary));

    /* ── Buttons ─────────────────────────────────────────── */
    --bob-btn-primary-clr: #FFFFFF;

    /* ── Glass panels (login, modals over gradient bg) ───── */
    --bob-glass-bg:         rgba(36,10,2,0.32);
    --bob-glass-border:     rgba(255,255,255,0.14);
    --bob-glass-clr:        #FFFFFF;
    --bob-glass-clr-muted:  rgba(255,255,255,0.70);
    --bob-glass-icon-bg:    rgba(255,255,255,0.14);
    --bob-glass-badge-bg:   rgba(255,255,255,0.09);

    /* ── Status colours ──────────────────────────────────── */
    --bob-clr-error:        #C0392B;
    --bob-clr-error-bg:     #FDF0EE;
    --bob-clr-error-border: #F5C2BB;
    --bob-clr-success:      #1A7A4A;
    --bob-clr-success-bg:   #EDFBF3;
    --bob-clr-success-border: #A8E6C4;

    /* ── Admin sidebar ───────────────────────────────────── */
    --bob-sidebar-item-hover-bg:  rgba(255,255,255,0.09);
    --bob-sidebar-item-active-bg: rgba(255,255,255,0.18);
    --bob-sidebar-divider:        rgba(255,255,255,0.12);
}


/* ============================================================
   PALETTE: OCEAN
   Teal / blue-green — calm, modern
   ============================================================ */
.palette-ocean {

    --bob-clr-primary:      #0D7A6E;
    --bob-clr-secondary:    #12A899;
    --bob-clr-accent:       #45C8C0;
    --bob-clr-accent-soft:  #EEFDFB;
    --bob-clr-highlight:    #F36621;
    --bob-clr-on-primary:   #FFFFFF;

    --bob-clr-bg:           #F3FFFD;
    --bob-clr-surface:      #FFFFFF;
    --bob-clr-text:         #12343B;
    --bob-clr-text-muted:   #65808A;
    --bob-clr-border:       #D8EEF0;

    --bob-clr-footer-bg:    #0A2B31;
    --bob-clr-footer-text:  #D0ECEE;

    --bob-topbar-bg:        linear-gradient(135deg, #DFF5F3 0%, #EDFCFA 55%, #D8F2F0 100%);
    --bob-topbar-clr:       #0A3A42;
    --bob-topbar-link-clr:  #0D7A6E;
    --bob-topbar-icon-bg:   rgba(13,122,110,0.12);
    --bob-topbar-border:    rgba(0,0,0,0.06);

    --bob-nav-bg:
        radial-gradient(ellipse 68% 90% at 14% 24%, rgba(69,200,192,0.85)  0%, transparent 100%),
        radial-gradient(ellipse 54% 75% at 80% 11%, rgba(13,122,110,0.88)  0%, transparent 100%),
        radial-gradient(ellipse 60% 72% at 58% 82%, rgba(18,168,153,0.80)  0%, transparent 100%),
        radial-gradient(ellipse 50% 66% at 4%  90%, rgba(8,72,68,0.86)     0%, transparent 100%),
        linear-gradient(135deg, #0A5C52 0%, #0D9A8C 50%, #35C4B8 100%);
    --bob-nav-clr:          #FFFFFF;
    --bob-nav-shadow:       0 10px 36px rgba(13,122,110,0.30);
    --bob-nav-link-clr:     rgba(255,255,255,0.86);
    --bob-nav-link-hover-clr: #FFFFFF;
    --bob-nav-active-line:  rgba(255,255,255,0.85);
    --bob-nav-mobile-border: rgba(255,255,255,0.12);
    --bob-nav-divider:      rgba(255,255,255,0.10);
    --bob-nav-active-border: rgba(255,255,255,0.75);
    --bob-nav-signin-divider: rgba(255,255,255,0.22);

    --bob-brand-mark-bg:           rgba(255,255,255,0.16);
    --bob-brand-mark-border:       rgba(255,255,255,0.30);
    --bob-brand-mark-clr:          #FFFFFF;
    --bob-brand-mark-shadow:       inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 20px rgba(0,0,0,0.14);
    --bob-brand-mark-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 28px rgba(0,0,0,0.20);
    --bob-brand-name-shadow:       0 1px 4px rgba(0,0,0,0.18);
    --bob-brand-tagline-clr:       rgba(255,255,255,0.78);

    --bob-nav-btn-bg:          rgba(255,255,255,0.15);
    --bob-nav-btn-border:      rgba(255,255,255,0.32);
    --bob-nav-btn-clr:         #FFFFFF;
    --bob-nav-btn-hover-bg:    rgba(255,255,255,0.26);
    --bob-nav-btn-hover-border: rgba(255,255,255,0.55);
    --bob-nav-btn-hover-clr:   #FFFFFF;

    --bob-toggle-bg:       rgba(255,255,255,0.12);
    --bob-toggle-border:   rgba(255,255,255,0.25);
    --bob-toggle-hover-bg: rgba(255,255,255,0.20);
    --bob-toggle-bar-clr:  #FFFFFF;

    --bob-dropdown-bg:                #FFFFFF;
    --bob-dropdown-shadow:            0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    --bob-dropdown-notch-shadow:      -2px -2px 4px rgba(0,0,0,0.06);
    --bob-dropdown-item-clr:          #12343B;
    --bob-dropdown-item-border:       #D8EEF0;
    --bob-dropdown-item-hover-bg:     #EEFDFB;
    --bob-dropdown-item-hover-clr:    #0D7A6E;
    --bob-dropdown-item-icon-clr:     #12A899;
    --bob-dropdown-item-icon-hover-clr: #0D7A6E;

    --bob-dropdown-mobile-bg:              rgba(0,0,0,0.12);
    --bob-dropdown-mobile-item-clr:        rgba(255,255,255,0.88);
    --bob-dropdown-mobile-item-hover-bg:   rgba(255,255,255,0.10);
    --bob-dropdown-mobile-item-hover-clr:  #FFFFFF;
    --bob-dropdown-mobile-icon-clr:        rgba(255,255,255,0.70);

    --bob-shadow-sm: 0 4px 14px  rgba(13,122,110,0.10);
    --bob-shadow-md: 0 10px 32px rgba(13,122,110,0.16);
    --bob-shadow-lg: 0 24px 64px rgba(13,122,110,0.22);

    --bob-gradient-brand: linear-gradient(135deg, var(--bob-clr-primary), var(--bob-clr-secondary));
    --bob-btn-primary-clr: #FFFFFF;

    --bob-glass-bg:         rgba(2,22,20,0.32);
    --bob-glass-border:     rgba(255,255,255,0.14);
    --bob-glass-clr:        #FFFFFF;
    --bob-glass-clr-muted:  rgba(255,255,255,0.70);
    --bob-glass-icon-bg:    rgba(255,255,255,0.14);
    --bob-glass-badge-bg:   rgba(255,255,255,0.09);

    --bob-clr-error:        #C0392B;
    --bob-clr-error-bg:     #FDF0EE;
    --bob-clr-error-border: #F5C2BB;
    --bob-clr-success:      #1A7A4A;
    --bob-clr-success-bg:   #EDFBF3;
    --bob-clr-success-border: #A8E6C4;

    --bob-sidebar-item-hover-bg:  rgba(255,255,255,0.09);
    --bob-sidebar-item-active-bg: rgba(255,255,255,0.18);
    --bob-sidebar-divider:        rgba(255,255,255,0.12);
}


/* ============================================================
   PALETTE: ROYAL
   Deep purple / gold — festive Puja feel
   ============================================================ */
.palette-royal {

    --bob-clr-primary:      #5E2D7E;
    --bob-clr-secondary:    #8A4CB0;
    --bob-clr-accent:       #C084D8;
    --bob-clr-accent-soft:  #F7EEFF;
    --bob-clr-highlight:    #E8B840;
    --bob-clr-on-primary:   #FFFFFF;

    --bob-clr-bg:           #FDF8FF;
    --bob-clr-surface:      #FFFFFF;
    --bob-clr-text:         #1E1228;
    --bob-clr-text-muted:   #72658A;
    --bob-clr-border:       #E2D6EE;

    --bob-clr-footer-bg:    #2A1040;
    --bob-clr-footer-text:  #E8D8F8;

    --bob-topbar-bg:        linear-gradient(135deg, #EEE0FF 0%, #F5EDFF 55%, #E8D8F8 100%);
    --bob-topbar-clr:       #2A1040;
    --bob-topbar-link-clr:  #5E2D7E;
    --bob-topbar-icon-bg:   rgba(94,45,126,0.12);
    --bob-topbar-border:    rgba(0,0,0,0.06);

    --bob-nav-bg:
        radial-gradient(ellipse 68% 90% at 14% 24%, rgba(192,132,216,0.88) 0%, transparent 100%),
        radial-gradient(ellipse 54% 75% at 80% 11%, rgba(94,45,126,0.90)   0%, transparent 100%),
        radial-gradient(ellipse 60% 72% at 58% 82%, rgba(138,76,176,0.82)  0%, transparent 100%),
        radial-gradient(ellipse 50% 66% at 4%  90%, rgba(48,18,72,0.88)    0%, transparent 100%),
        linear-gradient(135deg, #3E1260 0%, #6E3496 50%, #A468C8 100%);
    --bob-nav-clr:          #FFFFFF;
    --bob-nav-shadow:       0 10px 36px rgba(94,45,126,0.30);
    --bob-nav-link-clr:     rgba(255,255,255,0.86);
    --bob-nav-link-hover-clr: #FFFFFF;
    --bob-nav-active-line:  rgba(255,255,255,0.85);
    --bob-nav-mobile-border: rgba(255,255,255,0.12);
    --bob-nav-divider:      rgba(255,255,255,0.10);
    --bob-nav-active-border: rgba(255,255,255,0.75);
    --bob-nav-signin-divider: rgba(255,255,255,0.22);

    --bob-brand-mark-bg:           rgba(255,255,255,0.16);
    --bob-brand-mark-border:       rgba(255,255,255,0.30);
    --bob-brand-mark-clr:          #FFFFFF;
    --bob-brand-mark-shadow:       inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 20px rgba(0,0,0,0.14);
    --bob-brand-mark-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 28px rgba(0,0,0,0.20);
    --bob-brand-name-shadow:       0 1px 4px rgba(0,0,0,0.18);
    --bob-brand-tagline-clr:       rgba(255,255,255,0.78);

    --bob-nav-btn-bg:          rgba(255,255,255,0.15);
    --bob-nav-btn-border:      rgba(255,255,255,0.32);
    --bob-nav-btn-clr:         #FFFFFF;
    --bob-nav-btn-hover-bg:    rgba(255,255,255,0.26);
    --bob-nav-btn-hover-border: rgba(255,255,255,0.55);
    --bob-nav-btn-hover-clr:   #FFFFFF;

    --bob-toggle-bg:       rgba(255,255,255,0.12);
    --bob-toggle-border:   rgba(255,255,255,0.25);
    --bob-toggle-hover-bg: rgba(255,255,255,0.20);
    --bob-toggle-bar-clr:  #FFFFFF;

    --bob-dropdown-bg:                #FFFFFF;
    --bob-dropdown-shadow:            0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    --bob-dropdown-notch-shadow:      -2px -2px 4px rgba(0,0,0,0.06);
    --bob-dropdown-item-clr:          #1E1228;
    --bob-dropdown-item-border:       #E2D6EE;
    --bob-dropdown-item-hover-bg:     #F7EEFF;
    --bob-dropdown-item-hover-clr:    #5E2D7E;
    --bob-dropdown-item-icon-clr:     #8A4CB0;
    --bob-dropdown-item-icon-hover-clr: #5E2D7E;

    --bob-dropdown-mobile-bg:              rgba(0,0,0,0.12);
    --bob-dropdown-mobile-item-clr:        rgba(255,255,255,0.88);
    --bob-dropdown-mobile-item-hover-bg:   rgba(255,255,255,0.10);
    --bob-dropdown-mobile-item-hover-clr:  #FFFFFF;
    --bob-dropdown-mobile-icon-clr:        rgba(255,255,255,0.70);

    --bob-shadow-sm: 0 4px 14px  rgba(94,45,126,0.10);
    --bob-shadow-md: 0 10px 32px rgba(94,45,126,0.16);
    --bob-shadow-lg: 0 24px 64px rgba(94,45,126,0.22);

    --bob-gradient-brand: linear-gradient(135deg, var(--bob-clr-primary), var(--bob-clr-secondary));
    --bob-btn-primary-clr: #FFFFFF;

    --bob-glass-bg:         rgba(18,4,30,0.32);
    --bob-glass-border:     rgba(255,255,255,0.14);
    --bob-glass-clr:        #FFFFFF;
    --bob-glass-clr-muted:  rgba(255,255,255,0.70);
    --bob-glass-icon-bg:    rgba(255,255,255,0.14);
    --bob-glass-badge-bg:   rgba(255,255,255,0.09);

    --bob-clr-error:        #C0392B;
    --bob-clr-error-bg:     #FDF0EE;
    --bob-clr-error-border: #F5C2BB;
    --bob-clr-success:      #1A7A4A;
    --bob-clr-success-bg:   #EDFBF3;
    --bob-clr-success-border: #A8E6C4;

    --bob-sidebar-item-hover-bg:  rgba(255,255,255,0.09);
    --bob-sidebar-item-active-bg: rgba(255,255,255,0.18);
    --bob-sidebar-divider:        rgba(255,255,255,0.12);
}


/* ============================================================
   PALETTE: SLATE
   Clean navy/blue-grey — Admin section default
   ============================================================ */
.palette-slate {

    --bob-clr-primary:      #1E3A5F;
    --bob-clr-secondary:    #2E6DA4;
    --bob-clr-accent:       #5BA8D4;
    --bob-clr-accent-soft:  #EBF5FF;
    --bob-clr-highlight:    #F59E0B;
    --bob-clr-on-primary:   #FFFFFF;

    --bob-clr-bg:           #F4F6F8;
    --bob-clr-surface:      #FFFFFF;
    --bob-clr-text:         #1A2332;
    --bob-clr-text-muted:   #64748B;
    --bob-clr-border:       #E2E8F0;

    --bob-clr-footer-bg:    #0F1C2D;
    --bob-clr-footer-text:  #94A3B8;

    --bob-topbar-bg:        linear-gradient(135deg, #E8EFF7 0%, #F0F5FB 55%, #E2EBF5 100%);
    --bob-topbar-clr:       #1A2332;
    --bob-topbar-link-clr:  #1E3A5F;
    --bob-topbar-icon-bg:   rgba(30,58,95,0.10);
    --bob-topbar-border:    rgba(0,0,0,0.06);

    --bob-nav-bg:
        radial-gradient(ellipse 68% 90% at 14% 24%, rgba(91,168,212,0.75)  0%, transparent 100%),
        radial-gradient(ellipse 54% 75% at 80% 11%, rgba(30,58,95,0.90)    0%, transparent 100%),
        radial-gradient(ellipse 60% 72% at 58% 82%, rgba(46,109,164,0.80)  0%, transparent 100%),
        radial-gradient(ellipse 50% 66% at 4%  90%, rgba(15,28,45,0.86)    0%, transparent 100%),
        linear-gradient(135deg, #152B48 0%, #1E3A5F 50%, #2E6DA4 100%);
    --bob-nav-clr:          #FFFFFF;
    --bob-nav-shadow:       0 10px 36px rgba(30,58,95,0.28);
    --bob-nav-link-clr:     rgba(255,255,255,0.86);
    --bob-nav-link-hover-clr: #FFFFFF;
    --bob-nav-active-line:  rgba(255,255,255,0.85);
    --bob-nav-mobile-border: rgba(255,255,255,0.12);
    --bob-nav-divider:      rgba(255,255,255,0.10);
    --bob-nav-active-border: rgba(255,255,255,0.75);
    --bob-nav-signin-divider: rgba(255,255,255,0.22);

    --bob-brand-mark-bg:           rgba(255,255,255,0.16);
    --bob-brand-mark-border:       rgba(255,255,255,0.30);
    --bob-brand-mark-clr:          #FFFFFF;
    --bob-brand-mark-shadow:       inset 0 1px 0 rgba(255,255,255,0.22), 0 8px 20px rgba(0,0,0,0.14);
    --bob-brand-mark-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 28px rgba(0,0,0,0.20);
    --bob-brand-name-shadow:       0 1px 4px rgba(0,0,0,0.18);
    --bob-brand-tagline-clr:       rgba(255,255,255,0.78);

    --bob-nav-btn-bg:          rgba(255,255,255,0.15);
    --bob-nav-btn-border:      rgba(255,255,255,0.32);
    --bob-nav-btn-clr:         #FFFFFF;
    --bob-nav-btn-hover-bg:    rgba(255,255,255,0.26);
    --bob-nav-btn-hover-border: rgba(255,255,255,0.55);
    --bob-nav-btn-hover-clr:   #FFFFFF;

    --bob-toggle-bg:       rgba(255,255,255,0.12);
    --bob-toggle-border:   rgba(255,255,255,0.25);
    --bob-toggle-hover-bg: rgba(255,255,255,0.20);
    --bob-toggle-bar-clr:  #FFFFFF;

    --bob-dropdown-bg:                #FFFFFF;
    --bob-dropdown-shadow:            0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
    --bob-dropdown-notch-shadow:      -2px -2px 4px rgba(0,0,0,0.06);
    --bob-dropdown-item-clr:          #1A2332;
    --bob-dropdown-item-border:       #E2E8F0;
    --bob-dropdown-item-hover-bg:     #EBF5FF;
    --bob-dropdown-item-hover-clr:    #1E3A5F;
    --bob-dropdown-item-icon-clr:     #2E6DA4;
    --bob-dropdown-item-icon-hover-clr: #1E3A5F;

    --bob-dropdown-mobile-bg:              rgba(0,0,0,0.12);
    --bob-dropdown-mobile-item-clr:        rgba(255,255,255,0.88);
    --bob-dropdown-mobile-item-hover-bg:   rgba(255,255,255,0.10);
    --bob-dropdown-mobile-item-hover-clr:  #FFFFFF;
    --bob-dropdown-mobile-icon-clr:        rgba(255,255,255,0.70);

    --bob-shadow-sm: 0 4px 14px  rgba(30,58,95,0.10);
    --bob-shadow-md: 0 10px 32px rgba(30,58,95,0.16);
    --bob-shadow-lg: 0 24px 64px rgba(30,58,95,0.22);

    --bob-gradient-brand: linear-gradient(135deg, var(--bob-clr-primary), var(--bob-clr-secondary));
    --bob-btn-primary-clr: #FFFFFF;

    --bob-glass-bg:         rgba(4,12,24,0.32);
    --bob-glass-border:     rgba(255,255,255,0.14);
    --bob-glass-clr:        #FFFFFF;
    --bob-glass-clr-muted:  rgba(255,255,255,0.70);
    --bob-glass-icon-bg:    rgba(255,255,255,0.14);
    --bob-glass-badge-bg:   rgba(255,255,255,0.09);

    --bob-clr-error:        #C0392B;
    --bob-clr-error-bg:     #FDF0EE;
    --bob-clr-error-border: #F5C2BB;
    --bob-clr-success:      #1A7A4A;
    --bob-clr-success-bg:   #EDFBF3;
    --bob-clr-success-border: #A8E6C4;

    --bob-sidebar-item-hover-bg:  rgba(255,255,255,0.09);
    --bob-sidebar-item-active-bg: rgba(255,255,255,0.18);
    --bob-sidebar-divider:        rgba(255,255,255,0.12);
}