:root {
    /* =============================================
       BOOTSTRAP CORE
       ============================================= */
    --bs-primary:     #0b1c51;
    --bs-info:        #a6edf2;

    --bs-primary-rgb: 11, 28, 81;
    --bs-info-rgb:    166, 237, 242;

    --bs-info-light:                    #bcf2f5;
    --bs-info-light1:                   #b3f0f4;
    --bs-primary-light:                 #48557d;
    --bs-primary-light1:                #303e6b;

    --bs-info-light-rgb:                166, 237, 242;
    --bs-primary-light-rgb:             11, 28, 81;

    --bs-info-active-bg:                #85bec2;
    --bs-primary-active-bg:             #091641;
    --bs-btn-active-border-color-info:      #7db2b6;
    --bs-btn-active-border-color-primary:   #08153d;
    --bs-btn-disabled-bg-info:              #c5f3f7;
    --bs-btn-disabled-bg-primary:           #606b8e;
    --bs-btn-disabled-border-color-info:    #c5f3f7;
    --bs-btn-disabled-border-color-primary: #606b8e;
    --bs-success-text-emphasis-primary:     #0d205d;
    --bs-btn-color-info:                    #7db2b6;

    /* =============================================
       VP / TEAL VARIANTS
       ============================================= */
    --vp-teal:      #1f2e5f;
    --vp-teal-mid:  #374570;
    --vp-dark:      #040b20;
    --vp-dark2:     #060f2d;

    /* =============================================
       NAVY HIERARCHY
       ============================================= */
    --navy:       #0b1c51;
    --navy-mid:   #233362;
    --navy-light: #3c4974;
    --navy-dark:  #0a1949;
    --navy-dark1: #091845;
    --navy-dark2: #081439;

    /* =============================================
       LIME / INFO
       ============================================= */
    --lime:        #a6edf2;
    --lime-bright: #b3f0f4;
    --lime-dim:    rgba(166, 237, 242, 0.18);
    --lime-glow:   rgba(166, 237, 242, 0.38);

    /* =============================================
       LANDING PAGE CHROME
       ============================================= */
    --primary:        #0b1c51;
    --primary-r:      11;
    --primary-g:      28;
    --primary-b:      81;
    --primary-dark:   #091845;
    --primary-light:  #9199b1;
    --primary-dim:    rgba(11,28,81,.10);
    --primary-mid:    rgba(11,28,81,.18);
    --primary-glow:   rgba(11,28,81,.28);

    --info:           #a6edf2;
    --info-r:         166;
    --info-g:         237;
    --info-b:         242;
    --info-dark:      #85bec2;
    --info-dim:       rgba(166,237,242,.12);
    --info-glow:      rgba(166,237,242,.3);

    /* ── Surfaces & Layout ── */
    --bg:             #f4f6f8;
    --bg-card:        #ffffff;
    /* FIX: use rgba with brand RGB so border is visible on light AND dark surfaces */
    --border:         rgba(11,28,81,0.10);
    --border-focus:   rgba(11,28,81,.35);
    --txt-hi:         #1a2332;
    --txt-mid:        #4a5568;
    --txt-lo:         #9aa5b4;
    --nav-h:          58px;
    --t:              .2s ease;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:      0 8px 32px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.05);

    /* =============================================
       NORDB2B THEME
       ============================================= */
    --red:            #0b1c51;
    --red-light:      #ced2dc;
    --red-mid:        #79829f;
    --red-dark:       #091845;
    --red-darker:     #081439;

    --info-brand:     #a6edf2;
    --info-bg:        #edfbfc;

    /* Surfaces */
    --surface:        #ffffff;
    --surface2:       #f0f1f5;

    /* Theme borders */
    --border2:        rgba(11,28,81,0.17);

    /* Text hierarchy */
    --text1:          #0a1b4d;
    --text2:          #545f82;
    --text3:          #9198af;

    /* Semantic states */
    --success:        #1a7a4a;
    --success-bg:     #e6f4ed;
    --warn:           #8a5a00;
    --warn-bg:        #fff5d6;
    --danger:         #b22222;
    --danger-bg:      #fdeaea;

    /* Typography */
    
    --font-display:   'DM Sans', sans-serif;
    --font-body:      'DM Sans', sans-serif;

    /* Radii */
    --r:              10px;
    --r-lg:           14px;
    --r-xl:           18px;

    /* Shadows (primary-tinted) */
    --shadow:         0 2px 14px rgba(11,28,81,0.07);
    --shadow-xl:      0 16px 64px rgba(11,28,81,0.16);

    /* Topbar / sidebar layout */
    --nav-h:         56px;
 
    /* Lime CTA */
    --lime-bright:   #b3f0f4;
    --lime-glow:     rgba(166, 237, 242, 0.38);
 
    /* Primary tints */
    --primary-dim:   rgba(11,28,81, 0.08);
 
    /* Info badge */
    --info-bg:       #edfbfc;
 
    /* Navy hierarchy */
    --navy-dark2:    #081439;
}

/* =============================================
   DARK MODE
   ============================================= */
[data-theme="dark"] {
    /* ── Surfaces ── */
    --bg:             #02040c;
    --bg-card:        #030714;
    --surface:        #030714;
    --surface2:       #040a1c;

    /* ── Borders ── */
    /* FIX: was rgba(0,0,0,...) which disappears on dark backgrounds */
    --border:         rgba(255,255,255,0.08);
    --border-theme:   rgba(255,255,255,0.07);
    --border2:        rgba(255,255,255,0.13);
    --border-focus:   rgba(11,28,81,.45);

    /* ── Text ── */
    --text1:          #e8f1fb;
    --txt-hi:         #e8f1fb;
    --text2:          #9199b1;
    --txt-mid:        #79829f;
    --text3:          #48557d;
    --txt-lo:         #3c4974;

    /* ── Navy inverted to light ── */
    --navy:           #c2c6d4;
    --navy-light:     #9da4b9;
    --navy-mid:       #79829f;
    /* FIX: dark1/dark2 were missing — invert to lighter tones in dark mode */
    --navy-dark:      #546085;
    --navy-dark1:     #606b8e;
    --navy-dark2:     #858ea8;

    /* ── VP / teal variants ── */
    /* FIX: these had no dark override */
    --vp-teal:        #6d7797;
    --vp-teal-mid:    #858ea8;
    --vp-dark:        #b6bbcb;
    --vp-dark2:       #9da4b9;

    /* ── Lime / info ── */
    /* FIX: lime-bright had no dark override */
    --lime-bright:    #aaeef3;
    --lime-dim:       rgba(166,237,242,0.22);
    --lime-glow:      rgba(166,237,242,0.40);

    /* ── Brand tints ── */
    --red-light:      rgba(11,28,81,0.20);
    --red-mid:        rgba(11,28,81,0.30);
    /* FIX: red-dark / red-darker had no dark override */
    --red-dark:       #6d7797;
    --red-darker:     #9199b1;

    --primary-dim:    rgba(11,28,81,0.18);
    --primary-mid:    rgba(11,28,81,0.25);

    /* FIX: info-brand had no dark override */
    --info-brand:     #afeff3;
    --info-bg:        rgba(166,237,242,0.15);
    --info-dim:       rgba(166,237,242,0.18);

    /* ── Semantic states ── */
    /* FIX: --success/warn/danger text colors were missing in dark mode */
    --success:        #4cbb82;
    --success-bg:     #092415;
    --warn:           #f0b429;
    --warn-bg:        #201500;
    --danger:         #e05c5c;
    --danger-bg:      #1e0808;

    /* ── Shadows ── */
    --shadow:         0 2px 14px rgba(0,0,0,0.45);
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.50);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.55);
    --shadow-xl:      0 16px 64px rgba(0,0,0,0.65);
}