:root {
    /* === Primary Colors === */
    --primary-color-lighter: #ffb366 !important; /* lighter orange */
    --primary-color: #ff7a00 !important; /* main orange */
    --primary-color-hover: #cc6200; /* darker hover orange */
    --primary-text-color: white;
    --primary-dark-color: #131416;
    --secondary-lighter-color: #262626;
    --input-dark-color: #181b1f;

    /* === Gradients and Accents === */
    --golden-gradient: linear-gradient(to bottom, #ff7a00, #cc6200);
    --golden-solid: #ff9f43;
    --gold-dark-solid: #cc6200;
    --card-dark: #1d1d1d;
    --sidebar-active-color: white;

    /* === Login Backgrounds === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(204, 98, 0, 0.68) 0%,
        rgba(60, 40, 20, 0.65) 31%,
        var(--background-950) 100%
    );
    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(204, 98, 0, 0.69) 0%,
        rgba(204, 98, 0, 0.56) 13%,
        rgba(34, 34, 34, 0.71) 27%,
        rgba(38, 38, 38, 1) 53%
    );

    /* === Neutral and Background Colors === */
    --text: hsl(47, 39%, 91%);
    --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;

    /* === Accent System === */
    --primary-oso: hsl(30, 90%, 65%);
    --secondary-oso: #cc6200;
    --accent: #ff9f43;

    --main-text: white;
}