:root {
    /* === PRIMARY (Monochrome) === */
    --primary-color-lighter: #ffffff; /* white highlight */
    --primary-color: #3a7bd5    ; /* light gray primary */
    --primary-color-hover: #cccccc; /* hover */
    --primary-dark-color: #0a0a0a; /* near black */

    --primary-text-color: #000000;

    /* === SECONDARY / ACCENT === */
    --secondary-lighter-color: #2a2a2a;
    --secondary-oso: #ffffff;
    --accent: #3a7bd5;

    /* === MONOCHROME GRADIENTS === */
    --golden-gradient: linear-gradient(to bottom, #3a7bd5, #2a5ca8);
    --golden-solid: #3a7bd5;
    --gold-dark-solid: #1a1a1a;

    /* === DARK UI === */
    --input-dark-color: #121212;
    --card-dark: #181818;
    --sidebar-active-color: #ffffff;

    /* === LOGIN GRADIENTS (Black & White) === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(30, 30, 30, 0.9) 0%,
        rgba(15, 15, 15, 0.8) 40%,
        var(--background-950) 100%
    );

    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(200, 200, 200, 0.65) 15%,
        rgba(40, 40, 40, 0.75) 35%,
        rgba(10, 10, 10, 1) 65%
    );

    /* === TEXT & BACKGROUND === */
    --text: #eaeaea;

    --background-50: #f5f5f5;
    --background-100: #e5e5e5;
    --background-200: #d4d4d4;
    --background-300: #a3a3a3;
    --background-400: #737373;
    --background-500: #525252;
    --background-600: #404040;
    --background-700: #262626;
    --background-800: #171717;
    --background-900: #0f0f0f;
    --background-950: #050505;

    /* === BRAND TONES === */
    --primary-oso: #ffffff;
    --main-text: #ffffff;
}