/*
 * Theme "dark_radix" - The task page, the answer form, bonuses, hints, inventory.
 *
 * 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.
 *
 * Two modes, and this is the one part of the package where the theme is not
 * dark throughout. The site and the admin pages are the author's choice and
 * stay on Radix Slate 1; the game is the player's, and the switch in their menu
 * has to do something. So day is the light Radix scale and night the dark one -
 * the same two the palette ships in a pair, which is what makes them a pair
 * here as well.
 *
 * Both modes are written on `:root`, and that is the whole trick. The day is
 * `[data-theme="light"]`, which only the game page ever carries - a page of the
 * site has no attribute at all, so the light set cannot leak onto it, and the
 * two blocks are mutually exclusive rather than one outweighing the other.
 *
 * It used to be scoped to `body.game`, and that cost a hundred extra lines.
 * Section 0 declares most of tier 2 through tier 1 -
 * `--qeng-card-bg: var(--qeng-surface-bg)` - and a custom property resolves its
 * var() on the element it is DECLARED on, which is `:root`. Moved on `body`,
 * the first tier did not drag the second with it: the second was already
 * resolved, to the dark value, and inherited down as that. Every tier-2 name
 * had to be written out by hand, and one forgotten name meant not a pale colour
 * but a spoiler showing through. On `:root` the whole chain recomputes itself.
 *
 * Every colour is a step of a Radix scale and says which one; steps of the
 * light scale in the day block, of the dark one in the night block.
 */

:root {
    /* --- Image zoom -------------------------------------------------------- */
    --qeng-zoom-backdrop: rgba(9, 9, 11, 0.8);
}

:root[data-theme="light"] {
    /* --- Canvas and ink (day) ---------------------------------------------- */
    --qeng-body-bg: #f9f9fb;            /* Slate 2 */
    --qeng-game-bg: #ffffff;
    --qeng-surface-bg: #ffffff;
    --qeng-surface-warm-bg: #f9f9fb;    /* Slate 2 */
    --qeng-game-service-bg: #f0f0f3;    /* Slate 3 */
    --qeng-task-header-bg: #f0f0f3;     /* Slate 3 */
    --qeng-answers-bar-bg: #f0f0f3;     /* Slate 3 */
    --qeng-game-text: #1c2024;          /* Slate 12 */
    --qeng-text: #1c2024;
    --qeng-text-on-surface: #1c2024;
    --qeng-text-contrast: #1c2024;
    --qeng-text-muted: #60646c;         /* Slate 11 */
    --qeng-task-pause-bg: #f0f0f3;      /* Slate 3 */
    --qeng-task-canceled-bg: #e8e8ec;   /* Slate 4 */
    --qeng-drag-spot-bg: #e8e8ec;       /* Slate 4 */
    --qeng-drag-spot-text: #1c2024;     /* Slate 12 */
    --qeng-struck-bg: #b9bbc6;          /* Slate 8 */
    --qeng-ghost: #e0e1e6;              /* Slate 5 - a code nobody has entered */

    /* --- Lines (day) ------------------------------------------------------- */
    --qeng-border: #d9d9e0;             /* Slate 6 */
    --qeng-border-strong: #b9bbc6;      /* Slate 8 */
    --qeng-border-hard: #b9bbc6;        /* Slate 8 */
    --qeng-grid: #e0e1e6;               /* Slate 5 */
    --qeng-rule: #d9d9e0;               /* Slate 6 */
    --qeng-inner-rule: #e8e8ec;         /* Slate 4 */
    --qeng-game-bar-border: #d9d9e0;    /* Slate 6 */
    --qeng-hr-line: rgba(28, 32, 36, 0.12);

    /* --- Sign (day) -------------------------------------------------------- */
    /* Only the four that are read on the page. The -on-overlay half stays on
       the dark scale in both modes: the panel it is written on is dark in
       both. */
    --qeng-plus: #218358;               /* Green 11 */
    --qeng-minus: #ce2c31;              /* Red 11 */
    --qeng-repeat: #3a5bc7;             /* Indigo 11 */
    --qeng-info: #0d74ce;               /* Blue 11 */

    /* --- Links and type (day) ---------------------------------------------- */
    --qeng-link: #3a5bc7;               /* Indigo 11 */
    --qeng-link-hover: #1f2d5c;         /* Indigo 12 */
    --qeng-menu-button-hover: #3e63dd;  /* Indigo 9 */
    --qeng-max-time: #3a5bc7;           /* Indigo 11 */
    --qeng-code-text: #c2298a;          /* Pink 11 */

    /* --- Controls and fields (day) ----------------------------------------- */
    --qeng-control-bg: #ffffff;
    --qeng-control-sunken-bg: #f0f0f3;  /* Slate 3 */
    --qeng-control-text: #1c2024;       /* Slate 12 */
    --qeng-field-bg: #ffffff;
    --qeng-field-border: #cdced6;       /* Slate 7 */
    --qeng-field-disabled-bg: #f0f0f3;  /* Slate 3 */
    --qeng-input-group-text: #60646c;   /* Slate 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='%2360646c' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    --qeng-dropdown-bg: #ffffff;
    --qeng-dropdown-text: #1c2024;      /* Slate 12 */
    --qeng-dropdown-border: #d9d9e0;    /* Slate 6 */
    --qeng-switch-bg: #f0f0f3;          /* Slate 3 */
    --qeng-switch-border: #cdced6;      /* Slate 7 */
    --qeng-switch-thumb: #ffffff;
    --qeng-switch-active-thumb: #ffffff;
    --qeng-accent-bg: #edf2fe;          /* Indigo 3 */
    --qeng-accent-line: #abbdf9;        /* Indigo 7 */
    --qeng-spoiler-live-bg: #edf2fe;    /* Indigo 3 */
    --qeng-page-link-bg: #ffffff;
    --qeng-tab-active-bg: #ffffff;
    --qeng-tab-hover-line: #f0f0f3;     /* Slate 3 */
    --qeng-modal-close: #60646c;        /* Slate 11 */
    --qeng-btn-default-active-bg: #e8e8ec;      /* Slate 4 */
    --qeng-btn-default-focus-border: #8da4ef;   /* Indigo 8 */
    --qeng-btn-default-active-border: #cdced6;  /* Slate 7 */
    --qeng-scrollbar-thumb: #cdced6;            /* Slate 7 */
    --qeng-scrollbar-thumb-hover: #b9bbc6;      /* Slate 8 */
    --qeng-scrollbar-track: transparent;

    /* --- Tables (day) ------------------------------------------------------ */
    --qeng-table-head-bg: #f0f0f3;      /* Slate 3 */
    --qeng-table-head-rule: #cdced6;    /* Slate 7 */
    --qeng-table-rule: #e8e8ec;         /* Slate 4 */
    --qeng-table-seam: #cdced6;         /* Slate 7 */
    --qeng-table-service-bg: #edf2fe;   /* Indigo 3 */
    --qeng-table-total-bg: #f9f9fb;     /* Slate 2 */

    /* --- Alerts (day) ------------------------------------------------------ */
    /* The same mix the engine writes, said again so that it is taken around a
       white card and black ink instead of around the dark ones on `:root`. The
       five hues themselves do not move between the modes. */
    --qeng-alert-ink: #000000;

    /* --- Bootstrap (day) --------------------------------------------------- */
    --qeng-bs-primary: #3e63dd;         /* Indigo 9 */
    --qeng-bs-secondary: #60646c;       /* Slate 11 */
    --qeng-bs-secondary-outline: #60646c;
    --qeng-bs-secondary-text: #ffffff;
    --qeng-bs-muted: #60646c;           /* Slate 11 */
    --qeng-bs-danger: #ce2c31;          /* Red 11 */
    --qeng-bs-success: #218358;         /* Green 11 */
    --qeng-bs-info: #0d74ce;            /* Blue 11 */
    /* Обводка тоже дневная: светлая индиговая из _base.css рассчитана на
       тёмный фон темы и на белом дневной игры давала 2.1:1. */
    --qeng-bs-primary-outline: #3451b2; /* Indigo 11 светлой палитры */
    /* И янтарь дневной: светлый из _base.css рассчитан на тёмный фон темы, а
       здесь фон белый - 1.5:1. */
    --qeng-bs-warning: #946400;

    /* --- Progress and awards (day) ----------------------------------------- */
    --qeng-progress-bg: #f0f0f3;        /* Slate 3 */
    --qeng-progress-text: #1c2024;      /* Slate 12 */
    --qeng-awards-bg: #ffc53d;          /* Amber 9 */
    --qeng-awards-gradient: linear-gradient(157deg, #ffee9c 0%, #ffba18 100%);  /* Amber 4 -> Amber 10 */
    --qeng-awards-text: #1c2024;        /* Slate 12 */
    --qeng-task-status-lost: #ce2c31;   /* Red 11 */

    /* --- Hints and codes (day) --------------------------------------------- */
    --qeng-hint-block-border: #d9d9e0;  /* Slate 6 */
    --qeng-hint-title: #60646c;         /* Slate 11 */
    --qeng-hint-open-name: #3a5bc7;     /* Indigo 11 */
    --qeng-codes-bg: #ffffff;
    --qeng-codes-title: #3a5bc7;        /* Indigo 11 */

    /* --- Bonuses (day) ----------------------------------------------------- */
    /* Step 3 of the hue is the tint Radix fills a plate with, and step 11 the
       text that goes on it. */
    --qeng-bonus-border: #d9d9e0;       /* Slate 6 */
    --qeng-bonus-solved-bg: #e6f6eb;    /* Green 3 */
    --qeng-bonus-penalty-bg: #feebec;   /* Red 3 */
    --qeng-bonus-timeout-bg: #f0f0f3;   /* Slate 3 */
    /*
     * Зелёное на этих плитках - глубже Green 11: пара «11 на 3» у Radix
     * рассчитана на 4.5, но по замеру даёт 4.21, а название бонуса печатается
     * жирным в 14px. Без своего значения сюда падал --qeng-bs-success дневного
     * блока, то есть тот самый Green 11.
     */
    --qeng-bonus-plus: #19664b;
    --qeng-answer-right: #19664b;

    /* --- The verdict on an answer (day) ------------------------------------ */
    /* The panel is dark in both modes - it floats over the task - so what is
       written on it comes off the dark scale even here. */
    --qeng-answer-panel-bg: rgba(17, 17, 19, 0.9);
    --qeng-answer-panel-border: #3e63dd 1px solid;  /* Indigo 9 */
    --qeng-answer-field-bg: #ffffff;
    --qeng-answer-field-text: #1c2024;  /* Slate 12 */
    --qeng-answer-field-family: var(--qeng-font-family);
    --qeng-answer-field-size: 130%;
    --qeng-answer-field-line-height: normal;
    --qeng-answer-field-radius: var(--qeng-radius-sm);

    /* --- A closed level (day) ---------------------------------------------- */
    /* The solid Green 9, with the caption turned dark rather than the fill
       turned down: --qeng-level-closed-text is what that name is for, and dark
       ink on step 9 is 6.3 where the engine's light ink was 2.7. */
    --qeng-level-closed-bg: #30a46c;    /* Green 9 */
    --qeng-level-closed-text: #0e1512;  /* Green 1 */

    /* --- Monitoring (day) -------------------------------------------------- */
    --qeng-monitor-bg: rgba(17, 17, 19, 0.9);
    --qeng-monitor-border: #43484e;     /* Slate 7 dark - it is a dark panel */
    --qeng-monitor-link-hover: #d6e1ff; /* Indigo 12 dark */
    --qeng-monitor-repeat: #9eb1ff;     /* Indigo 11 dark */
    --qeng-monitor-user: #ffc53d;       /* Amber 9 */

    /* --- Inventory (day) --------------------------------------------------- */
    /* The solid Amber 9, now that the count on the bag has ink of its own.
       Amber is one of the hues Radix prints dark on, and Slate 1 on it is a
       9.4 where the engine's light ink was a 1.4. */
    --qeng-inventory-accent: #ffc53d;   /* Amber 9 */
    --qeng-inventory-accent-text: #111113;  /* Slate 1 */
    --qeng-inventory-accent-glow: rgba(255, 197, 61, 0.7);  /* Amber 9 */
    --qeng-inventory-slot-bg: #f0f0f3;  /* Slate 3 */
    --qeng-inventory-slot-border: #cdced6;  /* Slate 7 */
    --qeng-inventory-selected: #3e63dd; /* Indigo 9 */
}

:root[data-theme="dark"],
:root[data-theme="dark"] body.game,
body.game[data-theme="dark"] {
    /* --- Canvas and ink (night) -------------------------------------------- */
    --qeng-game-bg: #111113;            /* Slate 1 */
    --qeng-surface-bg: #18191b;         /* Slate 2 */
    --qeng-surface-warm-bg: #212225;    /* Slate 3 */
    --qeng-game-service-bg: #18191b;    /* Slate 2 */
    --qeng-task-header-bg: #18191b;     /* Slate 2 */
    --qeng-task-header-shadow: none;
    --qeng-answers-bar-bg: #18191b;     /* Slate 2 */
    --qeng-game-border: #363a3f;        /* Slate 6 */
    --qeng-game-bar-border: #363a3f;    /* Slate 6 */
    --qeng-game-shadow: 0 2px 8px rgb(0 0 0 / 0.55);
    --qeng-game-text: #edeef0;          /* Slate 12 */
    --qeng-text: #edeef0;
    --qeng-text-on-surface: #edeef0;
    --qeng-text-contrast: #ffffff;
    --qeng-text-muted: #b0b4ba;         /* Slate 11 */
    --qeng-task-pause-bg: #212225;      /* Slate 3 */
    --qeng-task-canceled-bg: #272a2d;   /* Slate 4 */
    --qeng-drag-spot-bg: #272a2d;       /* Slate 4 */
    --qeng-drag-spot-text: #edeef0;     /* Slate 12 */

    /* --- Links and controls (night) ---------------------------------------- */
    --qeng-link: #9eb1ff;               /* Indigo 11 */
    --qeng-link-hover: #d6e1ff;         /* Indigo 12 */
    --qeng-game-bar-link: #9eb1ff;      /* Indigo 11 */
    --qeng-menu-button: #edeef0;        /* Slate 12 */
    --qeng-menu-button-hover: #9eb1ff;  /* Indigo 11 */
    --qeng-max-time: #ffca16;           /* Amber 11 - the clock is the one thing that shouts */
    --qeng-linkspan-text: #edeef0;      /* Slate 12 */
    --qeng-code-text: #ff8dcc;          /* Pink 11 */
    --qeng-bs-secondary: #43484e;       /* Slate 7 */
    --qeng-bs-secondary-text: #edeef0;  /* Slate 12 */
    --qeng-bs-secondary-outline: #b0b4ba;  /* Slate 11 */
    --qeng-bs-danger: #ff9592;          /* Red 11 */
    /* Глубже Red 9: белое на девятой ступени - 3.9:1, а она у Radix и
       рассчитана на крупный текст, не на подпись значка. */
    --qeng-bs-danger-bg: #ce2c31;       /* Red 11 светлой палитры */

    /* --- Frames at night --------------------------------------------------- */
    /* The engine drops every rule and frame inside the task at night. Radix
       does not: a card that is a step above the page needs its edge, or the
       hint, the codes and the task text run into one another. So the frames
       come back, drawn in Slate 6 like every other line in the theme. */
    --qeng-inner-rule: #363a3f;         /* Slate 6 */
    --qeng-inner-rule-style: none none none solid;
    --qeng-hint-block-border: #363a3f;  /* Slate 6 */
    --qeng-hint-block-border-style: solid none none;
    --qeng-codes-padding: 8px;
    --qeng-codes-border-style: solid;
    --qeng-codes-radius: var(--qeng-radius);
    --qeng-codes-bg: #18191b;           /* Slate 2 */
    --qeng-codes-border: #363a3f;       /* Slate 6 */
    --qeng-codes-title: #9eb1ff;        /* Indigo 11 */

    /* --- Hints (night) ----------------------------------------------------- */
    --qeng-hint-title: #b0b4ba;         /* Slate 11 */
    --qeng-hint-open: #edeef0;          /* Slate 12 */
    --qeng-hint-open-name: #9eb1ff;     /* Indigo 11 */
    --qeng-hint-open-name-weight: 600;
    --qeng-hint-open-flash-from: #111113;   /* Slate 1 */
    --qeng-hint-open-flash-to: #ffca16;     /* Amber 11 */

    /* --- Bonuses (night) --------------------------------------------------- */
    --qeng-bonus-border: #363a3f;       /* Slate 6 */
    --qeng-bonus-solved-bg: #132d21;    /* Green 3 */
    --qeng-bonus-penalty-bg: #3b1219;   /* Red 3 */
    --qeng-bonus-timeout-bg: #212225;   /* Slate 3 */
    --qeng-bonus-plus: #3dd68c;         /* Green 11 */
    --qeng-bonus-minus: #ff9592;        /* Red 11 */

    /* --- The verdict on an answer (night) ---------------------------------- */
    --qeng-answer-right: #3dd68c;       /* Green 11 */
    --qeng-answer-wrong: #ff9592;       /* Red 11 */
    --qeng-answer-repeat: #9eb1ff;      /* Indigo 11 */
    --qeng-answer-panel-bg: rgba(9, 9, 11, 0.94);
    --qeng-answer-panel-border: #3e63dd 1px solid;  /* Indigo 9 */
    --qeng-answer-panel-shadow: none;
    --qeng-answer-field-bg: #18191b;    /* Slate 2 */
    --qeng-answer-field-text: #edeef0;  /* Slate 12 */
    --qeng-answer-field-family: var(--qeng-font-family);
    --qeng-answer-field-size: 130%;
    --qeng-answer-field-line-height: normal;
    --qeng-answer-field-radius: var(--qeng-radius-sm);

    /* --- A closed level (night) -------------------------------------------- */
    --qeng-level-closed-bg: #30a46c;    /* Green 9 - see the day block */
    --qeng-level-closed-text: #0e1512;  /* Green 1 */

    /* --- Monitoring (night) ------------------------------------------------ */
    --qeng-monitor-bg: rgba(17, 17, 19, 0.92);
    --qeng-monitor-border: #363a3f;     /* Slate 6 */
    --qeng-monitor-link-hover: #d6e1ff; /* Indigo 12 */
    --qeng-monitor-repeat: #9eb1ff;     /* Indigo 11 */
    --qeng-monitor-user: #ffc53d;       /* Amber 9 */

    /* --- Progress and inventory (night) ------------------------------------ */
    --qeng-progress-bg: #212225;        /* Slate 3 */
    --qeng-progress-text: #edeef0;      /* Slate 12 */
    --qeng-inventory-accent: #ffc53d;   /* Amber 9 - see the day block */
    --qeng-inventory-accent-text: #111113;  /* Slate 1 */
    --qeng-inventory-accent-glow: rgba(255, 197, 61, 0.7);  /* Amber 9 */
    --qeng-inventory-slot-bg: #212225;  /* Slate 3 */
    --qeng-inventory-slot-border: #43484e;  /* Slate 7 */
    --qeng-inventory-selected: #9eb1ff; /* Indigo 11 */
    --qeng-inventory-zone: rgba(158, 177, 255, 0.12);  /* Indigo 11 */
    --qeng-inventory-zone-accepted: #3dd68c;  /* Green 11 */
    --qeng-inventory-zone-shadow: none;
}