/*
:filename: statics/css/main_swapp_theme.css
:author:   Brigitte Bigi
:contact:  contact@sppas.org
:summary:  Colors and light/dark/contrast theme of the SPPAS web application.
:note:     Must be loaded AFTER main_swapp.css so its declarations win the
           cascade (same convention as wexa_theme.css after wexa.css, and
           acs-theme.css after acs.css). A downstream project supplies its
           own theme instead; it never loads this file.
*/

/* ── SPPAS color tokens ─────────────────────────────────── */

:root {
    /* Items of the side menu: the bar is dark in both modes, so a white
       veil lightens them the same way in both. */
    --nav-item-bg-color: rgba(255, 255, 255, 0.05);
    --nav-item-bg-color-hover: rgba(255, 255, 255, 0.12);
    --nav-item-bg-color-current: rgba(255, 255, 255, 0.18);

    /* Setup: the caption of a table */
    --table-caption-bg-color: rgb(230, 235, 245);
    --table-caption-fg-color: rgb(30, 30, 40);
    --wizard-legend-bg-color: rgb(70, 80, 150);
    --wizard-legend-fg-color: rgb(245, 250, 255);
    --install-button-bg-color: rgba(65, 107, 45, 0.65);
    --select-disabled-bg-color: rgb(235, 238, 245);
    --select-disabled-bg-image: linear-gradient(to top, rgb(216, 221, 232), rgb(235, 238, 245) 33%);
    --scrollbar-thumb-color: rgb(102, 102, 102);
    --scrollbar-track-color: rgb(34, 42, 68);
}

/* ── Light mode ───────────────────────────────────────────── */

/* was: :root:not([data-theme=dark]), [data-theme=light] */
:root:not(.dark) {
    --bg-color: transparent; /*rgb(249, 250, 251);*/
    --body-bg-color: linear-gradient(160deg,
    rgb(226 230 250) 0%,
    rgb(231 230 236) 55%,
    rgb(242 235 214) 100%);

    --bg-color-alt: rgb(235, 235, 240);
    --fg-color: rgb(17, 17, 20);
    --fg-color-alt: rgb(28, 28, 32);

    --header-bg-color: linear-gradient(323deg, rgb(10, 40, 90) 0%, rgb(0, 0, 50) 100%);
    --header-fg-color: rgb(220, 230, 255);
    --footer-bg-color: linear-gradient(to bottom,
        rgb(226 230 250) 0%,
        rgb(231 230 236) 30%,
        rgb(200, 200, 250) 40%,
    rgb(197 209 239) 80%,
    rgb(191 230 236) 100%);
    --footer-fg-color: rgb(20, 10, 50);
    /* The first shade of the gradient below: the bar is painted by the image,
       but the hamburger button only takes a background-color. */
    --nav-bg-color: rgb(0, 0, 50);
    --nav-bg-image: linear-gradient(180deg,
        rgb(0, 0, 50) 0%,
        rgb(10, 10, 60) 20%,
        rgb(10, 40, 90) 40%,
        rgb(70, 70, 140) 60%,
        rgb(20, 100, 110) 100%);
    --nav-fg-color: rgb(220, 230, 255);
    --app-bg-image: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);

    --wizard-fieldset-bg-image: linear-gradient(120deg, rgb(210, 210, 250) 0%, rgb(233, 233, 242) 50%, rgb(241, 223, 245) 100%);

    /* The grounds of the panels: the same two gradients in both modes, a
       shade lighter on a light page, a shade darker on a dark one. They are
       what keeps a page of choices from being a grey one. */
    --apps-panel-bg-image: linear-gradient(120deg, rgb(25, 108, 140) 0%, rgb(192, 100, 229) 60%, rgb(255, 255, 186) 100%);
    --links-panel-bg-image: linear-gradient(90deg, rgb(25, 108, 140) 0%, rgb(153, 229, 158) 40%, rgb(227, 239, 255) 100%);


    /* A pair: wexa.css writes the legend of a fieldset with it. */
    --progress-bg-color: rgb(0, 0, 35);
    --progress-fg-color: rgb(235, 240, 255);
    /* A button is read against a page that is almost white and cards that
       are barely tinted: it is the navy of the header that makes it a
       surface of its own. */
    --buttons-bg-color: rgb(10, 40, 90);
    --buttons-bg-color-hover: rgb(20, 75, 140);
    --buttons-fg-color: rgb(235, 240, 255);

    --dialog-fg-color: rgb(10, 40, 90);
    --dialog-bg-color: rgb(235, 240, 255);

    --border-color-alt: rgb(42, 111, 190);
    --border-color: rgb(72, 150, 240);

    --a-color: rgb(0, 70, 100);
    --link-color: rgb(42, 111, 190);
    --li-color: rgb(20, 100, 110);
    --blockquote-border-color: rgb(20, 100, 110);

    --card-bg-color: rgb(238, 233, 242);
    --card-fg-color: rgb(10, 40, 90);

    --img-bg-color: rgba(228, 230, 245, 0.4);

}

/* ── Dark mode ────────────────────────────────────────────── */

@media screen {
    .dark {
        --bg-color: transparent;
        --body-bg-color: linear-gradient(160deg,
            rgb(6, 14, 40) 0%,
            rgb(14, 38, 72) 45%,
            rgb(16, 52, 62) 100%);

        --bg-color-alt: rgb(25, 25, 45);
        --fg-color: rgb(226, 232, 240);
        --fg-color-alt: rgb(250, 250, 255);

        --header-bg-color: linear-gradient(323deg, rgb(15, 45, 95) 0%, rgb(10, 25, 65) 70%, rgb(6, 14, 40) 100%);
        --header-fg-color: rgb(220, 232, 255);
        --footer-bg-color: linear-gradient(to bottom,
            var(--bg-color) 0%,
            rgb(12, 22, 55) 30%,
            rgb(15, 45, 95) 50%,
            rgb(30, 75, 130) 70%,
            rgb(25, 100, 130) 100%);
        --footer-fg-color: rgb(232, 240, 255);
        --nav-bg-color: rgb(6, 14, 40);
        --nav-bg-image: linear-gradient(180deg,
            rgb(6, 14, 40) 0%,
            rgb(12, 22, 55) 20%,
            rgb(15, 45, 95) 40%,
            rgb(35, 70, 130) 60%,
            rgb(25, 100, 130) 100%);
        --nav-fg-color: rgb(220, 232, 255);
        --app-bg-image: linear-gradient(0deg, rgba(0, 0, 45, 0.9) 0%, rgba(0, 0, 45, 0.7) 100%);

        --wizard-fieldset-bg-image: linear-gradient(120deg, rgb(8, 16, 45) 0%, rgb(12, 28, 70) 50%, rgb(18, 40, 90) 100%);

        --apps-panel-bg-image: linear-gradient(120deg, rgb(15, 66, 85) 0%, rgb(117, 61, 139) 60%, rgb(172, 164, 113) 100%);
        --links-panel-bg-image: linear-gradient(90deg, rgb(15, 66, 85) 0%, rgb(93, 139, 96) 40%, rgb(138, 146, 155) 100%);

        /* Turned over: the page is dark, so the button is the light one. */
        --buttons-bg-color: rgb(205, 222, 250);
        --buttons-bg-color-hover: rgb(228, 238, 255);
        --buttons-fg-color: rgb(8, 25, 60);

        --dialog-bg-color: rgb(10, 40, 90);
        --dialog-fg-color: rgb(235, 240, 255);

        --border-color: rgb(100, 120, 170);
        --a-color: rgb(120, 180, 240);
        --li-color: var(--sppas-color1);
        --blockquote-border-color: var(--sppas-color1);
        --progress-bg-color: rgb(205, 222, 250);
        --progress-fg-color: rgb(8, 25, 60);

        --card-bg-color: rgb(18, 32, 68);
        --card-fg-color: rgb(215, 228, 255);

        --img-bg-color: rgba(240, 246, 255, 0.75);
    }
}

/* ── Contrast mode ────────────────────────────────────────── */

.contrast:not(.dark) {
    --a-color: rgb(0, 70, 100);
}


/* ── Accent pair ──────────────────────────────────────────── */

/* The numbers of the chapters and of the sections of a document are drawn
   with it, and so are the headings of a slide. Declared in @layer theme,
   as the themes of Whakerexa do: a single document can then override it
   without a fight over specificity. */

@layer theme {

    :root:not(.dark) {
        --custom-color1: rgb(10, 40, 90);
        --custom-color2: rgb(100, 160, 220);
    }

    .dark {
        --custom-color1: rgb(130, 190, 240);
        --custom-color2: rgb(18, 32, 68);
    }

}