@layer theme {
    :root,
    :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
        --color-yellow-400: oklch(85.2% 0.199 91.936);
        --color-green-500: oklch(72.3% 0.219 149.579);
        --color-indigo-300: oklch(78.5% 0.115 274.713);
        --color-indigo-400: oklch(67.3% 0.182 276.935);
        --color-indigo-500: oklch(58.5% 0.233 277.117);
        --color-purple-500: oklch(62.7% 0.265 303.9);
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-black: #000;
        --color-white: #fff;
        --spacing: 0.25rem;
        --container-md: 28rem;
        --text-xs: 0.75rem;
        --text-xs--line-height: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm--line-height: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base--line-height: calc(1.5 / 1);
        --text-lg: 1.125rem;
        --text-lg--line-height: calc(1.75 / 1.125);
        --text-xl: 1.25rem;
        --text-xl--line-height: calc(1.75 / 1.25);
        --text-2xl: 1.5rem;
        --text-2xl--line-height: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl--line-height: calc(2.25 / 1.875);
        --text-4xl: 2.25rem;
        --text-4xl--line-height: calc(2.5 / 2.25);
        --text-5xl: 3rem;
        --text-5xl--line-height: 1;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-black: 900;
        --radius-sm: 0.25rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-3xl: 1.5rem;
        --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);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono);
        --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('./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('./images/header-glow.png');
        --header-border-color: #281c57;
        --header-usermenu-bg-color: #120c26;
        --header-usermenu-bg-image: url('./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('./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('./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;
    }
}

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