:root {
    /* =============================================
       BOOTSTRAP CORE
       ============================================= */
    --bs-primary:     #033287;
    --bs-info:        #c5e2fc;

    --bs-primary-rgb: 3, 50, 135;
    --bs-info-rgb:    197, 226, 252;

    --bs-info-light:                    #d4e9fd;
    --bs-info-light1:                   #cee6fc;
    --bs-primary-light:                 #4265a5;
    --bs-primary-light1:                #295199;

    --bs-info-light-rgb:                197, 226, 252;
    --bs-primary-light-rgb:             3, 50, 135;

    --bs-info-active-bg:                #9eb5ca;
    --bs-primary-active-bg:             #02286c;
    --bs-btn-active-border-color-info:      #94aabd;
    --bs-btn-active-border-color-primary:   #022665;
    --bs-btn-disabled-bg-info:              #d9ecfd;
    --bs-btn-disabled-bg-primary:           #5b7ab1;
    --bs-btn-disabled-border-color-info:    #d9ecfd;
    --bs-btn-disabled-border-color-primary: #5b7ab1;
    --bs-success-text-emphasis-primary:     #033a9b;
    --bs-btn-color-info:                    #94aabd;

    /* =============================================
       VP / TEAL VARIANTS
       ============================================= */
    --vp-teal:      #174291;
    --vp-teal-mid:  #30579d;
    --vp-dark:      #011436;
    --vp-dark2:     #021c4a;

    /* =============================================
       NAVY HIERARCHY
       ============================================= */
    --navy:       #033287;
    --navy-mid:   #1c4793;
    --navy-light: #355b9f;
    --navy-dark:  #032d7a;
    --navy-dark1: #032b73;
    --navy-dark2: #02235f;

    /* =============================================
       LIME / INFO
       ============================================= */
    --lime:        #c5e2fc;
    --lime-bright: #cee6fc;
    --lime-dim:    rgba(197, 226, 252, 0.18);
    --lime-glow:   rgba(197, 226, 252, 0.38);

    /* =============================================
       LANDING PAGE CHROME
       ============================================= */
    --primary:        #033287;
    --primary-r:      3;
    --primary-g:      50;
    --primary-b:      135;
    --primary-dark:   #032b73;
    --primary-light:  #8ea3c9;
    --primary-dim:    rgba(3,50,135,.10);
    --primary-mid:    rgba(3,50,135,.18);
    --primary-glow:   rgba(3,50,135,.28);

    --info:           #c5e2fc;
    --info-r:         197;
    --info-g:         226;
    --info-b:         252;
    --info-dark:      #9eb5ca;
    --info-dim:       rgba(197,226,252,.12);
    --info-glow:      rgba(197,226,252,.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(3,50,135,0.10);
    --border-focus:   rgba(3,50,135,.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:            #033287;
    --red-light:      #cdd6e7;
    --red-mid:        #748ebd;
    --red-dark:       #032b73;
    --red-darker:     #02235f;

    --info-brand:     #c5e2fc;
    --info-bg:        #f3f9fe;

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

    /* Theme borders */
    --border2:        rgba(3,50,135,0.17);

    /* Text hierarchy */
    --text1:          #033080;
    --text2:          #4f6ea6;
    --text3:          #8ea2c6;

    /* 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(3,50,135,0.07);
    --shadow-xl:      0 16px 64px rgba(3,50,135,0.16);

    /* Topbar / sidebar layout */
    --nav-h:         56px;
 
    /* Lime CTA */
    --lime-bright:   #cee6fc;
    --lime-glow:     rgba(197, 226, 252, 0.38);
 
    /* Primary tints */
    --primary-dim:   rgba(3,50,135, 0.08);
 
    /* Info badge */
    --info-bg:       #f3f9fe;
 
    /* Navy hierarchy */
    --navy-dark2:    #02235f;
}

/* =============================================
   DARK MODE
   ============================================= */
[data-theme="dark"] {
    /* ── Surfaces ── */
    --bg:             #000814;
    --bg-card:        #010d22;
    --surface:        #010d22;
    --surface2:       #01122f;

    /* ── 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(3,50,135,.45);

    /* ── Text ── */
    --text1:          #e8f1fb;
    --txt-hi:         #e8f1fb;
    --text2:          #8ea3c9;
    --txt-mid:        #748ebd;
    --text3:          #4265a5;
    --txt-lo:         #355b9f;

    /* ── Navy inverted to light ── */
    --navy:           #c0cce1;
    --navy-light:     #9aadcf;
    --navy-mid:       #748ebd;
    /* FIX: dark1/dark2 were missing — invert to lighter tones in dark mode */
    --navy-dark:      #4f70ab;
    --navy-dark1:     #5b7ab1;
    --navy-dark2:     #8199c3;

    /* ── VP / teal variants ── */
    /* FIX: these had no dark override */
    --vp-teal:        #6884b7;
    --vp-teal-mid:    #8199c3;
    --vp-dark:        #b3c2db;
    --vp-dark2:       #9aadcf;

    /* ── Lime / info ── */
    /* FIX: lime-bright had no dark override */
    --lime-bright:    #c8e3fc;
    --lime-dim:       rgba(197,226,252,0.22);
    --lime-glow:      rgba(197,226,252,0.40);

    /* ── Brand tints ── */
    --red-light:      rgba(3,50,135,0.20);
    --red-mid:        rgba(3,50,135,0.30);
    /* FIX: red-dark / red-darker had no dark override */
    --red-dark:       #6884b7;
    --red-darker:     #8ea3c9;

    --primary-dim:    rgba(3,50,135,0.18);
    --primary-mid:    rgba(3,50,135,0.25);

    /* FIX: info-brand had no dark override */
    --info-brand:     #cbe5fc;
    --info-bg:        rgba(197,226,252,0.15);
    --info-dim:       rgba(197,226,252,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);
}