:root {

    /* =========================
       COLORS
    ========================= */

    --nf-primary: #5B3DF5;
    --nf-primary-hover: #6D52FF;

    --nf-secondary: #8B5CF6;

    --nf-success: #22C55E;
    --nf-warning: #F59E0B;
    --nf-danger: #EF4444;
    --nf-info: #06B6D4;

    --nf-bg: #F5F7FB;
    --nf-bg-secondary: #FFFFFF;

    --nf-sidebar-bg:
        linear-gradient(
            180deg,
            #5B3DF5 0%,
            #4C35D9 100%
        );

    --nf-card-bg: #FFFFFF;

    --nf-border: #E5E7EB;

    --nf-text: #111827;
    --nf-text-light: #6B7280;
    --nf-text-white: #FFFFFF;

    /* =========================
       SHADOWS
    ========================= */

    --nf-shadow-sm:
        0 1px 2px rgba(0,0,0,0.04);

    --nf-shadow-md:
        0 4px 12px rgba(0,0,0,0.08);

    --nf-shadow-lg:
        0 10px 30px rgba(0,0,0,0.12);

    --nf-shadow-xl:
        0 20px 50px rgba(0,0,0,0.16);

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

    --nf-radius-xs: 6px;
    --nf-radius-sm: 10px;
    --nf-radius-md: 16px;
    --nf-radius-lg: 22px;
    --nf-radius-xl: 30px;

    /* =========================
       SPACING
    ========================= */

    --nf-space-xs: 4px;
    --nf-space-sm: 8px;
    --nf-space-md: 16px;
    --nf-space-lg: 24px;
    --nf-space-xl: 32px;
    --nf-space-2xl: 48px;

    /* =========================
       TYPOGRAPHY
    ========================= */

    --nf-font:
        'Inter',
        sans-serif;

    --nf-text-xs: 12px;
    --nf-text-sm: 14px;
    --nf-text-md: 16px;
    --nf-text-lg: 20px;
    --nf-text-xl: 28px;
    --nf-text-2xl: 40px;

    /* =========================
       TRANSITIONS
    ========================= */

    --nf-transition-fast: 0.15s ease;
    --nf-transition-normal: 0.25s ease;
    --nf-transition-slow: 0.4s ease;

}