/* The app's colours for each colour mode (layout.scala.html sets data-bs-theme on <html>:
   light, dark, or for "auto" the browser's prefers-color-scheme). Loaded after Bootstrap and
   before main.css, whose rules use these variables. Bootstrap's own (--bs-body-bg,
   --bs-secondary-bg, --bs-danger, ...) cover everything else. :root is light before the auto
   script has run, or without scripts, as Bootstrap's own defaults are. */
:root, [data-bs-theme=light] {
    /* behind photos (galleries, large views): a neutral light grey, not white, so that the
       photos' colours are not judged against glare */
    --wlx-image-bg: #e3e3e3;
    /* a thumbnail or image that failed to load, and its mark */
    --wlx-thumb-failed-bg: #c6c6c6;
    --wlx-thumb-failed-mark: #6e6e6e;
    /* a file deleted on Commons: its red frame */
    --wlx-deleted: #dc3545;
    /* the navbar's selected and rejected tabs (own votes), and the active tab's background */
    --wlx-selected: #146c43;
    --wlx-rejected: #b02a37;
    --wlx-nav-active-bg: rgba(0, 0, 0, .09);
    /* a binary round's vote frames on the gallery tiles: saturated, at least 3:1 on the image
       grey (4.0 and 4.4) and the page (5.1 and 5.6), parted from the photo by a white line */
    --wlx-vote-selected: #007f35;
    --wlx-vote-rejected: #d1001f;
    --wlx-vote-line: #fff;
    /* rating stars (raty and the static ones): at least 3:1 on the page and on the image grey */
    --wlx-star: #a36a00;
}

[data-bs-theme=dark] {
    --wlx-image-bg: #303030;
    --wlx-thumb-failed-bg: #4a4a4a;
    --wlx-thumb-failed-mark: #a0a0a0;
    --wlx-deleted: #e35d6a;
    --wlx-selected: #75b798;
    --wlx-rejected: #ea868f;
    --wlx-nav-active-bg: rgba(255, 255, 255, .1);
    /* 5.8 and 4.1 on the image grey, 6.8 and 4.8 on the page; a black line */
    --wlx-vote-selected: #22c55e;
    --wlx-vote-rejected: #ff4d5e;
    --wlx-vote-line: #000;
    --wlx-star: #ffc107;
    /* the secondary buttons (btn-outline-secondary) and the pager's links. Bootstrap keeps its
       light-mode grey (#6c757d) for them in dark mode: 2.4-3.3:1 on the dark greys, too faint to
       read as buttons. The border is at least 3:1 on every background they sit on (page #212529
       5.2, table rows and navbar #2b3035 4.5, image grey #303030 4.5, #343a40 3.9); the text
       11.9 on the page, 8.8 on #343a40 */
    --wlx-control-border: #8f979f;
    --wlx-control-color: #dee2e6;
    --wlx-control-bg: rgba(255, 255, 255, .05);
    /* hover: white text (8.2) on #495057, a lighter border (5.5 or more); pressed or chosen
       (active, a checked btn-check): filled light grey, dark text (10.3) */
    --wlx-control-hover-bg: #495057;
    --wlx-control-hover-border: #adb5bd;
    --wlx-control-active-bg: #ced4da;
    --wlx-control-active-color: #212529;
    /* disabled: no fill, a dim border, and Bootstrap's .65 opacity on top */
    --wlx-control-disabled-color: #adb5bd;
    --wlx-control-disabled-border: #6c757d;
}

[data-bs-theme=dark] .btn-outline-secondary {
    --bs-btn-color: var(--wlx-control-color);
    --bs-btn-bg: var(--wlx-control-bg);
    --bs-btn-border-color: var(--wlx-control-border);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wlx-control-hover-bg);
    --bs-btn-hover-border-color: var(--wlx-control-hover-border);
    --bs-btn-focus-shadow-rgb: 173, 181, 189;
    --bs-btn-active-color: var(--wlx-control-active-color);
    --bs-btn-active-bg: var(--wlx-control-active-bg);
    --bs-btn-active-border-color: var(--wlx-control-active-bg);
    --bs-btn-disabled-color: var(--wlx-control-disabled-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--wlx-control-disabled-border);
}

/* the pager: its links keep the link colour; only their outline was Bootstrap's #495057 (1.9:1) */
[data-bs-theme=dark] .pagination {
    --bs-pagination-border-color: var(--wlx-control-border);
    --bs-pagination-hover-border-color: var(--wlx-control-hover-border);
    --bs-pagination-disabled-border-color: var(--wlx-control-disabled-border);
}

/* light: Bootstrap draws these buttons' text in #6c757d, the grey it also uses for disabled
   controls, so working buttons looked greyed out. Their text is the page's dark grey (11.5:1 on
   white); the border stays #6c757d (4.7:1); hover, pressed and disabled stay Bootstrap's. */
:root:not([data-bs-theme=dark]) .btn-outline-secondary {
    --bs-btn-color: #343a40;
}