:root {
    /* === PRIMARY (Vibrant Blue) === */
    --primary-color-lighter: #4da3ff !important; /* bright highlight blue */
    --primary-color: #1e6fd9 !important; /* vibrant main blue */
    --primary-color-hover: #185bb3; /* hover */
    --primary-dark-color: #131416; /* deep navy */

    --primary-text-color: white;

    /* === SECONDARY / ACCENT === */
    --secondary-lighter-color: #2a2a2a;
    --secondary-oso: #4da3ff;
    --accent: #4da3ff;

    /* === VIBRANT BLUE GRADIENTS === */
    --golden-gradient: linear-gradient(to bottom, #4da3ff, #1e6fd9);
    --golden-solid: #3b8cff;
    --gold-dark-solid: #0b2a47;

    /* === DARK UI === */
    --input-dark-color: #15181d;
    --card-dark: #1a1d23;
    --sidebar-active-color: #4da3ff;

    /* === LOGIN GRADIENTS (Vibrant Blue) === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(20, 50, 100, 0.85) 0%,
        /* Dark Steel Blue */ rgba(10, 35, 80, 0.7) 28%,
        /* Deep Navy */ var(--background-950) 100% /* Final Dark Base */
    );

    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(77, 163, 255, 0.85) 0%,
        rgba(30, 111, 217, 0.65) 14%,
        rgba(34, 34, 34, 0.75) 30%,
        rgba(18, 18, 18, 1) 55%
    );

    /* === TEXT & BACKGROUND === */
    --text: hsl(210, 60%, 92%);

    --background-50: #f2f2f2;
    --background-100: #e6e6e6;
    --background-200: #cccccc;
    --background-300: #b3b3b3;
    --background-400: #999999;
    --background-500: #808080;
    --background-600: #666666;
    --background-700: #4d4d4d;
    --background-800: hsl(220, 15%, 14%);
    --background-900: hsl(220, 15%, 10%);
    --background-950: #0b0f14;

    /* === BRAND TONES === */
    --primary-oso: hsl(210, 85%, 75%);
    --main-text: white;
}