/*
* Theme "dark_radix" - The palette, typography, and the ground every screen stands on.
*
* One of the parts css/theme/dark_radix/ is split into, by the screen each token
* serves; the screens are the ones section 0 of css/style_game_common.css
* marks its groups with, and the design studio names its slots with.
* A theme is a delta: what is not here keeps the default value.
*
* Taken from radix-ui.com itself, which paints its own pages with Radix Themes
* in the settings its element declares: accent indigo, gray slate,
* radius medium, dark appearance. So every colour below is a step of a Radix
* scale (https://www.radix-ui.com/colors) and is named in the comment beside
* it, which is what makes the set checkable: a value that is not on a scale is
* a value somebody guessed.
*
* The two greys carry the whole look. Slate 1 is the page, Slate 2 the card on
* it, Slate 3 the raised strip inside the card - three steps, and the site is
* built out of them. Lines come from Slate 6 and 7, the quiet text from Slate
* 11 and the loud text from Slate 12. Indigo shows up only where something is
* to be pressed or followed.
*
* The face is Inter and not the site's own: radix-ui.com sets its text in
* Untitled Sans, which is licensed and cannot be shipped, and Inter is the
* nearest grotesque that a font service will hand to anyone. It arrives by
* @import, which has to stand before any rule in the file.
*
* Unlike the "green" and "dark_purple" packages this one leaves --qeng-font-size
* alone: 14px is what Radix Themes calls size 2 and sets its own body text in,
* which is the size the engine already has.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* --- Surfaces ---------------------------------------------------------- */
--qeng-body-bg: #111113; /* Slate 1 - the page */
--qeng-surface-bg: #18191b; /* Slate 2 - the card on it */
--qeng-surface-warm-bg: #212225; /* Slate 3 - a raised strip inside a card */
--qeng-overlay-bg: rgba(17, 17, 19, 0.88);
--qeng-overlay-strong-bg: rgba(9, 9, 11, 0.94);
--qeng-overlay-hairline: rgba(158, 177, 255, 0.30); /* Indigo 11 */
--qeng-overlay-shadow-rgb: 0 0 0;
--qeng-text-on-overlay: #edeef0; /* Slate 12 */
--qeng-text-on-overlay-muted: #b0b4ba; /* Slate 11 */
/* --- Ink --------------------------------------------------------------- */
--qeng-text: #edeef0; /* Slate 12 */
--qeng-text-muted: #b0b4ba; /* Slate 11 */
--qeng-text-on-surface: #edeef0; /* Slate 12 */
--qeng-text-contrast: #ffffff;
/* --- Lines ------------------------------------------------------------- */
/* Radix draws a border one step above the fill it separates: Slate 6 for a
hairline, Slate 7 for the edge of a control, Slate 8 where a frame has to
be seen from across the page. */
--qeng-border: #363a3f; /* Slate 6 */
--qeng-border-strong: #5a6169; /* Slate 8 */
--qeng-grid: #2e3135; /* Slate 5 */
--qeng-border-hard: #5a6169; /* Slate 8 */
--qeng-rule: #363a3f; /* Slate 6 */
/* --- Controls ---------------------------------------------------------- */
--qeng-control-bg: #18191b; /* Slate 2 */
--qeng-control-sunken-bg: #272a2d; /* Slate 4 */
--qeng-control-text: #edeef0; /* Slate 12 */
/* --- The accent -------------------------------------------------------- */
--qeng-accent-bg: #182449; /* Indigo 3 */
--qeng-accent-line: #3a4f97; /* Indigo 7 */
/* --- Shadows ----------------------------------------------------------- */
/* Black, not the engine's blue-grey: on a Slate 1 page a lightened shadow
reads as haze around the card instead of depth under it. */
--qeng-shadow-rgb: 0 0 0;
--qeng-shadow: 0 2px 8px rgb(var(--qeng-shadow-rgb) / 0.55);
--qeng-shadow-soft: 0 1px 5px rgb(var(--qeng-shadow-rgb) / 0.40);
--qeng-shadow-soft-sm: 0 1px 3px rgb(var(--qeng-shadow-rgb) / 0.35);
--qeng-struck-bg: #363a3f; /* Slate 6 */
/* --- Sign -------------------------------------------------------------- */
/* Step 11 of a scale is the one Radix draws text with on a dark ground, and
step 12 the one it shouts with; step 8 is the same hue turned down to a
line. That is the whole ladder these four names need. */
--qeng-plus: #3dd68c; /* Green 11 */
--qeng-plus-strong: #b1f1cb; /* Green 12 */
--qeng-plus-soft: #2f7c57; /* Green 8 */
--qeng-plus-on-overlay: #3dd68c; /* Green 11 */
--qeng-minus: #ff9592; /* Red 11 */
--qeng-minus-strong: #ffd1d9; /* Red 12 */
--qeng-minus-soft: #b54548; /* Red 8 */
--qeng-minus-on-overlay: #ff9592; /* Red 11 */
--qeng-repeat: #9eb1ff; /* Indigo 11 */
--qeng-repeat-on-overlay: #d6e1ff; /* Indigo 12 */
--qeng-warn: #ffca16; /* Amber 11 */
/* The pale fields a sign sits on: the chip and the note strip. Step 3 of
its own hue - dark enough for step 11 to read on it. */
--qeng-warn-bg: #302008; /* Amber 3 */
--qeng-plus-bg: #132d21; /* Green 3 */
--qeng-warn-on-overlay: #ffca16; /* Amber 11 */
--qeng-warn-strong-on-overlay: #ffe7b3; /* Amber 12 */
--qeng-info: #70b8ff; /* Blue 11 */
--qeng-link: #9eb1ff; /* Indigo 11 */
--qeng-ghost: #363a3f; /* Slate 6 */
/* A mark that keeps its room and is not to be read: on a dark theme that is
the colour of the card it lies on, not the colour of paper. */
--qeng-invisible-text: #18191b; /* Slate 2 */
/* --- Typography -------------------------------------------------------- */
--qeng-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--qeng-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* radix-ui.com sets its code in Soehne Mono, which is licensed; JetBrains
Mono is the nearest free face a font service will hand to anyone, and it
covers Cyrillic - which most code faces do not. */
--qeng-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--qeng-code-text: #ff8dcc; /* Pink 11 - code is not a link, and must not read as one */
/* --- Corners ----------------------------------------------------------- */
/* radius="medium" on radix-ui.com, which is steps 2, 3 and 5 of its own
radius scale. */
--qeng-radius-sm: 4px;
--qeng-radius: 6px;
--qeng-radius-lg: 12px;
--qeng-radius-pill: 9999px;
/* --- Messages and banners ---------------------------------------------- */
/* The black plate of a warning: near-black with the hue of what it says,
so it is still a plate on a page that is itself near-black. */
--qeng-banner-bg: #201314; /* Red 2 */
--qeng-banner-link: #9eb1ff; /* Indigo 11 */
--qeng-script-stale: #b0b4ba; /* Slate 11 */
/* --- Canvas and tables ------------------------------------------------- */
--qeng-table-service-bg: #141726; /* Indigo 2 - rows that are not data */
--qeng-table-total-bg: #212225; /* Slate 3 */
--qeng-table-rule: #2e3135; /* Slate 5 */
--qeng-table-head-rule: #43484e; /* Slate 7 */
--qeng-table-seam: #43484e; /* Slate 7 */
--qeng-table-head-bg: #212225; /* Slate 3 */
--qeng-table-head-text: #edeef0; /* Slate 12 */
--qeng-table-link: #9eb1ff; /* Indigo 11 */
/* --- Alerts ------------------------------------------------------------ */
/* Only the five hues and the ink: the engine mixes each alert out of its
hue, --qeng-surface-bg and --qeng-alert-ink, so a dark card and white ink
give dark tinted plates with light text without a single one of the
fifteen alert tokens being written out. */
--qeng-alert-hue-secondary: #696e77; /* Slate 9 */
--qeng-alert-hue-warning: #ffc53d; /* Amber 9 */
--qeng-alert-hue-danger: #e5484d; /* Red 9 */
--qeng-alert-hue-success: #30a46c; /* Green 9 */
--qeng-alert-hue-info: #0090ff; /* Blue 9 */
--qeng-alert-ink: #ffffff;
/* --- What Bootstrap paints itself -------------------------------------- */
--qeng-link-hover: #d6e1ff; /* Indigo 12 */
--qeng-hr-line: rgba(237, 238, 240, 0.12);
--qeng-dropdown-bg: #18191b; /* Slate 2 */
--qeng-dropdown-text: #edeef0; /* Slate 12 */
--qeng-dropdown-border: rgba(237, 238, 240, 0.14);
--qeng-bs-muted: #b0b4ba; /* Slate 11 */
--qeng-bs-secondary: #43484e; /* Slate 7 */
--qeng-bs-secondary-text: #edeef0; /* Slate 12 */
--qeng-bs-secondary-outline: #b0b4ba; /* Slate 11 */
/* Ink on step 11, fill on step 9 - which is what the scale is for, and
what the engine finally lets a theme say separately. */
/*
* Плитки глубже, чем девятые ступени Radix: белое на Red 9 - 3.9:1, на
* Green 9 - 3.2:1, а подписи на них печатаются в 10-14px. Девятая ступень
* у Radix и рассчитана на крупный текст, не на значок.
*/
--qeng-bs-danger: #ff9592; /* Red 11 */
--qeng-bs-danger-bg: #ce2c31; /* Red 11 светлой палитры: белое 5.2:1 */
--qeng-bs-danger-text: #ffffff;
--qeng-bs-success: #3dd68c; /* Green 11 */
--qeng-bs-success-bg: #1c7a5a; /* глубже Green 9: белое 5.3:1 */
--qeng-bs-success-text: #ffffff;
--qeng-bs-info: #0090ff; /* Blue 9 */
/* Тема темна и в своём обычном виде - не только под data-theme=dark, - а
дневной тёмный янтарь базы давал бы на её фоне 3.4:1. */
--qeng-bs-warning: #ffca16;
--qeng-bs-primary: #3e63dd; /* Indigo 9 - the one solid colour of the theme */
--qeng-bs-primary-text: #ffffff;
--qeng-bs-primary-outline: #9eb1ff; /* Indigo 11 */
--qeng-field-bg: #18191b; /* Slate 2 */
--qeng-field-border: #43484e; /* Slate 7 */
--qeng-field-disabled-bg: #111113; /* Slate 1 - sunk back into the page */
--qeng-input-group-text: #b0b4ba; /* Slate 11 */
/* The arrow is a picture, so its colour cannot come from a token: Slate 11
written into the svg. */
--qeng-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23b0b4ba' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
--qeng-page-link-bg: #18191b; /* Slate 2 */
--qeng-tab-hover-line: #272a2d; /* Slate 4 */
--qeng-tab-active-bg: #18191b; /* Slate 2 */
--qeng-tab-active-text: #edeef0; /* Slate 12 */
--qeng-modal-close: #b0b4ba; /* Slate 11 */
--qeng-modal-close-shadow: none;
/* --- The btn-default button -------------------------------------------- */
--qeng-btn-default-active-bg: #272a2d; /* Slate 4 */
--qeng-btn-default-focus-border: #435db1; /* Indigo 8 */
--qeng-btn-default-active-border: #43484e; /* Slate 7 */
/* --- Switches and custom controls -------------------------------------- */
--qeng-switch-bg: #212225; /* Slate 3 */
--qeng-switch-border: #43484e; /* Slate 7 */
--qeng-switch-thumb: #b0b4ba; /* Slate 11 */
--qeng-switch-active-bg: #3e63dd; /* Indigo 9 */
--qeng-switch-active-border: #3e63dd;
--qeng-switch-active-thumb: #ffffff;
/* --- Scrollbars -------------------------------------------------------- */
--qeng-scrollbar-thumb: #43484e; /* Slate 7 */
--qeng-scrollbar-thumb-hover: #5a6169; /* Slate 8 */
--qeng-scrollbar-track: #111113; /* Slate 1 */
/* --- Spoilers ---------------------------------------------------------- */
--qeng-spoiler-live-bg: #182449; /* Indigo 3 */
}
/*
* The night mode of the game page.
*
* A repetition of the block above, and it has to be one: the engine's own
* `:root[data-theme="dark"]` weighs more than any bare `:root`, so at night its
* greys come back over everything a theme said on `:root` - not because the
* theme is loaded too early, but because that selector is heavier. Every name
* the engine's night block writes is therefore written here again, and only
* those: what it stays silent about is already Radix from the block above.
*/
:root[data-theme="dark"] {
/* --- Canvas and text --------------------------------------------------- */
--qeng-body-bg: #111113; /* Slate 1 */
--qeng-text: #edeef0; /* Slate 12 */
--qeng-text-on-surface: #edeef0;
--qeng-text-muted: #b0b4ba; /* Slate 11 */
--qeng-text-contrast: #ffffff;
--qeng-bs-muted: #b0b4ba;
--qeng-surface-bg: #18191b; /* Slate 2 */
--qeng-surface-warm-bg: #212225; /* Slate 3 */
--qeng-control-bg: #18191b;
--qeng-control-sunken-bg: #272a2d; /* Slate 4 */
--qeng-control-text: #edeef0;
--qeng-card-bg: #18191b;
--qeng-link: #9eb1ff; /* Indigo 11 */
--qeng-bs-secondary: #43484e; /* Slate 7 */
--qeng-bs-secondary-outline: #b0b4ba;
--qeng-bs-secondary-text: #edeef0;
--qeng-bs-success-text: #ffffff;
--qeng-bs-info: #0090ff; /* Blue 9 */
--qeng-alert-ink: #ffffff;
--qeng-message-border: #5a6169; /* Slate 8 */
/* --- Shadows ----------------------------------------------------------- */
/* The engine turns its shadow into a light halo at night, because its own
night is a flat near-black with nothing to cast onto. Radix keeps the
card a step above the page instead, so the shadow stays a shadow. */
--qeng-shadow-rgb: 0 0 0;
/* --- What Bootstrap paints itself -------------------------------------- */
--qeng-link-hover: #d6e1ff; /* Indigo 12 */
--qeng-hr-line: rgba(237, 238, 240, 0.12);
--qeng-dropdown-bg: #18191b; /* Slate 2 */
--qeng-dropdown-text: #edeef0; /* Slate 12 */
--qeng-dropdown-border: rgba(237, 238, 240, 0.14);
--qeng-navbar-toggler-bg: #9eb1ff; /* Indigo 11 */
/* Left as the engine has it: this one paints a bare or