/*
:filename: sppas.ui.swapp.statics.spinoff.splics.css.splics_theme.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: Colour theme of the SPLI:CS applications.

.. _This file is part of AutoCS: https://autocs.sourceforge.io/
.. _Originally developed in SPPAS: https://sppas.org/

    -------------------------------------------------------------------------

    Copyright (C) 2021-2026  Brigitte Bigi, CNRS
    Laboratoire Parole et Langage, Aix-en-Provence, France

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

    This banner notice must not be removed.

    -------------------------------------------------------------------------

This file is a theme: it gives a value to colour variables already declared
by Whakerexa and by SPPAS, and nothing else. Sizes, weights and radiuses are
in splics.css.

*/



/* =========================================================================
   THÈME CLAIR
   ========================================================================= */

:root:not(.dark) {

    --bg-color-1: #F9FFFC;
    --fg-color-1: #0F2314;

    --bg-color-2: #ECFFEC;
    --fg-color-2: #132417;

    --bg-color-3: #FFE7D1;
    --fg-color-3: #9A5520;

    --bg-color-4: #FFF9E3;
    --fg-color-4: #342929;

    /* ---- La page ------------------------------------------------------ */

    --border-color: rgb(71, 81, 71);
    --border-color-alt: rgb(91, 111, 91);

    /* Un item du menu se distingue de la barre par un voile, pas par une
       teinte propre : en mode clair, l'item est plus clair que la barre. */
    --nav-item-bg-color: rgba(255, 255, 255, 0.10);
    --nav-item-bg-color-hover: rgba(255, 255, 255, 0.20);
    --nav-item-bg-color-current: rgba(255, 255, 255, 0.30);
    --nav-item-pressed-shadow-color: rgba(255, 255, 255, 0.25);

    /* ---- Les tableaux ------------------------------------------------- */
    --table-row-stripped-bg-color: rgba(184, 203, 208, 0.28);

    /* ---- Le panneau des applications ---------------------------------- */

    /* La texture des vagues sur le fond du panneau. */
    --apps-panel-bg-color: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><path d='M0 10 Q10 0 20 10 T40 10' fill='none' stroke='black' stroke-opacity='0.1' stroke-width='2'/></svg>"), var(--bg-color-2);
    --app-bg-image: var(--bg-color-1);         /* le fond d'une carte */

    /* ---- La table des matières d'une page ----------------------------- */

    /* Lues par main_swapp.css. Le numéro de chaque entrée porte un fond
       qui lui est propre, un par rang. */
    --toc-num-fg-color: rgb(255, 255, 255);
    --toc-num-bg-color: rgb(88, 126, 105);
    --toc-num-bg-color-1: rgb(65, 128, 65);
    --toc-num-bg-color-2: rgb(45, 105, 165);
    --toc-num-bg-color-3: rgb(190, 95, 0);
    --toc-num-bg-color-4: rgb(112, 145, 43);
    --toc-num-bg-color-5: rgb(130, 65, 25);
    --toc-num-bg-color-6: rgb(45, 130, 120);
    --toc-num-bg-color-7: rgb(160, 100, 0);
    --toc-num-bg-color-8: rgb(175, 85, 0);
    --toc-num-bg-color-9: rgb(60, 100, 50);
    --toc-num-bg-color-10: rgb(88, 126, 105);

    /* ---- Divers -------------------------------------------------------- */

    --shadow-color: rgba(0, 0, 0, 0.1);
    --outline-color: rgb(0, 155, 52);

    --dialog-bg-color: rgb(255, 249, 227);
    --dialog-fg-color: rgb(31, 31, 31);

    --img-bg-color: transparent;
}


/* =========================================================================
   THÈME SOMBRE

   Mêmes rubriques, dans le même ordre, pour se lire en regard du thème
   clair.
   ========================================================================= */

@media screen {
    .dark {

        --fg-color-1: #EBFFF4;
        --bg-color-1: #000600;

        --fg-color-2: #FFF9E3;
        --bg-color-2: #000E00;

        --fg-color-3: #FFE7D1;
        --bg-color-3: #462003;

        --fg-color-4: #FFF9E3;
        --bg-color-4: #1E140F;

        /* ---- La page -------------------------------------------------- */
        --border-color: rgb(230, 240, 230);
        --border-color-alt: rgb(200, 220, 200);

        /* En mode sombre, l'item est plus foncé que la barre. */
        --nav-item-bg-color: rgba(0, 0, 0, 0.10);
        --nav-item-bg-color-hover: rgba(0, 0, 0, 0.20);
        --nav-item-bg-color-current: rgba(0, 0, 0, 0.30);
        --nav-item-pressed-shadow-color: rgba(0, 0, 0, 0.25);

        /* ---- Les tableaux --------------------------------------------- */

        --table-row-stripped-bg-color: rgb(24, 28, 24);

        /* ---- Le panneau des applications ------------------------------ */

        --apps-panel-bg-color: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20'><path d='M0 10 Q10 0 20 10 T40 10' fill='none' stroke='white' stroke-opacity='0.1' stroke-width='2'/></svg>"), rgb(47, 42, 30);
        --app-bg-image: rgb(28, 43, 35);        /* le fond d'une carte */
        --app-button-bg-color: linear-gradient(to right, rgb(0, 92, 151) 0%, rgb(54, 55, 149) 51%, rgb(0, 92, 151) 100%);
        --app-button-fg-color: rgb(255, 255, 255);

        /* ---- La table des matières d'une page ------------------------- */

        --toc-num-fg-color: rgb(24, 34, 28);
        --toc-num-bg-color: rgb(95, 150, 135);
        --toc-num-bg-color-1: rgb(73, 166, 98);
        --toc-num-bg-color-2: rgb(122, 170, 205);
        --toc-num-bg-color-3: rgb(232, 160, 75);
        --toc-num-bg-color-4: rgb(160, 190, 100);
        --toc-num-bg-color-5: rgb(205, 150, 95);
        --toc-num-bg-color-6: rgb(100, 180, 170);
        --toc-num-bg-color-7: rgb(240, 190, 90);
        --toc-num-bg-color-8: rgb(216, 155, 102);
        --toc-num-bg-color-9: rgb(130, 175, 120);
        --toc-num-bg-color-10: rgb(95, 150, 135);

        /* ---- Divers ---------------------------------------------------- */

        --shadow-color: rgba(25, 25, 25);
        --outline-color: rgb(122, 255, 90);

        --dialog-bg-color: rgb(31, 32, 30);
        --dialog-fg-color: rgb(241, 244, 230);

        --img-bg-color: transparent;

    }
}

/* =========================================================================
   VALEURS COMMUNES AUX DEUX MODES
   ========================================================================= */

:root {

    /* ----------------- La page --------------- */
    --bg-color: var(--bg-color-1);
    --fg-color: var(--fg-color-1);
    --bg-color-alt: var(--bg-color-2);
    --fg-color-alt: var(--fg-color-2);
    --columns-sep-color-light: var(--bg-color-3);
    --columns-sep-color-dark: var(--fg-color-3);

    /* Les sections d'une page alternent deux fonds : layout.css échange
       les deux teintes d'une section à la suivante. */
    --panel-bg-color-alt: var(--bg-color-1);
    --panel-fg-color-alt: var(--fg-color-1);

    /* ---- Le bandeau, le pied de page et le menu ----------------------- */

    --header-bg-color: radial-gradient(rgba(0, 0, 0, 0.1) calc(var(--font-size) / 15), transparent calc(var(--font-size) / 15)) 0 0 / var(--font-size) var(--font-size), var(--bg-color-2);
    --footer-bg-color: radial-gradient(rgba(0, 0, 0, 0.1) calc(var(--font-size) / 15), transparent calc(var(--font-size) / 15)) 0 0 / var(--font-size) var(--font-size), var(--bg-color-2);
    --nav-bg-color: var(--bg-color-2);
    --header-fg-color: var(--fg-color-2);
    --footer-fg-color: var(--fg-color-2);
    --nav-fg-color: var(--fg-color-2);

    /* ---- Les cartes --------------------------------------------------- */

    /* layout.css peint une carte avec --card-bg-color, et se rabat sur le
       fond des blocs si elle n'est pas donnée. Le vert de la mise en avant
       la distingue aussi bien de la page que d'une section. */
    --card-bg-color: var(--bg-color-4);
    --card-fg-color: var(--fg-color-4);


    /* ---- Les tables --------------------------------------------------- */

    --table-border-color: var(--border-color);
    --table-head-bg-color: var(--bg-color-2);
    --table-head-fg-color: var(--fg-color-2);
    --table-caption-bg-color: var(--bg-color-4);
    --table-caption-fg-color: var(--fg-color-4);

    /* ---- Les boutons ---------------------------------------------- */

    --buttons-bg-color: var(--bg-color-3);
    --buttons-fg-color: var(--fg-color-3);
    --buttons-bg-color-hover: var(--bg-color-2);

    /* ---- Les titres, les liens et les puces --------------------------- */
    --h1-color: var(--fg-color-1);
    --h2-color: var(--fg-color-2);
    --h3-color: var(--fg-color-3);
    --h4-color: var(--fg-color-3);
    --h5-color: var(--fg-color-4);
    --h6-color: var(--fg-color-4);

    --a-color: var(--fg-color-3);

    --li-color: var(--fg-color-4);

    /* ---- Autres -------------------------------------------------- */

    --blockquote-bg-color: var(--bg-color-4);
    --blockquote-fg-color: var(--fg-color-4);
    --blockquote-border-color: var(--bg-color-2);
    --blockquote-footer-color: var(--bg-color-2);

    --progress-bg-color: rgb(39, 56, 49);
    --toc-label-color-hover: rgb(175, 85, 0);

    --tooltip-bg-color: var(--bg-color-4);
    --tooltip-fg-color: var(--fg-color-4);
}



/* =========================================================================
   RÈGLES
   ========================================================================= */


/* --------------------------------------- */
/* Le menu latéral                         */
/* --------------------------------------- */

/* Les icônes du menu sont orange et le libellé garde la couleur du texte.
   wexa.css et menu.css donnent une seule couleur au bouton entier, que les
   SVG suivent par currentColor : elle est posée ici sur le SVG seul.*/
nav#nav-content .menuitem > svg {
    color: rgb(172, 63, 0);
}
.dark nav#nav-content .menuitem > svg {
    color: rgb(182, 73, 10);
}



/* --------------------------------------- */
/* Le panneau des applications             */
/* --------------------------------------- */

.apps-panel {
    background: var(--apps-panel-bg-color);
}


/* --------------------------------------- */
/* La table des matières d'une page        */
/* --------------------------------------- */

/* main_swapp.css ne distingue que les cinq premiers numéros et donne la
   couleur du premier rang à tous les suivants. Les pages de ce site en
   comptent dix. */
.page-toc li:nth-child(6) .toc-num {
    background: var(--toc-num-bg-color-6);
}

.page-toc li:nth-child(7) .toc-num {
    background: var(--toc-num-bg-color-7);
}

.page-toc li:nth-child(8) .toc-num {
    background: var(--toc-num-bg-color-8);
}

.page-toc li:nth-child(9) .toc-num {
    background: var(--toc-num-bg-color-9);
}

.page-toc li:nth-child(10) .toc-num {
    background: var(--toc-num-bg-color-10);
}


/* --------------------------------------- */
/* Divers                                  */
/* --------------------------------------- */

figure.img-video-visualization button[name=play-btn] {
    color: red;
}

.default {
    box-shadow: 0 0 1rem rgb(238, 238, 238);
}