:root{

    /* ==========
       Brand
    ========== */

    --primary:#2563EB;
    --primary-hover:#1D4ED8;

    --secondary:#64748B;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#0284C7;

    /* ==========
       Background
    ========== */

    --bg:#F8FAFC;
    --surface:#FFFFFF;
    --sidebar:#0F172A;

    /* ==========
       Text
    ========== */

    --text:#0F172A;
    --text-muted:#64748B;
    --text-light:#FFFFFF;

    /* ==========
       Border
    ========== */

    --border:#E2E8F0;

    /* ==========
       Radius
    ========== */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    /* ==========
       Shadow
    ========== */

    --shadow-sm:
        0 1px 2px rgba(15,23,42,.05);

    --shadow:
        0 10px 30px rgba(15,23,42,.08);

    --shadow-lg:
        0 20px 50px rgba(15,23,42,.12);

    /* ==========
       Spacing
    ========== */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;

    /* ==========
       Layout
    ========== */

    --topbar-height:72px;

    --sidebar-width:260px;

    --container:1440px;

    /* ==========
       Transition
    ========== */

    --transition:.2s ease;

}

/* =========================================================
   GLOBAL APP BACKGROUND
   PREMIUM FINTECH / BANKING STYLE
   ========================================================= */

html {
    background: #eef2f7 !important;
}

body {
    position: relative !important;
    min-height: 100vh;

    background:
        /* Blue ambient glow - top right */
        radial-gradient(
            ellipse 700px 500px at 92% 4%,
            rgba(37, 99, 235, 0.095),
            transparent 70%
        ),

        /* Navy ambient glow - left */
        radial-gradient(
            ellipse 600px 700px at -8% 35%,
            rgba(20, 33, 61, 0.065),
            transparent 70%
        ),

        /* Emerald hint - bottom right */
        radial-gradient(
            ellipse 500px 450px at 92% 92%,
            rgba(5, 150, 105, 0.045),
            transparent 70%
        ),

        /* Main canvas */
        linear-gradient(
            135deg,
            #f1f4f8 0%,
            #e9eef5 48%,
            #f3f6fa 100%
        ) !important;

    background-attachment: fixed !important;
}


/* =========================================================
   FINTECH GRID
   ========================================================= */

body::before {
    content: "";

    position: fixed !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 0 !important;

    opacity: 0.30;

    background-image:
        linear-gradient(
            rgba(20, 33, 61, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 33, 61, 0.035) 1px,
            transparent 1px
        );

    background-size: 48px 48px !important;
}


/* =========================================================
   MICRO DOT TEXTURE
   ========================================================= */

body::after {
    content: "";

    position: fixed !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 0 !important;

    opacity: 0.20;

    background-image:
        radial-gradient(
            rgba(37, 99, 235, 0.12) 0.6px,
            transparent 0.6px
        );

    background-size: 16px 16px !important;
}


/* =========================================================
   KEEP APP CONTENT ABOVE BACKGROUND
   ========================================================= */

body > *,
main,
.main-content,
.app-content,
.page-content,
.page-wrapper,
.content-wrapper {
    position: relative;
    z-index: 1;
}


/* =========================================================
   IMPORTANT:
   MAIN CONTENT MUST NOT PAINT WHITE
   ========================================================= */

.main-content,
.app-content,
.page-content,
.page-wrapper,
.content-wrapper {
    background: transparent !important;
}