:root {
    /* === PRIMARY (Pink-based) === */
    --primary-color-lighter: #f05fa3 !important; /* lighter pink */
    --primary-color: #d40a70 !important; /* main pink */
    --primary-color-hover: #ad085c; /* darker hover */
    --primary-dark-color: #131416; /* deep pink */

    --primary-text-color: white;

    /* === SECONDARY / ACCENT === */
    --secondary-lighter-color: #262626;
    --secondary-oso: #ad085c;
    --accent: #d40a70;

    /* === GOLDEN -> PINK GRADIENTS === */
    --golden-gradient: linear-gradient(to bottom, #d40a70, #ad085d);
    --golden-solid: #e33c8f;
    --gold-dark-solid: #7a043f;

    /* === DARK UI === */
    --input-dark-color: #181b1f;
    --card-dark: #1d1d1d;
    --sidebar-active-color: white;

    /* === LOGIN GRADIENTS (Pink Version) === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(212, 10, 112, 0.7) 0%,
        rgba(40, 39, 47, 0.66) 31%,
        var(--background-950) 100%
    );

    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(212, 10, 112, 0.7) 0%,
        rgba(212, 10, 112, 0.55) 13%,
        rgba(34, 34, 34, 0.72) 27%,
        rgba(38, 38, 38, 1) 53%
    );

    /* === TEXT & BACKGROUND === */
    --text: hsl(340, 40%, 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(0, 0%, 12%);
    --background-900: hsl(0, 0%, 10%);
    --background-950: #0d0d0d;

    /* === BRAND TONES === */
    --primary-oso: hsl(340, 60%, 80%);
    --main-text: white;
}