@font-face {
    font-family: "Prasia";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/WarsOfPrasia.woff2") format("woff2");
}

:root:root {
    --white: #0b0b14;
    --bone: #0e0e18;
    --ivory: #12121d;
    --parchment: #171724;
    --stone-50: #08080f;
    --stone-100: #1c1c2a;
    --stone-200: #242436;
    --stone-300: #2f2f44;
    --stone-400: #4a4a63;
    --stone-500: #6f6f8a;
    --stone-600: #9a9ab0;
    --stone-700: #c2c2d2;
    --stone-800: #e2e2ec;
    --stone-900: #f4f4fa;
    --white-rgb: 255 255 255;

    --page-bg: #050509;
    --has-border-inset: rgba(255, 255, 255, 0.05);
    --has-border-inner: rgba(255, 255, 255, 0.03);

    --font-display: "Prasia", Georgia, serif;
    --font-heading: "Prasia", Georgia, serif;
    --font-body: "Prasia", Georgia, serif;

    --gold: #d3051d;
    --gold-rgb: 211 5 29;
    --gold-bg: rgba(211, 5, 29, .10);
    --gold-soft: #ff3b4f;
    --primary: #d3051d;
    --primary-bg: rgba(211, 5, 29, .10);
    --champ-accent: #d3051d;

    --red: #d3051d;
    --red-rgb: 211 5 29;
    --red-bg: rgba(211, 5, 29, .08);
    --blue: #4f7fb8;
    --blue-rgb: 79 127 184;
    --blue-bg: rgba(79, 127, 184, .08);

    --danger: #c0102a;
    --danger-hover: #8a0010;
    --danger-bg: rgba(192, 16, 42, .12);
    --error: #e0334a;
    --success: #2f9e63;
    --success-rgb: 47 158 99;
    --success-bg: rgba(47, 158, 99, .10);
    --success-bright: #3fce80;

    --live: #2f9e63;
    --live-bg: rgba(47, 158, 99, .10);
    --twitch: #8b6cc1;
    --twitch-bg: rgba(139, 108, 193, .08);
    --yt: #d3051d;
    --yt-bg: rgba(211, 5, 29, .08);

    --silver: #c0c8d8;
    --silver-bg: rgba(192, 200, 216, .08);
    --bronze: #c08a4c;
    --bronze-bg: rgba(192, 138, 76, .08);

    --grade-s: #d3051d;
    --grade-a: #c08a4c;
    --grade-b: #8b6cc1;
    --grade-c: #4f7fb8;
    --grade-d: #6f6f8a;

    --rare: #4f7fb8;
    --rare-bg: rgba(79, 127, 184, .08);
    --rare-glow: rgba(79, 127, 184, .40);
    --epic: #8b6cc1;
    --epic-bg: rgba(139, 108, 193, .08);
    --epic-glow: rgba(139, 108, 193, .45);
    --legend: #d3051d;
    --legend-bg: rgba(211, 5, 29, .12);
    --legend-glow: rgba(211, 5, 29, .50);

    --enchant-low: #2f9e63;
    --enchant-mid: var(--rare);
    --enchant-high: var(--epic);
    --enchant-top: var(--bronze);
    --enchant-max: #d3051d;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
    --shadow-card: 0 8px 28px rgba(0, 0, 0, .55);
    --shadow-dropdown:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 16px 48px rgba(0, 0, 0, .65);
    --shadow-modal:
        0 0 0 1px rgba(255, 255, 255, .07),
        0 24px 80px rgba(0, 0, 0, .75);

    --sidebar-item-fg: rgba(200, 190, 180, .45);
    --sidebar-item-hover-bg: rgba(211, 5, 29, .08);
    --sidebar-item-hover-fg: #f4f4fa;
    --sidebar-item-hover-shadow: inset 2px 0 0 rgba(211, 5, 29, .55);
    --sidebar-item-active-bg: rgba(211, 5, 29, .14);
    --sidebar-item-active-fg: #ffffff;
    --sidebar-item-active-icon: #d3051d;
    --sidebar-item-active-shadow: inset 2px 0 0 #d3051d;
    --sidebar-item-badge-fg: #ffffff;
    --sidebar-item-focus-ring: rgba(211, 5, 29, .45);

    --radius-sm: 0.25rem;
    --radius-md: 0.3rem;
    --radius-lg: 0.35rem;
    --radius-xl: 0.5rem;
    --radius-2xl: 0.65rem;
}