/* Vorten theme for Calagopus (games.vorten.ru) — same palette as the Proxmox theme
   (infra/proxmox-theme): graphite surfaces, red only as accent, monospace type.
   Injected by NPM (sub_filter) as <link rel=stylesheet href=/assets/vorten-theme.css>. */
:root,
:root[data-mantine-color-scheme="dark"] {
    --vt-red: #ff4d4d;
    --mantine-font-family: "Space Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --mantine-font-family-headings: var(--mantine-font-family);
    --mantine-radius-default: 4px;

    /* graphite instead of Mantine's neutral dark scale */
    --mantine-color-dark-0: #ececec;
    --mantine-color-dark-1: #d0d0d0;
    --mantine-color-dark-2: #8e8e93;
    --mantine-color-dark-3: #6e6e73;
    --mantine-color-dark-4: #48484a;
    --mantine-color-dark-5: #2c2c2e;
    --mantine-color-dark-6: #1c1c1e;
    --mantine-color-dark-7: #141415;
    --mantine-color-dark-8: #0b0b0c;
    --mantine-color-dark-9: #060607;
    --mantine-color-body: #0b0b0c;
    --mantine-color-text: #ececec;
    --mantine-color-dimmed: #8e8e93;
    --mantine-color-default: #1c1c1e;
    --mantine-color-default-hover: #26262a;
    --mantine-color-default-border: #2c2c2e;
    --mantine-color-placeholder: #6e6e73;

    /* primary: blue -> vorten red */
    --mantine-primary-color-0: #ffe8e8;
    --mantine-primary-color-1: #ffcfcf;
    --mantine-primary-color-2: #ff9e9e;
    --mantine-primary-color-3: #ff7070;
    --mantine-primary-color-4: #ff5a5a;
    --mantine-primary-color-5: #ff4d4d;
    --mantine-primary-color-6: #e03a3a;
    --mantine-primary-color-7: #c42b2b;
    --mantine-primary-color-8: #9a2c2c;
    --mantine-primary-color-9: #6e2020;
    --mantine-primary-color-filled: #c42b2b;
    --mantine-primary-color-filled-hover: #e03a3a;
    --mantine-primary-color-light: rgba(255, 77, 77, .12);
    --mantine-primary-color-light-hover: rgba(255, 77, 77, .2);
    --mantine-primary-color-light-color: #ff7070;
    --mantine-color-anchor: #ff7070;
    /* components that use the blue palette by name */
    --mantine-color-blue-filled: #c42b2b;
    --mantine-color-blue-filled-hover: #e03a3a;
    --mantine-color-blue-light: rgba(255, 77, 77, .12);
    --mantine-color-blue-light-hover: rgba(255, 77, 77, .2);
    --mantine-color-blue-light-color: #ff7070;
    --mantine-color-blue-outline: #ff4d4d;
    --mantine-color-blue-text: #ff7070;
}

body {
    background-color: #0b0b0c;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* page titles: terminal prompt like the other Vorten UIs */
h1.mantine-Title-root::before,
.mantine-Title-root[data-order="1"]::before {
    content: "❯ ";
    color: var(--vt-red);
}

/* focus ring in the accent colour */
:focus-visible {
    outline-color: var(--vt-red) !important;
}
::selection {
    background: rgba(255, 77, 77, .35);
}
* {
    scrollbar-color: #3a3a3d transparent;
}

/* monospace everywhere (Tailwind sets its own sans stack on body) */
body,
button,
input,
textarea,
select {
    font-family: var(--mantine-font-family) !important;
}

/* cards (server list etc.) use Tailwind hover:bg-white/2 — a 2% translucent white that replaces
   their solid background, so the page grid shows through. Keep them solid, just lighter. */
[class*="hover:bg-white/"]:hover {
    background-color: #232326 !important;
}