:root{

    /* ==========================================
       BRAND
    ========================================== */

    --spi-primary:#22C55E;
    --spi-primary-hover:#16A34A;
    --spi-primary-light:#DCFCE7;

    --spi-secondary:#0EA5E9;
    --spi-secondary-hover:#0284C7;
    --spi-secondary-light:#E0F2FE;

    /* ==========================================
       STATUS
    ========================================== */

    --spi-success:#22C55E;
    --spi-warning:#F59E0B;
    --spi-danger:#EF4444;
    --spi-info:#38BDF8;

    /* ==========================================
       BACKGROUND
    ========================================== */

    --spi-bg:#F8FAFC;
    --spi-card:#FFFFFF;
    --spi-dark:#111827;

    /* ==========================================
       TEXT
    ========================================== */

    --spi-text:#0F172A;
    --spi-text-secondary:#475569;
    --spi-text-muted:#94A3B8;

    /* ==========================================
       BORDER
    ========================================== */

    --spi-border:#E5E7EB;

    /* ==========================================
       RADIUS
    ========================================== */

    --spi-radius-xs:6px;
    --spi-radius-sm:10px;
    --spi-radius-md:14px;
    --spi-radius-lg:20px;
    --spi-radius-xl:28px;

    /* ==========================================
       SHADOW
    ========================================== */

    --spi-shadow-xs:0 2px 6px rgba(0,0,0,.05);

    --spi-shadow-sm:0 6px 18px rgba(0,0,0,.08);

    --spi-shadow-md:0 15px 35px rgba(0,0,0,.12);

    --spi-shadow-lg:0 30px 80px rgba(0,0,0,.15);

    /* ==========================================
       TRANSITION
    ========================================== */

    --spi-transition:.30s ease;

    /* ==========================================
       LAYOUT
    ========================================== */

    --spi-sidebar-width:280px;

    --spi-navbar-height:75px;

}