/*
 * Theme "dark_purple" - The palette, typography, and the ground every screen stands on.
 *
 * One of the parts css/theme/dark_purple/ 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.
 *
 * Built on the modern design system of Radix UI (https://www.radix-ui.com/primitives),
 * using Google Font Inter for crisp geometric typography, dark Mauve for neutral
 * surfaces, and Violet/Purple for brand accents.
 * The domain site and admin interfaces are dark by default.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --- The palette (Dark Mauve & Violet ground) ------------------------- */
    /* Radix Dark Mauve-1 canvas and Mauve-2 card surfaces */
    --qeng-body-bg: #121113;
    --qeng-surface-bg: #1a191b;
    --qeng-surface-warm-bg: #232225;
    --qeng-service-bg: #1a191b;
    --qeng-overlay-bg: rgba(18, 17, 19, 0.88);
    --qeng-overlay-strong-bg: rgba(10, 9, 12, 0.94);
    --qeng-overlay-hairline: rgba(186, 167, 255, 0.35);
    --qeng-overlay-shadow-rgb: 0 0 0;
    --qeng-text-on-overlay: #eeeef0;
    --qeng-text-on-overlay-muted: #b5b2bc;

    /* High-contrast ink: Radix Dark Mauve-12 and Mauve-11 */
    --qeng-text: #eeeef0;
    --qeng-text-muted: #b5b2bc;
    --qeng-text-on-surface: #eeeef0;
    --qeng-text-contrast: #ffffff;

    /* Radix Dark Mauve border scales */
    --qeng-border: #3c393f;
    --qeng-border-strong: #625f69;
    --qeng-grid: #323035;
    --qeng-border-hard: #baa7ff;
    --qeng-rule: #3c393f;

    /* Form controls: dark plates and sunken addons */
    --qeng-control-bg: #1a191b;
    --qeng-control-sunken-bg: #2b292d;
    --qeng-control-text: #eeeef0;

    /* Radix Violet brand accent: Violet-3 fill and Violet-7 line */
    --qeng-accent-bg: #291f43;
    --qeng-accent-line: #56468b;

    /* Violet-9 glow shadow */
    --qeng-shadow-rgb: 110 86 207;
    --qeng-shadow: 0 2px 8px rgb(0 0 0 / 0.5), 0 0 1px rgb(var(--qeng-shadow-rgb) / 0.35);
    --qeng-shadow-soft: 0 1px 4px rgb(0 0 0 / 0.4);
    --qeng-shadow-soft-sm: 0 1px 2px rgb(0 0 0 / 0.3);

    --qeng-struck-bg: #3c393f;

    /* Status indicators: Radix Jade, Ruby, Violet, Amber */
    --qeng-plus: #1fd8a4;
    --qeng-plus-strong: #27b08b;
    --qeng-plus-soft: #246854;
    --qeng-plus-on-overlay: #adf0d4;

    --qeng-minus: #ff949d;
    --qeng-minus-strong: #e54666;
    --qeng-minus-soft: #883447;
    --qeng-minus-on-overlay: #fed2e1;

    --qeng-repeat: #baa7ff;
    --qeng-repeat-on-overlay: #e2ddfe;

    --qeng-warn: #ffca16;
    --qeng-warn-bg: #2a1f08;
    --qeng-plus-bg: #0f2a22;
    --qeng-warn-on-overlay: #ffca16;
    --qeng-warn-strong-on-overlay: #ffd60a;

    --qeng-info: #70b8ff;
    --qeng-link: #baa7ff;

    --qeng-ghost: #3c393f;
    --qeng-invisible-text: #181719;

    /* --- Typography (Radix Inter font stack) -------------------------------- */
    --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;
    --qeng-font-size: 14px;
    --qeng-code-text: #ff949d;

    /* --- Shapes and corners ------------------------------------------------ */
    --qeng-radius-sm: 4px;
    --qeng-radius: 6px;
    --qeng-radius-lg: 10px;
    --qeng-radius-pill: 9999px;

    /* --- Messages and banners ---------------------------------------------- */
    --qeng-banner-bg: #1e1517;
    --qeng-banner-link: #baa7ff;
    --qeng-script-stale: #b5b2bc;

    /* --- Canvas & Tables --------------------------------------------------- */
    --qeng-table-service-bg: #1a191b;
    --qeng-table-total-bg: #161517;
    --qeng-table-rule: #323035;
    --qeng-table-head-rule: #49474e;
    --qeng-table-seam: #49474e;
    --qeng-table-link: #baa7ff;
    --qeng-table-head-bg: #232225;
    --qeng-table-head-text: #eeeef0;

    /* --- Bootstrap overrides ----------------------------------------------- */
    --qeng-link-hover: #e2ddfe;
    --qeng-hr-line: rgba(186, 167, 255, 0.18);
    --qeng-dropdown-bg: #181719;
    --qeng-dropdown-text: #eeeef0;
    --qeng-dropdown-border: rgba(186, 167, 255, 0.25);
    --qeng-bs-muted: #b5b2bc;
    --qeng-bs-secondary: #3c393f;
    --qeng-bs-secondary-text: #eeeef0;
    --qeng-bs-secondary-outline: #baa7ff;
    --qeng-bs-danger: #ff949d;
    /* The plate is this light red, so the word on it cannot stay white - 2.1:1
       on a badge. Dark ink reads 9:1 and keeps the plate as bright as it is. */
    --qeng-bs-danger-text: #2A0000;
    /*
     * Success as INK is lighter than the plate: the deep jade below is 3.0:1
     * on this theme's ground, and .btn-outline-success prints its caption in
     * it. -bg keeps the deep shade - white on it is 5:1, and a lighter plate
     * would swallow the caption instead.
     */
    --qeng-bs-success: #29A383;
    --qeng-bs-success-bg: #147257;
    --qeng-bs-primary: #6e56cf;
    --qeng-bs-primary-text: #ffffff;
    --qeng-bs-primary-outline: #baa7ff;
    --qeng-bs-info: #70b8ff;
    /* Тема темна и в своём обычном виде - не только под data-theme=dark, - а
       дневной тёмный янтарь базы давал бы на её фоне 3.4:1. */
    --qeng-bs-warning: #ffca16;
    --qeng-code-text: #e2ddfe;

    --qeng-field-bg: #1a191b;
    --qeng-field-border: #3c393f;
    --qeng-field-disabled-bg: #121113;
    --qeng-input-group-text: #b5b2bc;

    /* Custom SVG dropdown select arrow in Radix Violet-11 */
    --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='%23baa7ff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");

    --qeng-page-link-bg: #1a191b;
    --qeng-tab-hover-line: #291f43;
    --qeng-tab-active-bg: #232225;

    --qeng-modal-close: #baa7ff;
    --qeng-modal-close-shadow: none;

    /* --- Switches and custom controls -------------------------------------- */
    --qeng-switch-bg: #121113;
    --qeng-switch-border: #3c393f;
    --qeng-switch-thumb: #b5b2bc;
    --qeng-switch-active-bg: #6e56cf;
    --qeng-switch-active-border: #56468b;
    --qeng-switch-active-thumb: #ffffff;

    /* --- Scrollbars -------------------------------------------------------- */
    --qeng-scrollbar-thumb: #49474e;
    --qeng-scrollbar-thumb-hover: #625f69;
    --qeng-scrollbar-track: #121113;

    /* --- Alerts ------------------------------------------------------------ */
    --qeng-alert-secondary-bg: #232225;
    --qeng-alert-secondary-text: #eeeef0;
    --qeng-alert-secondary-border: #3c393f;

    --qeng-alert-warning-bg: #302008;
    --qeng-alert-warning-text: #ffca16;
    --qeng-alert-warning-border: #5c3d05;

    --qeng-alert-danger-bg: #3a141e;
    --qeng-alert-danger-text: #ff949d;
    --qeng-alert-danger-border: #6f2539;

    --qeng-alert-success-bg: #0f2e22;
    --qeng-alert-success-text: #1fd8a4;
    --qeng-alert-success-border: #1b5745;

    --qeng-alert-info-bg: #13131e;
    --qeng-alert-info-text: #baa7ff;
    --qeng-alert-info-border: #3d3e82;

    /* --- Buttons ----------------------------------------------------------- */
    --qeng-btn-default-active-bg: #232225;
    --qeng-btn-default-focus-border: #baa7ff;
    --qeng-btn-default-active-border: #56468b;

    /* --- Spoilers ---------------------------------------------------------- */
    --qeng-spoiler-live-bg: #291f43;
}

.text-muted {
    color: var(--qeng-text-muted) !important;
}

:root[data-theme="dark"] {
    /*
     * Заливки повторены здесь, а не только в :root выше: база объявляет их под
     * этим же селектором, и он перевешивает голый :root темы. Без повтора
     * ночью выходила смесь - тёмная подпись темы на глубоком красном базы,
     * 4.2:1.
     */
    --qeng-bs-danger: #ff949d;
    --qeng-bs-danger-bg: #ff949d;
    --qeng-bs-danger-text: #2A0000;
    --qeng-bs-success: #29A383;
    --qeng-bs-success-bg: #147257;
    --qeng-bs-success-text: #ffffff;

    /* --- The palette in dark mode ------------------------------------------ */
    --qeng-body-bg: #121113;
    --qeng-text: #eeeef0;
    --qeng-text-on-surface: #eeeef0;
    --qeng-shadow-rgb: 110 86 207;

    /* --- Bootstrap components in dark mode --------------------------------- */
    --qeng-link-hover: #e2ddfe;
    --qeng-hr-line: rgba(186, 167, 255, 0.18);
    --qeng-dropdown-bg: #181719;
    --qeng-dropdown-text: #eeeef0;
    --qeng-dropdown-border: rgba(186, 167, 255, 0.25);
    --qeng-card-bg: #1a191b;

    /* --- Switches and custom controls -------------------------------------- */
    --qeng-switch-bg: #121113;
    --qeng-switch-border: #3c393f;
    --qeng-switch-thumb: #b5b2bc;
    --qeng-switch-active-bg: #6e56cf;
    --qeng-switch-active-border: #56468b;
    --qeng-switch-active-thumb: #ffffff;

    /* --- Scrollbars -------------------------------------------------------- */
    --qeng-scrollbar-thumb: #49474e;
    --qeng-scrollbar-thumb-hover: #625f69;
    --qeng-scrollbar-track: #121113;

    /* --- Message frames ---------------------------------------------------- */
    --qeng-message-border: #baa7ff;

    /* --- Night: what has no daytime value ---------------------------------- */
    --qeng-field-text: #000;
}