@import url("https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap");

:root:root,
:root:root[data-theme="dark"],
:root:root[data-theme="light"] {
    color-scheme: dark;

    --page-bg: #080707;
    --has-border-inset: rgba(217, 188, 129, 0.06);
    --has-border-inner: rgba(217, 188, 129, 0.04);

    --white: #0e0d0e;
    --bone: #131011;
    --ivory: #181415;
    --parchment: #1e191a;
    --stone-50: #0b0a0a;
    --stone-100: #201c1d;
    --stone-200: #2e292a;
    --stone-300: #433d3e;
    --stone-400: #7d6a66;
    --stone-500: #9d8b84;
    --stone-600: #b5a29a;
    --stone-700: #cdbdb2;
    --stone-800: #e6d9cc;
    --stone-900: #f3e9dd;
    --white-rgb: 14 13 14;

    --font-display: "Cormorant SC", "Cormorant Garamond", Georgia, serif;
    --font-heading: "Cormorant SC", Georgia, serif;
    --font-body: "PT Serif", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --font-mark: "Cormorant SC", Georgia, serif;

    --gold: #d9bc81;
    --gold-rgb: 217 188 129;
    --gold-bg: rgba(217, 188, 129, 0.1);
    --gold-soft: #f2d39a;
    --gold-dark: #8a7340;
    --primary: #d9bc81;
    --primary-bg: rgba(217, 188, 129, 0.12);

    --blood: #8d050b;
    --blood-deep: #5e0307;
    --crimson: #f01726;
    --crimson-rgb: 240 23 38;
    --ember: #f01726;
    --ember-rgb: 240 23 38;

    --live: #5fcf7f;
    --live-bg: rgba(95, 207, 127, 0.12);
    --twitch: #a98be0;
    --twitch-bg: rgba(169, 139, 224, 0.12);
    --yt: #e5655c;
    --yt-bg: rgba(229, 101, 92, 0.12);

    --red: #c3141f;
    --red-rgb: 195 20 31;
    --red-bg: rgba(195, 20, 31, 0.16);
    --blue: #6aa6d6;
    --blue-rgb: 106 166 214;
    --blue-bg: rgba(106, 166, 214, 0.12);
    --danger: #e0303c;
    --danger-hover: #f04450;
    --danger-bg: rgba(224, 48, 60, 0.14);
    --danger-text: #ff9aa2;
    --success: #5fcf7f;
    --success-rgb: 95 207 127;
    --success-bg: rgba(95, 207, 127, 0.12);

    --rare: #7fb2e0;
    --rare-bg: rgba(127, 178, 224, 0.12);
    --rare-glow: rgba(127, 178, 224, 0.5);
    --epic: #b88be6;
    --epic-bg: rgba(184, 139, 230, 0.12);
    --epic-glow: rgba(184, 139, 230, 0.5);
    --legend: #f2d39a;
    --legend-bg: rgba(242, 211, 154, 0.14);
    --legend-glow: rgba(242, 211, 154, 0.6);

    --grade-s: #f2d39a;
    --grade-a: #ef6a5a;
    --grade-b: #7fb2e0;
    --grade-c: #7fd6a0;
    --grade-d: #a89c96;
    --silver: #c9ccd2;
    --silver-bg: rgba(201, 204, 210, 0.12);
    --bronze: #c98a5a;
    --bronze-bg: rgba(201, 138, 90, 0.14);

    --enchant-low: #7fd6a0;
    --enchant-mid: var(--rare);
    --enchant-high: var(--epic);
    --enchant-top: var(--gold-soft);
    --enchant-max: var(--crimson);

    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 99px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 14px 36px -16px rgba(0, 0, 0, 0.9);
    --shadow-dropdown:
        0 0 0 1px rgba(217, 188, 129, 0.16),
        0 18px 44px rgba(0, 0, 0, 0.75);
    --shadow-modal:
        0 0 0 1px rgba(217, 188, 129, 0.2),
        0 30px 80px rgba(0, 0, 0, 0.85);

    --el-line: rgba(217, 188, 129, 0.16);
    --el-line-strong: rgba(217, 188, 129, 0.34);
    --el-line-gold: rgba(217, 188, 129, 0.3);
    --el-glow: rgba(217, 188, 129, 0.16);
    --el-glass: linear-gradient(180deg, rgba(24, 20, 21, 0.78), rgba(10, 9, 9, 0.88));
    --el-glass-soft: linear-gradient(180deg, rgba(22, 19, 20, 0.7), rgba(10, 9, 9, 0.8));
    --el-panel: var(--el-glass);
    --el-red-btn: linear-gradient(180deg, #7d1019, #53080e);
    --el-ring: 0 0 0 1px rgba(217, 188, 129, 0.24), inset 0 1px 0 rgba(217, 188, 129, 0.08);
    --el-bg: url("../images/bg.webp");
    --el-side: url("../images/side-bg.webp");
}