/**
 * color-theme.css
 * @ GULA Theme
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 * 
 */
 :root {

     /* --ht_rgb_maingreen:   105,162,158; */ /* in ...??? */
     --white: 255,255,255;
     --black: 0,0,0;
    /* --ht_rgb_orange:     255,115, 70; */
    /* --ht_rgb_darkgreen:   50,100,115; */
    /* --site_bgcolor: 69,74,84; nicht in Funktion */

    /* ---------------------------------------------------------------
     * Hausfarben Nepal Swiss — 12.08.2026 beim Theme-Neuaufbau gesetzt.
     * Quelle: altes Theme nepalswiss, library/grid/root.css Z. 60–75.
     *
     * ACHTUNG bei --sitefgcolor: Im Master ist sie WEISS. Diese Site ist
     * hell mit dunkler Schrift — würde man den Master-Wert stehen lassen,
     * kippten rund 40 abgeleitete Stufen (die color-mix-Reihen unten) auf
     * Weiss und alles Geschriebene verschwände.
     *
     * Und die Schreibweise beachten: --sitefgcolor ist eine FERTIGE Farbe,
     * --sitefgcolor_rgb ein Zahlentripel. rgba( var(--sitefgcolor), 0.5 )
     * ist immer falsch — genau dieser Fehler steckte am 11.08.2026 an 17
     * Stellen in fünf Master-Plugins.
     * --------------------------------------------------------------- */

    --rgb_red:               230, 0, 11;      /* Hausfarbe */
    --rgb_redorange:         234, 89, 1;      /* Hover-Farbe

        ACHTUNG, bewusste Abweichung vom alten Zustand: Diese Variable war
        dort NUR in library/grid/colors/color-custom-vor-aufraeumen-2026-08-11.css
        definiert — einer Sicherungsdatei, die niemand lädt. Die zwei
        Hover-Regeln (Hamburger-Symbol, Kreuz der Überlagerung) waren damit
        auch auf der alten Site ungültig und fielen still weg; es gab dort
        also gar keinen Hover-Wechsel. Hier ist sie definiert, damit die
        Regeln greifen. Wer den alten Zustand exakt will: Zeile entfernen. */
    --rgb_darkgrey:          40, 40, 40;

    /*  Beim Theme-Umzug verlorene Farben (12.08.2026).
     *
     *  Sie waren im alten Theme in library/grid/colors/color-custom.css
     *  definiert — einer Datei, die per @import aus colors.css kam. Mein
     *  erster Abgleich hat @import nicht verfolgt und sie darum übersehen.
     *  Ohne diese Zeilen sind die Regeln, die sie benutzen, ungültig und
     *  fallen still weg: Footer-Link-Hover, Body-Hintergrund, Hover der
     *  Projekt-Buttons.
     *
     *  Was NICHT nachgetragen ist: die --green-*-Reihe. Sie wird allein von
     *  guladevs eigener root.css referenziert, nirgends von dieser Site —
     *  und dort ist sie ohnehin auf jeder guladev-Installation undefiniert,
     *  weil library/gula-theme/css/colors/_colors.css mit Unterstrich liegt
     *  und der @import in style.css auskommentiert ist.                    */
    --redviolett:            148, 22, 128;   /* RGB! Footer-Links, .redviolett  */
    --red:                   227, 0, 11;     /* RGB! .red — u.a. der Footer-Titel */
    --red-400:               #e72630;   /* nes-cpt-slider, Button-Hover     */
    --red-600:               #d2020b;
    --site-bgcolor:          255, 255, 255;   /* RGB! Body-Hintergrund      */
    --sitecolor:             var( --rgb_darkgrey );   /* alter Themename, von portierten Regeln benutzt */

    /* Die linken Variablennamen nicht ändern */
    --sitefgcolor:           #282828;
    --sitefgcolor_rgb:       40, 40, 40;
    --sitebgcolor:           #ffffff;
    --sitebgcolor_rgb:       255, 255, 255;
    --site_link_color:       var( --sitefgcolor );
    --site_linkhover_color:  rgba( var( --rgb_red ), 1.0 );
    --nav_linkcurrent_color: rgba( var( --rgb_red ), 1.0 );
    --nav_bgcolor:           var( --sitebgcolor );
    --title_color:           rgba( var( --rgb_red ), 1.0 );
    --selection_color:       rgba( var( --rgb_red ), 1.0 );
    --footer_bg:             35, 52, 72;      /* RGB ! */
    --copyright_bg:          var( --rgb_red );
    --tablebg:               35, 52, 72;      /* RGB ! */
    --tc_brightred:          222,53,76;
    --brightred:             #DE354C;

    /* nur anpassen, nicht löschen, wird überall verwendet */
    --sitefgcolor_t005: color-mix(in oklab, var(--sitefgcolor), transparent 99.5% ); 
    --sitefgcolor_t01:  color-mix(in oklab, var(--sitefgcolor), transparent 99% ); 
    --sitefgcolor_t05:  color-mix(in oklab, var(--sitefgcolor), transparent 95% ); 
    --sitefgcolor_t10:  color-mix(in oklab, var(--sitefgcolor), transparent 90% ); 
    --sitefgcolor_t15:  color-mix(in oklab, var(--sitefgcolor), transparent 85% ); 
    --sitefgcolor_t20:  color-mix(in oklab, var(--sitefgcolor), transparent 80% ); 
    --sitefgcolor_t25:  color-mix(in oklab, var(--sitefgcolor), transparent 75% ); 
    --sitefgcolor_t30:  color-mix(in oklab, var(--sitefgcolor), transparent 70% ); 
    --sitefgcolor_t35:  color-mix(in oklab, var(--sitefgcolor), transparent 65% ); 
    --sitefgcolor_t40:  color-mix(in oklab, var(--sitefgcolor), transparent 60% ); 
    --sitefgcolor_t45:  color-mix(in oklab, var(--sitefgcolor), transparent 55% ); 
    --sitefgcolor_t50:  color-mix(in oklab, var(--sitefgcolor), transparent 50% ); 
    --sitefgcolor_t55:  color-mix(in oklab, var(--sitefgcolor), transparent 45% ); 
    --sitefgcolor_t60:  color-mix(in oklab, var(--sitefgcolor), transparent 40% ); 
    --sitefgcolor_t65:  color-mix(in oklab, var(--sitefgcolor), transparent 35% ); 
    --sitefgcolor_t70:  color-mix(in oklab, var(--sitefgcolor), transparent 30% ); 
    --sitefgcolor_t75:  color-mix(in oklab, var(--sitefgcolor), transparent 25% ); 
    --sitefgcolor_t80:  color-mix(in oklab, var(--sitefgcolor), transparent 20% ); 
    --sitefgcolor_t85:  color-mix(in oklab, var(--sitefgcolor), transparent 15% ); 
    --sitefgcolor_t90:  color-mix(in oklab, var(--sitefgcolor), transparent 10% ); 
    /* nur anpassen, nicht löschen, wird überall verwendet */
    --sitebgcolor_t005: color-mix(in oklab, var(--sitebgcolor), transparent 99.5% ); 
    --sitebgcolor_t01:  color-mix(in oklab, var(--sitebgcolor), transparent 99% ); 
    --sitebgcolor_t05:  color-mix(in oklab, var(--sitebgcolor), transparent 95% ); 
    --sitebgcolor_t10:  color-mix(in oklab, var(--sitebgcolor), transparent 90% ); 
    --sitebgcolor_t15:  color-mix(in oklab, var(--sitebgcolor), transparent 85% ); 
    --sitebgcolor_t20:  color-mix(in oklab, var(--sitebgcolor), transparent 80% ); 
    --sitebgcolor_t25:  color-mix(in oklab, var(--sitebgcolor), transparent 75% ); 
    --sitebgcolor_t30:  color-mix(in oklab, var(--sitebgcolor), transparent 70% ); 
    --sitebgcolor_t35:  color-mix(in oklab, var(--sitebgcolor), transparent 65% ); 
    --sitebgcolor_t40:  color-mix(in oklab, var(--sitebgcolor), transparent 60% ); 
    --sitebgcolor_t45:  color-mix(in oklab, var(--sitebgcolor), transparent 55% ); 
    --sitebgcolor_t50:  color-mix(in oklab, var(--sitebgcolor), transparent 50% ); 
    --sitebgcolor_t55:  color-mix(in oklab, var(--sitebgcolor), transparent 45% ); 
    --sitebgcolor_t60:  color-mix(in oklab, var(--sitebgcolor), transparent 40% ); 
    --sitebgcolor_t65:  color-mix(in oklab, var(--sitebgcolor), transparent 35% ); 
    --sitebgcolor_t70:  color-mix(in oklab, var(--sitebgcolor), transparent 30% ); 
    --sitebgcolor_t75:  color-mix(in oklab, var(--sitebgcolor), transparent 25% ); 
    --sitebgcolor_t80:  color-mix(in oklab, var(--sitebgcolor), transparent 20% ); 
    --sitebgcolor_t85:  color-mix(in oklab, var(--sitebgcolor), transparent 15% ); 
    --sitebgcolor_t90:  color-mix(in oklab, var(--sitebgcolor), transparent 10% ); 

    
    /* nur anpassen, nicht löschen, wird überall verwendet */
    /* --sbgcolor: rgb(69, 74, 84);  */
    --sbgcolor: #747c8b; 
        --sbgcolor-5:   color-mix(in oklab, var(--sbgcolor), white 90% ); 
        --sbgcolor-10:  color-mix(in oklab, var(--sbgcolor), white 80% ); 
        --sbgcolor-15:  color-mix(in oklab, var(--sbgcolor), white 70% );
        --sbgcolor-20:  color-mix(in oklab, var(--sbgcolor), white 60% ); 
        --sbgcolor-25:  color-mix(in oklab, var(--sbgcolor), white 50% );
        --sbgcolor-30:  color-mix(in oklab, var(--sbgcolor), white 40% ); 
        --sbgcolor-35:  color-mix(in oklab, var(--sbgcolor), white 30% );
        --sbgcolor-40:  color-mix(in oklab, var(--sbgcolor), white 20% );
        --sbgcolor-45:  color-mix(in oklab, var(--sbgcolor), white 10% );
        --sbgcolor-50:  var(--sbgcolor);
        --sbgcolor-55:  color-mix(in oklab, var(--sbgcolor), black 7% );
        --sbgcolor-60:  color-mix(in oklab, var(--sbgcolor), black 14% );
        --sbgcolor-65:  color-mix(in oklab, var(--sbgcolor), black 21% );
        --sbgcolor-70:  color-mix(in oklab, var(--sbgcolor), black 28% );
        --sbgcolor-75:  color-mix(in oklab, var(--sbgcolor), black 35% );
        --sbgcolor-80:  color-mix(in oklab, var(--sbgcolor), black 42% );
        --sbgcolor-85:  color-mix(in oklab, var(--sbgcolor), black 49% );
        --sbgcolor-90:  color-mix(in oklab, var(--sbgcolor), black 56% );
        --sbgcolor-95:  color-mix(in oklab, var(--sbgcolor), black 63% );
        --sbgcolor-100: color-mix(in oklab, var(--sbgcolor), black 70% );


    /* --ht_maingreen:  #69a29e; */
    --maingreen: #629d99; /* oklch */
        --maingreen-5:   color-mix(in oklab, var(--maingreen), white 90% ); 
        --maingreen-10:  color-mix(in oklab, var(--maingreen), white 80% ); 
        --maingreen-15:  color-mix(in oklab, var(--maingreen), white 70% );
        --maingreen-20:  color-mix(in oklab, var(--maingreen), white 60% ); 
        --maingreen-25:  color-mix(in oklab, var(--maingreen), white 50% );
        --maingreen-30:  color-mix(in oklab, var(--maingreen), white 40% ); 
        --maingreen-35:  color-mix(in oklab, var(--maingreen), white 30% );
        --maingreen-40:  color-mix(in oklab, var(--maingreen), white 20% );
        --maingreen-45:  color-mix(in oklab, var(--maingreen), white 10% );
        --maingreen-50:  var(--maingreen);
        --maingreen-55:  color-mix(in oklab, var(--maingreen), black 7% );
        --maingreen-60:  color-mix(in oklab, var(--maingreen), black 14% );
        --maingreen-65:  color-mix(in oklab, var(--maingreen), black 21% );
        --maingreen-70:  color-mix(in oklab, var(--maingreen), black 28% );
        --maingreen-75:  color-mix(in oklab, var(--maingreen), black 35% );
        --maingreen-80:  color-mix(in oklab, var(--maingreen), black 42% );
        --maingreen-85:  color-mix(in oklab, var(--maingreen), black 49% );
        --maingreen-90:  color-mix(in oklab, var(--maingreen), black 56% );
        --maingreen-95:  color-mix(in oklab, var(--maingreen), black 63% );
        --maingreen-100: color-mix(in oklab, var(--maingreen), black 70% );

    --mediumgreen: #698e96;
        --mediumgreen-5:   color-mix(in oklab, var(--mediumgreen), white 81% ); 
        --mediumgreen-10:  color-mix(in oklab, var(--mediumgreen), white 72% ); 
        --mediumgreen-15:  color-mix(in oklab, var(--mediumgreen), white 63% ); 
        --mediumgreen-20:  color-mix(in oklab, var(--mediumgreen), white 54% ); 
        --mediumgreen-25:  color-mix(in oklab, var(--mediumgreen), white 45% ); 
        --mediumgreen-30:  color-mix(in oklab, var(--mediumgreen), white 36% ); 
        --mediumgreen-35:  color-mix(in oklab, var(--mediumgreen), white 27% ); 
        --mediumgreen-40:  color-mix(in oklab, var(--mediumgreen), white 18% );
        --mediumgreen-45:  color-mix(in oklab, var(--mediumgreen), white 9% );
        --mediumgreen-50:  var(--mediumgreen);
        --mediumgreen-55:  color-mix(in oklab, var(--mediumgreen), black 7.5% );
        --mediumgreen-60:  color-mix(in oklab, var(--mediumgreen), black 15% );
        --mediumgreen-65:  color-mix(in oklab, var(--mediumgreen), black 22.5% );
        --mediumgreen-70:  color-mix(in oklab, var(--mediumgreen), black 30% );
        --mediumgreen-75:  color-mix(in oklab, var(--mediumgreen), black 37.5% );
        --mediumgreen-80:  color-mix(in oklab, var(--mediumgreen), black 45% );
        --mediumgreen-85:  color-mix(in oklab, var(--mediumgreen), black 52.5% );
        --mediumgreen-90:  color-mix(in oklab, var(--mediumgreen), black 60% );
        --mediumgreen-95:  color-mix(in oklab, var(--mediumgreen), black 67.5% );
        --mediumgreen-100: color-mix(in oklab, var(--mediumgreen), black 75% );

    --darkgreen:  #336473;
        --darkgreen-5:   color-mix(in oklab, var(--darkgreen), white 81% ); 
        --darkgreen-10:  color-mix(in oklab, var(--darkgreen), white 72% ); 
        --darkgreen-15:  color-mix(in oklab, var(--darkgreen), white 63% ); 
        --darkgreen-20:  color-mix(in oklab, var(--darkgreen), white 54% ); 
        --darkgreen-25:  color-mix(in oklab, var(--darkgreen), white 45% ); 
        --darkgreen-30:  color-mix(in oklab, var(--darkgreen), white 36% ); 
        --darkgreen-35:  color-mix(in oklab, var(--darkgreen), white 27% ); 
        --darkgreen-40:  color-mix(in oklab, var(--darkgreen), white 18% );
        --darkgreen-45:  color-mix(in oklab, var(--darkgreen), white 9% );
        --darkgreen-50:  var(--darkgreen);
        --darkgreen-55:  color-mix(in oklab, var(--darkgreen), black 7.5% );
        --darkgreen-60:  color-mix(in oklab, var(--darkgreen), black 15% );
        --darkgreen-65:  color-mix(in oklab, var(--darkgreen), black 22.5% );
        --darkgreen-70:  color-mix(in oklab, var(--darkgreen), black 30% );
        --darkgreen-75:  color-mix(in oklab, var(--darkgreen), black 37.5% );
        --darkgreen-80:  color-mix(in oklab, var(--darkgreen), black 45% );
        --darkgreen-85:  color-mix(in oklab, var(--darkgreen), black 52.5% );
        --darkgreen-90:  color-mix(in oklab, var(--darkgreen), black 60% );
        --darkgreen-95:  color-mix(in oklab, var(--darkgreen), black 67.5% );
        --darkgreen-100: color-mix(in oklab, var(--darkgreen), black 75% );

    --tertiary700: #3c445e;
    --tertiary: #65729a;
        --tertiary-5:   color-mix(in oklab, var(--tertiary), white 81% ); 
        --tertiary-10:  color-mix(in oklab, var(--tertiary), white 72% ); 
        --tertiary-15:  color-mix(in oklab, var(--tertiary), white 63% ); 
        --tertiary-20:  color-mix(in oklab, var(--tertiary), white 54% ); 
        --tertiary-25:  color-mix(in oklab, var(--tertiary), white 45% ); 
        --tertiary-30:  color-mix(in oklab, var(--tertiary), white 36% ); 
        --tertiary-35:  color-mix(in oklab, var(--tertiary), white 27% ); 
        --tertiary-40:  color-mix(in oklab, var(--tertiary), white 18% );
        --tertiary-45:  color-mix(in oklab, var(--tertiary), white 9% );
        --tertiary-50:  var(--tertiary);
        --tertiary-55:  color-mix(in oklab, var(--tertiary), black 7.5% );
        --tertiary-60:  color-mix(in oklab, var(--tertiary), black 15% );
        --tertiary-65:  color-mix(in oklab, var(--tertiary), black 22.5% );
        --tertiary-70:  color-mix(in oklab, var(--tertiary), black 30% );
        --tertiary-75:  color-mix(in oklab, var(--tertiary), black 37.5% );
        --tertiary-80:  color-mix(in oklab, var(--tertiary), black 45% );
        --tertiary-85:  color-mix(in oklab, var(--tertiary), black 52.5% );
        --tertiary-90:  color-mix(in oklab, var(--tertiary), black 60% );
        --tertiary-95:  color-mix(in oklab, var(--tertiary), black 67.5% );
        --tertiary-100: color-mix(in oklab, var(--tertiary), black 75% );

    --orange_rgb: 255, 102, 51;
    --orange: #ff6633;
        --orange-5:   color-mix(in oklab, var(--orange), white 81% ); 
        --orange-10:  color-mix(in oklab, var(--orange), white 72% ); 
        --orange-15:  color-mix(in oklab, var(--orange), white 63% ); 
        --orange-20:  color-mix(in oklab, var(--orange), white 54% ); 
        --orange-25:  color-mix(in oklab, var(--orange), white 45% ); 
        --orange-30:  color-mix(in oklab, var(--orange), white 36% ); 
        --orange-35:  color-mix(in oklab, var(--orange), white 27% ); 
        --orange-40:  color-mix(in oklab, var(--orange), white 18% );
        --orange-45:  color-mix(in oklab, var(--orange), white 9% );
        --orange-50:  var(--orange);
        --orange-55:  color-mix(in oklab, var(--orange), black 7.5% );
        --orange-60:  color-mix(in oklab, var(--orange), black 15% );
        --orange-65:  color-mix(in oklab, var(--orange), black 22.5% );
        --orange-70:  color-mix(in oklab, var(--orange), black 30% );
        --orange-75:  color-mix(in oklab, var(--orange), black 37.5% );
        --orange-80:  color-mix(in oklab, var(--orange), black 45% );
        --orange-85:  color-mix(in oklab, var(--orange), black 52.5% );
        --orange-90:  color-mix(in oklab, var(--orange), black 60% );
        --orange-95:  color-mix(in oklab, var(--orange), black 67.5% );
        --orange-100: color-mix(in oklab, var(--orange), black 75% );

    /* --ht_lightgrey:  #eceee6; */
    --lightlime: #eceee6;
        --lightlime-5:  color-mix(in oklch, var(--lightlime), white 25% ); 
        --lightlime-10: color-mix(in oklch, var(--lightlime), white 20% ); 
        --lightlime-20: color-mix(in oklch, var(--lightlime), white 15% ); 
        --lightlime-30: color-mix(in oklch, var(--lightlime), white 10% ); 
        --lightlime-40: color-mix(in oklch, var(--lightlime), white 5% );
        --lightlime-50: var(--lightlime);
        --lightlime-60: color-mix(in oklch, var(--lightlime), black 15% );
        --lightlime-70: color-mix(in oklch, var(--lightlime), black 30% );
        --lightlime-80: color-mix(in oklch, var(--lightlime), black 45% );
        --lightlime-90: color-mix(in oklch, var(--lightlime), black 60% );
    
    --black: #000000; 
        --black-5:   color-mix(in oklab, var(--black), white 95% ); 
        --black-10:  color-mix(in oklab, var(--black), white 90% ); 
        --black-15:  color-mix(in oklab, var(--black), white 85% );
        --black-20:  color-mix(in oklab, var(--black), white 80% ); 
        --black-25:  color-mix(in oklab, var(--black), white 75% );
        --black-30:  color-mix(in oklab, var(--black), white 70% ); 
        --black-35:  color-mix(in oklab, var(--black), white 65% );
        --black-40:  color-mix(in oklab, var(--black), white 60% );
        --black-45:  color-mix(in oklab, var(--black), white 55% );
        --black-50:  color-mix(in oklab, var(--black), white 50% );
        --black-55:  color-mix(in oklab, var(--black), white 45% );
        --black-60:  color-mix(in oklab, var(--black), white 40% );
        --black-65:  color-mix(in oklab, var(--black), white 35% );
        --black-70:  color-mix(in oklab, var(--black), white 30% );
        --black-75:  color-mix(in oklab, var(--black), white 25% );
        --black-80:  color-mix(in oklab, var(--black), white 20% );
        --black-85:  color-mix(in oklab, var(--black), white 15% );
        --black-90:  color-mix(in oklab, var(--black), white 10% );
        --black-95:  color-mix(in oklab, var(--black), white 5% );
        --black-100: color-mix(in oklab, var(--black), white 0% );
}

.theme_sitecolor    { color: var(--sitefgcolor); }
.bg-theme_sitecolor { background-color: var(--sitebgcolor); }
.titlecolor         { color: var(--mediumgreen-40); }
.black, .fg-black   { color: rgba( var(--black), 1.0); }
.white, .fg-white   { color: rgba( var(--white), 1.0); }
.bg-black           { background-color: rgba( var(--black), 1.0); }
.bg-white           { background-color: rgba( var(--white), 1.0); }
.tc-brightred       { color: rgba( var(--tc_brightred), 1.0); }
.bg-tc-brightred    { background-color: rgba( var(--tc_brightred), 1.0); }

.background     { color: var(--sbgcolor); }
.background-5   { color: var(--sbgcolor-5); }
.background-10  { color: var(--sbgcolor-10); }
.background-15  { color: var(--sbgcolor-15); }
.background-20  { color: var(--sbgcolor-20); }
.background-25  { color: var(--sbgcolor-25); }
.background-30  { color: var(--sbgcolor-30); }
.background-35  { color: var(--sbgcolor-35); }
.background-40  { color: var(--sbgcolor-40); }
.background-45  { color: var(--sbgcolor-45); }
.background-50  { color: var(--sbgcolor-50); }
.background-55  { color: var(--sbgcolor-55); }
.background-60  { color: var(--sbgcolor-60); }
.background-65  { color: var(--sbgcolor-65); }
.background-70  { color: var(--sbgcolor-70); }
.background-75  { color: var(--sbgcolor-75); }
.background-80  { color: var(--sbgcolor-80); }
.background-85  { color: var(--sbgcolor-85); }
.background-90  { color: var(--sbgcolor-90); }
.background-95  { color: var(--sbgcolor-95); }
.background-100 { color: var(--sbgcolor-100); }
.bg-background     { background-color: var(--sbgcolor); }
.bg-background-5   { background-color: var(--sbgcolor-5); }
.bg-background-10  { background-color: var(--sbgcolor-10); }
.bg-background-15  { background-color: var(--sbgcolor-15); }
.bg-background-20  { background-color: var(--sbgcolor-20); }
.bg-background-25  { background-color: var(--sbgcolor-25); }
.bg-background-30  { background-color: var(--sbgcolor-30); }
.bg-background-35  { background-color: var(--sbgcolor-35); }
.bg-background-40  { background-color: var(--sbgcolor-40); }
.bg-background-45  { background-color: var(--sbgcolor-45); }
.bg-background-50  { background-color: var(--sbgcolor-50); }
.bg-background-55  { background-color: var(--sbgcolor-55); }
.bg-background-60  { background-color: var(--sbgcolor-60); }
.bg-background-65  { background-color: var(--sbgcolor-65); }
.bg-background-70  { background-color: var(--sbgcolor-70); }
.bg-background-75  { background-color: var(--sbgcolor-75); }
.bg-background-80  { background-color: var(--sbgcolor-80); }
.bg-background-85  { background-color: var(--sbgcolor-85); }
.bg-background-90  { background-color: var(--sbgcolor-90); }
.bg-background-95  { background-color: var(--sbgcolor-95); }
.bg-background-100 { background-color: var(--sbgcolor-100); }

.black     { color: var(--black); }
.black-5   { color: var(--black-5); }
.black-10  { color: var(--black-10); }
.black-15  { color: var(--black-15); }
.black-20  { color: var(--black-20); }
.black-25  { color: var(--black-25); }
.black-30  { color: var(--black-30); }
.black-35  { color: var(--black-35); }
.black-40  { color: var(--black-40); }
.black-45  { color: var(--black-45); }
.black-50  { color: var(--black-50); }
.black-55  { color: var(--black-55); }
.black-60  { color: var(--black-60); }
.black-65  { color: var(--black-65); }
.black-70  { color: var(--black-70); }
.black-75  { color: var(--black-75); }
.black-80  { color: var(--black-80); }
.black-85  { color: var(--black-85); }
.black-90  { color: var(--black-90); }
.black-95  { color: var(--black-95); }
.black-100 { color: var(--black-100); }
.bg-black     { background-color: var(--black); }
.bg-black-5   { background-color: var(--black-5); }
.bg-black-10  { background-color: var(--black-10); }
.bg-black-15  { background-color: var(--black-15); }
.bg-black-20  { background-color: var(--black-20); }
.bg-black-25  { background-color: var(--black-25); }
.bg-black-30  { background-color: var(--black-30); }
.bg-black-35  { background-color: var(--black-35); }
.bg-black-40  { background-color: var(--black-40); }
.bg-black-45  { background-color: var(--black-45); }
.bg-black-50  { background-color: var(--black-50); }
.bg-black-55  { background-color: var(--black-55); }
.bg-black-60  { background-color: var(--black-60); }
.bg-black-65  { background-color: var(--black-65); }
.bg-black-70  { background-color: var(--black-70); }
.bg-black-75  { background-color: var(--black-75); }
.bg-black-80  { background-color: var(--black-80); }
.bg-black-85  { background-color: var(--black-85); }
.bg-black-90  { background-color: var(--black-90); }
.bg-black-95  { background-color: var(--black-95); }
.bg-black-100 { background-color: var(--black-100); }


.maingreen     { color: var(--maingreen); }
.maingreen-5   { color: var(--maingreen-5); }
.maingreen-10  { color: var(--maingreen-10); }
.maingreen-15  { color: var(--maingreen-15); }
.maingreen-20  { color: var(--maingreen-20); }
.maingreen-25  { color: var(--maingreen-25); }
.maingreen-30  { color: var(--maingreen-30); }
.maingreen-35  { color: var(--maingreen-35); }
.maingreen-40  { color: var(--maingreen-40); }
.maingreen-45  { color: var(--maingreen-45); }
.maingreen-50  { color: var(--maingreen-50); }
.maingreen-55  { color: var(--maingreen-55); }
.maingreen-60  { color: var(--maingreen-60); }
.maingreen-65  { color: var(--maingreen-65); }
.maingreen-70  { color: var(--maingreen-70); }
.maingreen-75  { color: var(--maingreen-75); }
.maingreen-80  { color: var(--maingreen-80); }
.maingreen-85  { color: var(--maingreen-85); }
.maingreen-90  { color: var(--maingreen-90); }
.maingreen-95  { color: var(--maingreen-95); }
.maingreen-100 { color: var(--maingreen-100); }
.bg-maingreen     { background-color: var(--maingreen); }
.bg-maingreen-5   { background-color: var(--maingreen-5); }
.bg-maingreen-10  { background-color: var(--maingreen-10); }
.bg-maingreen-15  { background-color: var(--maingreen-15); }
.bg-maingreen-20  { background-color: var(--maingreen-20); }
.bg-maingreen-25  { background-color: var(--maingreen-25); }
.bg-maingreen-30  { background-color: var(--maingreen-30); }
.bg-maingreen-35  { background-color: var(--maingreen-35); }
.bg-maingreen-40  { background-color: var(--maingreen-40); }
.bg-maingreen-45  { background-color: var(--maingreen-45); }
.bg-maingreen-50  { background-color: var(--maingreen-50); }
.bg-maingreen-55  { background-color: var(--maingreen-55); }
.bg-maingreen-60  { background-color: var(--maingreen-60); }
.bg-maingreen-65  { background-color: var(--maingreen-65); }
.bg-maingreen-70  { background-color: var(--maingreen-70); }
.bg-maingreen-75  { background-color: var(--maingreen-75); }
.bg-maingreen-80  { background-color: var(--maingreen-80); }
.bg-maingreen-85  { background-color: var(--maingreen-85); }
.bg-maingreen-90  { background-color: var(--maingreen-90); }
.bg-maingreen-95  { background-color: var(--maingreen-95); }
.bg-maingreen-100 { background-color: var(--maingreen-100); }

.mediumgreen     { color: var(--mediumgreen); }
.mediumgreen-5   { color: var(--mediumgreen-5); }
.mediumgreen-10  { color: var(--mediumgreen-10); }
.mediumgreen-15  { color: var(--mediumgreen-15); }
.mediumgreen-20  { color: var(--mediumgreen-20); }
.mediumgreen-25  { color: var(--mediumgreen-25); }
.mediumgreen-30  { color: var(--mediumgreen-30); }
.mediumgreen-35  { color: var(--mediumgreen-35); }
.mediumgreen-40  { color: var(--mediumgreen-40); }
.mediumgreen-45  { color: var(--mediumgreen-45); }
.mediumgreen-50  { color: var(--mediumgreen-50); }
.mediumgreen-55  { color: var(--mediumgreen-55); }
.mediumgreen-60  { color: var(--mediumgreen-60); }
.mediumgreen-65  { color: var(--mediumgreen-65); }
.mediumgreen-70  { color: var(--mediumgreen-70); }
.mediumgreen-75  { color: var(--mediumgreen-75); }
.mediumgreen-80  { color: var(--mediumgreen-80); }
.mediumgreen-85  { color: var(--mediumgreen-85); }
.mediumgreen-90  { color: var(--mediumgreen-90); }
.mediumgreen-95  { color: var(--mediumgreen-95); }
.mediumgreen-100 { color: var(--mediumgreen-100); }
.bg-mediumgreen     { background-color: var(--mediumgreen); }
.bg-mediumgreen-5   { background-color: var(--mediumgreen-5); }
.bg-mediumgreen-10  { background-color: var(--mediumgreen-10); }
.bg-mediumgreen-15  { background-color: var(--mediumgreen-15); }
.bg-mediumgreen-20  { background-color: var(--mediumgreen-20); }
.bg-mediumgreen-25  { background-color: var(--mediumgreen-25); }
.bg-mediumgreen-30  { background-color: var(--mediumgreen-30); }
.bg-mediumgreen-35  { background-color: var(--mediumgreen-35); }
.bg-mediumgreen-40  { background-color: var(--mediumgreen-40); }
.bg-mediumgreen-45  { background-color: var(--mediumgreen-45); }
.bg-mediumgreen-50  { background-color: var(--mediumgreen-50); }
.bg-mediumgreen-55  { background-color: var(--mediumgreen-55); }
.bg-mediumgreen-60  { background-color: var(--mediumgreen-60); }
.bg-mediumgreen-65  { background-color: var(--mediumgreen-65); }
.bg-mediumgreen-70  { background-color: var(--mediumgreen-70); }
.bg-mediumgreen-75  { background-color: var(--mediumgreen-75); }
.bg-mediumgreen-80  { background-color: var(--mediumgreen-80); }
.bg-mediumgreen-85  { background-color: var(--mediumgreen-85); }
.bg-mediumgreen-90  { background-color: var(--mediumgreen-90); }
.bg-mediumgreen-95  { background-color: var(--mediumgreen-95); }
.bg-mediumgreen-100 { background-color: var(--mediumgreen-100); }

.darkgreen     { color: var(--darkgreen); }
.darkgreen-5   { color: var(--darkgreen-5); }
.darkgreen-10  { color: var(--darkgreen-10); }
.darkgreen-15  { color: var(--darkgreen-15); }
.darkgreen-20  { color: var(--darkgreen-20); }
.darkgreen-25  { color: var(--darkgreen-25); }
.darkgreen-30  { color: var(--darkgreen-30); }
.darkgreen-35  { color: var(--darkgreen-35); }
.darkgreen-40  { color: var(--darkgreen-40); }
.darkgreen-45  { color: var(--darkgreen-45); }
.darkgreen-50  { color: var(--darkgreen-50); }
.darkgreen-55  { color: var(--darkgreen-55); }
.darkgreen-60  { color: var(--darkgreen-60); }
.darkgreen-65  { color: var(--darkgreen-65); }
.darkgreen-70  { color: var(--darkgreen-70); }
.darkgreen-75  { color: var(--darkgreen-75); }
.darkgreen-80  { color: var(--darkgreen-80); }
.darkgreen-85  { color: var(--darkgreen-85); }
.darkgreen-90  { color: var(--darkgreen-90); }
.darkgreen-95  { color: var(--darkgreen-95); }
.darkgreen-100 { color: var(--darkgreen-100); }
.bg-darkgreen    { background-color: var(--darkgreen); }
.bg-darkgreen-5  { background-color: var(--darkgreen-5); }
.bg-darkgreen-10 { background-color: var(--darkgreen-10); }
.bg-darkgreen-15 { background-color: var(--darkgreen-15); }
.bg-darkgreen-20 { background-color: var(--darkgreen-20); }
.bg-darkgreen-25 { background-color: var(--darkgreen-25); }
.bg-darkgreen-30 { background-color: var(--darkgreen-30); }
.bg-darkgreen-35 { background-color: var(--darkgreen-35); }
.bg-darkgreen-40 { background-color: var(--darkgreen-40); }
.bg-darkgreen-45 { background-color: var(--darkgreen-45); }
.bg-darkgreen-50 { background-color: var(--darkgreen-50); }
.bg-darkgreen-55 { background-color: var(--darkgreen-55); }
.bg-darkgreen-60 { background-color: var(--darkgreen-60); }
.bg-darkgreen-65 { background-color: var(--darkgreen-65); }
.bg-darkgreen-70 { background-color: var(--darkgreen-70); }
.bg-darkgreen-75 { background-color: var(--darkgreen-75); }
.bg-darkgreen-80 { background-color: var(--darkgreen-80); }
.bg-darkgreen-85 { background-color: var(--darkgreen-85); }
.bg-darkgreen-90 { background-color: var(--darkgreen-90); }
.bg-darkgreen-95  { background-color: var(--darkgreen-95); }
.bg-darkgreen-100 { background-color: var(--darkgreen-100); }

.orange     { color: var(--orange); }
.orange-5   { color: var(--orange-5); }
.orange-10  { color: var(--orange-10); }
.orange-15  { color: var(--orange-15); }
.orange-20  { color: var(--orange-20); }
.orange-25  { color: var(--orange-25); }
.orange-30  { color: var(--orange-30); }
.orange-35  { color: var(--orange-35); }
.orange-40  { color: var(--orange-40); }
.orange-45  { color: var(--orange-45); }
.orange-50  { color: var(--orange-50)!important; }
.orange-55  { color: var(--orange-55); }
.orange-60  { color: var(--orange-60); }
.orange-65  { color: var(--orange-65); }
.orange-70  { color: var(--orange-70); }
.orange-75  { color: var(--orange-75); }
.orange-80  { color: var(--orange-80); }
.orange-85  { color: var(--orange-85); }
.orange-90  { color: var(--orange-90); }
.orange-95  { color: var(--orange-95); }
.orange-100 { color: var(--orange-100); }
.bg-orange     { background-color: var(--orange); }
.bg-orange-5   { background-color: var(--orange-5); }
.bg-orange-10  { background-color: var(--orange-10); }
.bg-orange-15  { background-color: var(--orange-15); }
.bg-orange-20  { background-color: var(--orange-20); }
.bg-orange-25  { background-color: var(--orange-25); }
.bg-orange-30  { background-color: var(--orange-30); }
.bg-orange-35  { background-color: var(--orange-35); }
.bg-orange-40  { background-color: var(--orange-40); }
.bg-orange-45  { background-color: var(--orange-45); }
.bg-orange-50  { background-color: var(--orange-50)!important; }
.bg-orange-55  { background-color: var(--orange-55); }
.bg-orange-60  { background-color: var(--orange-60); }
.bg-orange-65  { background-color: var(--orange-65); }
.bg-orange-70  { background-color: var(--orange-70); }
.bg-orange-75  { background-color: var(--orange-75); }
.bg-orange-80  { background-color: var(--orange-80); }
.bg-orange-85  { background-color: var(--orange-85); }
.bg-orange-90  { background-color: var(--orange-90); }
.bg-orange-95  { background-color: var(--orange-95); }
.bg-orange-100 { background-color: var(--orange-100); }

.lightlime     { color: var(--lightlime); }
.lightlime-5   { color: var(--lightlime-5); }
.lightlime-10  { color: var(--lightlime-10); }
.lightlime-20  { color: var(--lightlime-20); }
.lightlime-30  { color: var(--lightlime-30); }
.lightlime-40  { color: var(--lightlime-40); }
.lightlime-50  { color: var(--lightlime-50); }
.lightlime-60  { color: var(--lightlime-60); }
.lightlime-70  { color: var(--lightlime-70); }
.lightlime-80  { color: var(--lightlime-80); }
.lightlime-90  { color: var(--lightlime-90); }
.lightlime-100 { color: var(--lightlime-100); }
.bg-lightlime     { background-color: var(--lightlime); }
.bg-lightlime-5   { background-color: var(--lightlime-5); }
.bg-lightlime-10  { background-color: var(--lightlime-10); }
.bg-lightlime-20  { background-color: var(--lightlime-20); }
.bg-lightlime-30  { background-color: var(--lightlime-30); }
.bg-lightlime-40  { background-color: var(--lightlime-40); }
.bg-lightlime-50  { background-color: var(--lightlime-50); }
.bg-lightlime-60  { background-color: var(--lightlime-60); }
.bg-lightlime-70  { background-color: var(--lightlime-70); }
.bg-lightlime-80  { background-color: var(--lightlime-80); }
.bg-lightlime-90  { background-color: var(--lightlime-90); }
.bg-lightlime-100 { background-color: var(--lightlime-100); }

    /* .tertiary700     { color: var(--tertiary700); } */
    /* .bg-tertiary700     { background-color: var(--tertiary700); } */
.tertiary    { color: var(--tertiary); }
.tertiary-5  { color: var(--tertiary-5); }
.tertiary-10 { color: var(--tertiary-10); }
.tertiary-15 { color: var(--tertiary-15); }
.tertiary-20 { color: var(--tertiary-20); }
.tertiary-25 { color: var(--tertiary-25); }
.tertiary-30 { color: var(--tertiary-30); }
.tertiary-35 { color: var(--tertiary-35); }
.tertiary-40 { color: var(--tertiary-40); }
.tertiary-45 { color: var(--tertiary-45); }
.tertiary-50 { color: var(--tertiary-50); }
.tertiary-55 { color: var(--tertiary-55); }
.tertiary-60 { color: var(--tertiary-60); }
.tertiary-65 { color: var(--tertiary-65); }
.tertiary-70 { color: var(--tertiary-70); }
.tertiary-75 { color: var(--tertiary-75); }
.tertiary-80 { color: var(--tertiary-80); }
.tertiary-85 { color: var(--tertiary-85); }
.tertiary-90 { color: var(--tertiary-90); }
.tertiary-95  { color: var(--tertiary-95); }
.tertiary-100 { color: var(--tertiary-100); }
.bg-tertiary     { background-color: var(--tertiary); }
.bg-tertiary-5   { background-color: var(--tertiary-5); }
.bg-tertiary-10  { background-color: var(--tertiary-10); }
.bg-tertiary-15  { background-color: var(--tertiary-15); }
.bg-tertiary-20  { background-color: var(--tertiary-20); }
.bg-tertiary-25  { background-color: var(--tertiary-25); }
.bg-tertiary-30  { background-color: var(--tertiary-30); }
.bg-tertiary-35  { background-color: var(--tertiary-35); }
.bg-tertiary-40  { background-color: var(--tertiary-40); }
.bg-tertiary-45  { background-color: var(--tertiary-45); }
.bg-tertiary-50  { background-color: var(--tertiary-50); }
.bg-tertiary-55  { background-color: var(--tertiary-55); }
.bg-tertiary-60  { background-color: var(--tertiary-60); }
.bg-tertiary-65  { background-color: var(--tertiary-65); }
.bg-tertiary-70  { background-color: var(--tertiary-70); }
.bg-tertiary-75  { background-color: var(--tertiary-75); }
.bg-tertiary-80  { background-color: var(--tertiary-80); }
.bg-tertiary-85  { background-color: var(--tertiary-85); }
.bg-tertiary-90  { background-color: var(--tertiary-90); }
.bg-tertiary-95  { background-color: var(--tertiary-95); }
.bg-tertiary-100 { background-color: var(--tertiary-100); }


.htorange     { color: var( --thorange ) }
.htmaingreen  { color: var( --ht_maingreen ) }
.htmediumgrey { color: var( --ht_mediumgrey ) }
.htlightgrey  { color: var( --ht_lightgrey ) }
.htdarkgreen  { color: var( --ht_darkgreen ) }
.bg-htorange     { background-color: var( --thorange ) }
.bg-htmaingreen  { background-color: var( --ht_maingreen ) }
.bg-htmediumgrey { background-color: var( --ht_mediumgrey ) }
.bg-htlightgrey  { background-color: var( --ht_lightgrey ) }
.bg-htdarkgreen  { background-color: var( --ht_darkgreen ) }