:root {
    --gradientDegree: 76.22deg;
    --white: #ffffff;
    --black: #000000;
    --red: #c20202;
    --bronze: #aa5d38;
    --silver: #808698;
    --gold: #da8a17;
    --platinum: #72cdd4;
}

html[dir='rtl']:root {
    --gradientDegree: -76.22deg;
}

html[theme='dark']:root,
.force-dark {
    --white-black: #ffffff;
    --black-white: #000000;

    --event-card-gradient: linear-gradient(76.22deg, #52360a -6.75%, #251c00 94.73%);

    --bet-boost-gradient: linear-gradient(to bottom, var(--paper-dark) 0%, var(--primary-dark) 100%);
    --product-gradient: linear-gradient(76.22deg, #52360a -6.75%, #251c00 94.73%);

    --main-background: #090705;

    --paper-main: #0d0d0d;
    --paper-dark: #221d13;
    --papaer-tertiary: #171614;
    --paper-light: #363229;
    --paper-dark-mix: var(--paper-dark);
    --paper-light-mix: var(--paper-light);

    --primary-main: #e1b60d;
    --primary-dark: #313015;
    --primary-dark-mix: var(--primary-dark);
    --primary-main-mix: linear-gradient(180deg, var(--primary-main) 0%, #e9ae1d 100%);

    --secondary-main: #333333;
    --secondary-dark: #4c4c4c;
    --secondary-light: #858585;
    --secondary-main-mix: var(--secondary-main);

    --tertiary-light: #fff740;
    --tertiary-main: #fff740;
    --tertiary-main-mix: linear-gradient(180deg, var(--tertiary-main) 0%, #e9ae1d 100%);

    --hover-main: var(--secondary-main);

    --disabled-main: var(--secondary-dark);
    --disabled-dark: var(--secondary-main);

    --text-main: #ffffff;
    --text-dark: var(--paper-main);
    --text-top-card: var(--white);

    --text-secondary: var(--primary-main);
    --text-secondary-mix: var(--primary-main);
    --text-handicap: var(--primary-main);
    --text-tertiary: #eae5c8;

    --text-disabled-main: var(--secondary-light);
    --text-disabled-dark-mix: var(--secondary-main-mix);
    --text-disabled-light: var(--secondary-light);

    --error-main: #c20202;
    --error-dark: #2d0000;

    --success-main: #00c150;
    --success-dark: #002710;

    --info-main: #fcd81b;
    --info-dark: #302800;

    --invertBackground: invert(0);
    --invertColorSignUp: invert(0);
    --invertColor: invert(0);
}

html[theme='light']:root,
.force-light {
    --white-black: #000000;
    --black-white: #ffffff;

    --event-card-gradient: linear-gradient(76.22deg, #eceac4 -6.75%, #ffffec 94.73%);

    --bet-boost-gradient: linear-gradient(to bottom, var(--paper-dark) 0%, var(--primary-dark) 100%);
    --product-gradient: linear-gradient(76.22deg, #eceac4 -6.75%, #ffffec 94.73%);

    --main-background: #d9d9d9;

    --paper-main: #ffffff;
    --paper-dark: #f2f2f2;
    --papaer-tertiary: #e5e5e5;
    --paper-light: #d9d9d9;
    --paper-dark-mix: var(--paper-dark);
    --paper-light-mix: var(--paper-light);

    --primary-main: #e1b60d;
    --primary-dark: #fff2d5;
    --primary-dark-mix: var(--primary-dark);
    --primary-main-mix: linear-gradient(180deg, #fff740 0%, #ffaf01 100%);

    --secondary-main: #eaeaea;
    --secondary-dark: #b3b3b3;
    --secondary-light: #808080;
    --secondary-main-mix: var(--secondary-main);

    --tertiary-light: var(--main-background);
    --tertiary-main: #ffaf01;
    --tertiary-main-mix: linear-gradient(180deg, #fff740 0%, #ffaf01 100%);

    --hover-main: var(--secondary-main);

    --disabled-main: var(--secondary-dark);
    --disabled-dark: var(--secondary-main);

    --text-main: #000000;
    --text-dark: #000000;
    --text-top-card: var(--black);

    --text-secondary: var(--primary-main);
    --text-secondary-mix: var(--primary-main);
    --text-handicap: var(--text-main);
    --text-tertiary: #4b4631;

    --text-disabled-main: var(--secondary-light);
    --text-disabled-dark-mix: var(--secondary-main-mix);
    --text-disabled-light: var(--secondary-light);

    --error-main: #c20202;
    --error-dark: #fce5e5;

    --success-main: #00943d;
    --success-dark: #d5fde5;

    --info-main: #a97400;
    --info-dark: #fcf4cc;

    --invertBackground: invert(0);
    --invertColorSignUp: invert(0);
    --invertColor: invert(0);
}

html .dp__theme_light {
    --dp-background-color: var(--paper-main);
    --dp-text-color: var(--text-main);
    --dp-primary-color: var(--primary-main);
    --dp-primary-text-color: var(--text-dark);
    --dp-secondary-color: var(--text-disabled-light);
    --dp-border-color: var(--secondary-dark);
    --dp-menu-border-color: var(--secondary-dark);
    --dp-range-between-dates-background-color: var(--paper-light-mix);
    --dp-range-between-dates-text-color: var(--text-disabled-light);
    --dp-range-between-border-color: var(--paper-light);
}