@import "custom.css";
@import "games.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@layer theme {
    :root,
    :host {
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --default-transition-duration: 150ms;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        --font-script: 'Roboto', sans-serif;
        --color-primary: #714ee3;
        --body-background: #160f30;
        --text-color-body: #f6f3f4;
        --text-muted: #9575ff;
        --link-color: #7c86ff;
        --link-color-hover: #eeeeee;
        --content-border-color: #281c57;
        --content-background-color: #281c57;
        --content-background-glow: url('/assets/default/images/header-glow.png');
        --tooltip-glow: 0px 0px 15px 0px #714ee3;
        --coin-glow: 0px 0px 8px 3px rgba(238, 79, 36, 0.55);
        --base-gradient: linear-gradient(45deg, #332471, #171033);
        --accent-gradient: linear-gradient(45deg, #fb36f4, #255dff);
        --green-gradient: linear-gradient(45deg, #a8fe3b, #28bd04);
        --orange-gradient: linear-gradient(45deg, #ffcf65, #f1841a);
        --hero-bg-color: #2c1e60;
        --header-bg-color: #160f30;
        --header-bg-image: url('/assets/default/images/header-glow.png');
        --header-border-color: #281c57;
        --header-usermenu-bg-color: #120c26;
        --header-usermenu-bg-image: url('/assets/default/images/header-glow.png');
        --header-usermenu-icon-color: var(--color-primary);
        --header-usermenu-border-color: #281c57;
        --header-usermenu-dropdown-bg-hover: #281c57;
        --header-usermenu-dropdown-bg-active: #281c57;
        --main-bg-image: url('/assets/default/images/background-glow.png');
        --sidebar-bg-color: #120c26;
        --sidebar-bg-hover-color: #1e1542;
        --sidebar-bg-active-color: #1e1542;
        --sidebar-border-color: #281c57;
        --sidebar-icon-color: var(--color-primary);
        --sidebar-icon-color-active: #ffffff;
        --sidebar-link-color: #ffffff;
        --footer-bg-color-active: #1e1542;
        --footer-border-color: #281c57;
        --footer-border-color-active: #5c3fbd;
        --footer-icon-color: var(--color-primary);
        --list-element-bg: linear-gradient(0deg, rgba(50, 34, 110, 1) 0%, rgba(22, 15, 48, 1) 100%);
        --list-element-border-color: #362578;
        --list-element-highlight-border-color: #9366eb;
        --list-element-highlight-glow: 0px 0px 15px 0px #6d4cdb;
        --card-bg-color: #2c1e60;
        --card-bg-image: url('/assets/default/images/card-bg-glow.png');
        --badge-exclusive-bg: var(--accent-gradient);
        --badge-exclusive-text-color: #221749;
        --badge-green-bg: var(--green-gradient);
        --badge-green-text-color: #2c1e60;
        --badge-orange-bg: var(--orange-gradient);
        --badge-orange-text-color: #2c1e60;
        --btn-highlight-bg: #160f30;
        --btn-highlight-bg-gradient: linear-gradient(160deg, rgb(40, 28, 87) 40%, rgba(255, 114, 73, 1) 100%);
        --btn-highlight-text-color: #ffffff;
        --btn-highlight-border-color: #fbb9a6;
        --btn-highlight-border-color-hover: #ffffff;
        --btn-highlight-glow: 0px 0px 10px 0px transparent;
        --btn-highlight-glow-hover: 0px 0px 10px 0px #ff997c;
        --btn-primary-bg: #ad46ff;
        --btn-primary-bg-gradient: linear-gradient(160deg, #ad46ff 40%, #615fff 100%);
        --btn-primary-text-color: #ffffff;
        --btn-primary-border-color: #ad46ff;
        --btn-primary-border-color-hover: #c985ff;
        --btn-primary-glow: 0px 0px 10px 0px transparent;
        --btn-primary-glow-hover: 0px 0px 10px 0px #ad46ff;
        --btn-outlined-border-color: #281c57;
        --theme-color-free: #00c951;
        --theme-color-duel: #ff8a3d;
        --theme-color-tournament: #c84dff;
        --theme-color-create: #4da3ff;
        --breakpoint-2xl: initial;
    }
}