computer-playbook/roles/nginx-global-css/templates/global.css.j2

/***

Global Theming Styles – Color and Shadow Variables 

HINT: 
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.

*/

:root {
    /** Derived Colors from the Base Color **/
    {% for i in range(1, 100) %}
        --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
        --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(i / 100),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
    {% endfor %}

    /** Special Action Colors **/
    --success-color:    {{ global_theming.css.colors.success }};
    --warning-color:    {{ global_theming.css.colors.warning }};
    --error-color:      {{ global_theming.css.colors.error }};
    --info-color:       {{ global_theming.css.colors.info }};

}

@media (prefers-color-scheme: dark) {
    :root {
        /** Dark Mode Derived Colors from the Base Color **/
        {% for i in range(1, 100) %}
            --color-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
            --color-rgb-{{ "%02d"|format(i) }}: {{ global_theming.css.colors.base | adjust_color_rgb(target_lightness=(1 - (i / 100)),saturation_change=global_theming.css.filters.saturation_change,hue_shift=global_theming.css.filters.hue_shift) }};
        {% endfor %}

        /** Special Action Colors **/
        --success-color:    {{ global_theming.css.colors.success | adjust_color(target_lightness=(1 - 0.2)) }};
        --warning-color:    {{ global_theming.css.colors.warning | adjust_color(target_lightness=(1 - 0.3)) }};
        --error-color:      {{ global_theming.css.colors.error   | adjust_color(target_lightness=(1 - 0.3)) }};
        --info-color:       {{ global_theming.css.colors.info    | adjust_color(target_lightness=(1 - 0.2)) }};
    }
}


:root, ::after, ::before, ::backdrop {
    /* For Dark Mode Plugin
     * @See https://chromewebstore.google.com/detail/dark-mode/dmghijelimhndkbmpgbldicpogfkceaj
     */
    --native-dark-accent-color:         var(--color-60);  /* was #a9a9a9 */
    --native-dark-bg-color:             var(--color-10);  /* was #292929 */
    --native-dark-bg-image-color:       rgba(var(--color-rgb-01), 0.10); /* remains the same, or adjust if needed */
    --native-dark-border-color:         var(--color-40);  /* was #555555 */
    --native-dark-box-shadow:           0 0 0 1px rgb(var(--color-rgb-99), / 10%);
    --native-dark-cite-color:           var(--color-70);  /* was #92de92 – you might adjust if a green tone is needed */
    --native-dark-fill-color:           var(--color-50);  /* was #7d7d7d */
    --native-dark-font-color:           var(--color-95);  /* was #dcdcdc */
    --native-dark-link-color:           var(--color-80);  /* was #8db2e5 */
    --native-dark-visited-link-color:   var(--color-85);  /* was #c76ed7 */
}

/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
    --bs-primary: var(--color-50);
    --bs-secondary: var(--color-65);
    --bs-body-bg: var(--color-90);
    --bs-body-color: var(--color-40);
    --bs-danger: var(--error-color);
    --bs-warning: var(--warning-color);
    --bs-success: var(--success-color);
    --bs-info: var(--info-color);
    --bs-link-color: var(--color-50);
    --bs-btn-color: var(--color-40);
}

/* Discourse */
:root section#main{
  /* Base Colors */
  --primary:                   var(--color-20); /* originally #203243 */
  --secondary:                 var(--color-95); /* originally #eef4f7 */
  --tertiary:                  var(--color-40); /* originally #416376 */
  --quaternary:                var(--color-50); /* originally #5e99b9 */

  /* Header & Highlight */
  --header_background:         var(--color-70); /* originally #86bddb */
  --header_primary:            var(--color-20); /* same as --primary */
  --highlight:                 var(--color-70); /* same as header_background */
  --d-selected:                var(--color-85); /* originally #bee0f2 */
  --d-hover:                   var(--color-90); /* originally #d2efff */
  
  /* Normally refers to secondary. Somehow this reference does not work.*/
  --d-sidebar-background:      var(--color-92); 
  --d-sidebar-footer-fade:     var(--color-92);


  /* RGB values */
  --always-black-rgb:          var(--color-rgb-01);
  --primary-rgb:               var(--color-rgb-20);
  --primary-low-rgb:           var(--color-rgb-95);
  --primary-very-low-rgb:      var(--color-rgb-99);
  --secondary-rgb:             var(--color-rgb-95);
  --header_background-rgb:     var(--color-rgb-70);
  --tertiary-rgb:              var(--color-rgb-40);
  --highlight-rgb:             var(--color-rgb-70);
  --success-rgb:               var(--color-rgb-50);


  /* Primary Scale */
  --primary-very-low:          var(--color-99); /* originally #f7f9fb */
  --primary-low:               var(--color-95);  /* originally #e3ebf2 */
  --primary-low-mid:           var(--color-75);  /* originally #acc2d7 */
  --primary-medium:            var(--color-60);  /* originally #7499bd */
  --primary-high:              var(--color-40);  /* originally #487096 */
  --primary-very-high:         var(--color-20);  /* originally #34516d */
  --primary-50:                var(--color-99); /* originally #f7f9fb */
  --primary-100:               var(--color-95);  /* originally #eef3f7 */
  --primary-200:               var(--color-90);  /* originally #e3ebf2 */
  --primary-300:               var(--color-80);  /* originally #c7d6e4 */
  --primary-400:               var(--color-75);  /* originally #acc2d7 */
  --primary-500:               var(--color-70);  /* originally #90aeca */
  --primary-600:               var(--color-60);  /* originally #7499bd */
  --primary-700:               var(--color-50);  /* originally #5381ad */
  --primary-800:               var(--color-40);  /* originally #487096 */
  --primary-900:               var(--color-20);  /* originally #34516d */

  /* Header Primary Scale */
  --header_primary-low:        rgb(var(--color-rgb-75));  /* rgb(128, 180, 209) */
  --header_primary-low-mid:    rgb(var(--color-rgb-70));  /* rgb(110, 155, 181) */
  --header_primary-medium:     rgb(var(--color-rgb-60));  /* rgb(93, 132, 155) */
  --header_primary-high:       rgb(var(--color-rgb-50));  /* rgb(78, 112, 132) */
  --header_primary-very-high:  rgb(var(--color-rgb-20));  /* rgb(52, 76, 94) */

  /* Secondary Scale */
  --secondary-low:             var(--color-20);  /* originally #2f5163 */
  --secondary-medium:          var(--color-40);  /* originally #4e88a5 */
  --secondary-high:            var(--color-60);  /* originally #7ba9c1 */
  --secondary-very-high:       var(--color-90);  /* originally #d7e5ec */

  /* Tertiary Scale */
  --tertiary-very-low:         var(--color-99); /* originally #eaf0f3 */
  --tertiary-low:              var(--color-95);  /* originally #dfe8ee */
  --tertiary-medium:           var(--color-60);  /* originally #96b4c5 */
  --tertiary-high:             var(--color-40);  /* originally #5886a0 */
  --tertiary-hover:            var(--color-20);  /* originally #314a59 */
  --tertiary-50:               var(--color-99); /* originally #eaf0f3 */
  --tertiary-100:              var(--color-95);  /* originally #e6edf1 */
  --tertiary-200:              var(--color-90);  /* originally #e4ebf0 */
  --tertiary-300:              var(--color-85);  /* originally #dfe8ee */
  --tertiary-400:              var(--color-75);  /* originally #c8d8e1 */
  --tertiary-500:              var(--color-65);  /* originally #b1c7d4 */
  --tertiary-600:              var(--color-60);  /* originally #96b4c5 */
  --tertiary-700:              var(--color-55);  /* originally #80a5b9 */
  --tertiary-800:              var(--color-50);  /* originally #6b96ae */
  --tertiary-900:              var(--color-40);  /* originally #5886a0 */

  /* Quaternary */
  --quaternary-low:           var(--color-80);  /* originally #cfe0ea */

  /* Highlight */
  --highlight-bg:             var(--color-90);  /* originally #dbebf4 */
  --highlight-low:            var(--color-90);  /* originally #dbebf4 */
  --highlight-medium:         var(--color-80);  /* originally #c3deed */
  --highlight-high:           var(--color-30);  /* originally #286688 */

  /* Combination Variables */
  --blend-primary-secondary-5:          rgb(var(--color-rgb-95));  /* originally rgb(232, 238, 241) */
  --primary-med-or-secondary-med:       var(--color-60);  /* originally #7499bd */
  --primary-med-or-secondary-high:      var(--color-60);  /* originally #7499bd */
  --primary-high-or-secondary-low:      var(--color-40);  /* originally #487096 */
  --primary-low-mid-or-secondary-high:  var(--color-75);  /* originally #acc2d7 */
  --primary-low-mid-or-secondary-low:   var(--color-75);  /* originally #acc2d7 */
  --primary-or-primary-low-mid:         var(--color-20);  /* originally #203243 */
  --highlight-low-or-medium:            var(--color-90);  /* originally #dbebf4 */
  --tertiary-or-tertiary-low:           var(--color-40);  /* originally #416376 */
  --tertiary-low-or-tertiary-high:      var(--color-95);  /* originally #dfe8ee */
  --tertiary-med-or-tertiary:           var(--color-60);  /* originally #96b4c5 */
  --secondary-or-primary:               var(--color-95);  /* originally #eef4f7 */
  --tertiary-or-white:                  var(--color-40);  /* originally #416376 */

  /* Float Kit */
  --float-kit-arrow-stroke-color:       var(--primary-low);  /* already mapped above */
  --float-kit-arrow-fill-color:         var(--secondary);      /* already mapped above */
}


/* Keycloak */
:root{
  /* --- Palette Black (Graustufen) --- */
  --pf-v5-global--palette--black-100:   var(--color-95);  /* #fafafa */
  --pf-v5-global--palette--black-150:   var(--color-90);  /* #f5f5f5 */
  --pf-v5-global--palette--black-200:   var(--color-85);  /* #f0f0f0 */
  --pf-v5-global--palette--black-300:   var(--color-75);  /* #d2d2d2 */
  --pf-v5-global--palette--black-400:   var(--color-65);  /* #b8bbbe */
  --pf-v5-global--palette--black-500:   var(--color-50);  /* #8a8d90 */
  --pf-v5-global--palette--black-600:   var(--color-40);  /* #6a6e73 */
  --pf-v5-global--palette--black-700:   var(--color-30);  /* #4f5255 */
  --pf-v5-global--palette--black-800:   var(--color-25);  /* #3c3f42 */
  --pf-v5-global--palette--black-850:   var(--color-20);  /* #212427 */
  --pf-v5-global--palette--black-900:   var(--color-10);  /* #151515 */
  --pf-v5-global--palette--black-1000:  var(--color-05);  /* #030303 */

  /* --- Blue Palette --- */
  --pf-v5-global--palette--blue-50:    var(--color-98);  /* #e7f1fa */
  --pf-v5-global--palette--blue-100:   var(--color-95);  /* #bee1f4 */
  --pf-v5-global--palette--blue-200:   var(--color-85);  /* #73bcf7 */
  --pf-v5-global--palette--blue-300:   var(--color-75);  /* #2b9af3 */
  --pf-v5-global--palette--blue-400:   var(--color-65);  /* #06c */
  --pf-v5-global--palette--blue-500:   var(--color-40);  /* #004080 */
  --pf-v5-global--palette--blue-600:   var(--color-30);  /* #002952 */
  --pf-v5-global--palette--blue-700:   var(--color-10);  /* #001223 */

  /* --- Cyan Palette --- */
  --pf-v5-global--palette--cyan-50:    var(--color-98);  /* #f2f9f9 */
  --pf-v5-global--palette--cyan-100:   var(--color-85);  /* #a2d9d9 */
  --pf-v5-global--palette--cyan-200:   var(--color-75);  /* #73c5c5 */
  --pf-v5-global--palette--cyan-300:   var(--color-65);  /* #009596 */
  --pf-v5-global--palette--cyan-400:   var(--color-40);  /* #005f60 */
  --pf-v5-global--palette--cyan-500:   var(--color-30);  /* #003737 */
  --pf-v5-global--palette--cyan-600:   var(--color-20);  /* #002323 */
  --pf-v5-global--palette--cyan-700:   var(--color-10);  /* #000f0f */

  /* --- Gold Palette --- */
  --pf-v5-global--palette--gold-50:    var(--color-98);  /* #fdf7e7 */
  --pf-v5-global--palette--gold-100:   var(--color-90);  /* #f9e0a2 */
  --pf-v5-global--palette--gold-200:   var(--color-80);  /* #f6d173 */
  --pf-v5-global--palette--gold-300:   var(--color-70);  /* #f4c145 */
  --pf-v5-global--palette--gold-400:   var(--color-60);  /* #f0ab00 */
  --pf-v5-global--palette--gold-500:   var(--color-50);  /* #c58c00 */
  --pf-v5-global--palette--gold-600:   var(--color-40);  /* #795600 */
  --pf-v5-global--palette--gold-700:   var(--color-30);  /* #3d2c00 */

  /* --- Green Palette --- */
  --pf-v5-global--palette--green-50:   var(--color-98);  /* #f3faf2 */
  --pf-v5-global--palette--green-100:  var(--color-85);  /* #bde5b8 */
  --pf-v5-global--palette--green-200:  var(--color-75);  /* #95d58e */
  --pf-v5-global--palette--green-300:  var(--color-65);  /* #6ec664 */
  --pf-v5-global--palette--green-400:  var(--color-60);  /* #5ba352 */
  --pf-v5-global--palette--green-500:  var(--color-50);  /* #3e8635 */
  --pf-v5-global--palette--green-600:  var(--color-40);  /* #1e4f18 */
  --pf-v5-global--palette--green-700:  var(--color-20);  /* #0f280d */

  /* --- Light Blue Palette --- */
  --pf-v5-global--palette--light-blue-100: var(--color-95);  /* #beedf9 */
  --pf-v5-global--palette--light-blue-200: var(--color-85);  /* #7cdbf3 */
  --pf-v5-global--palette--light-blue-300: var(--color-75);  /* #35caed */
  --pf-v5-global--palette--light-blue-400: var(--color-65);  /* #00b9e4 */
  --pf-v5-global--palette--light-blue-500: var(--color-50);  /* #008bad */
  --pf-v5-global--palette--light-blue-600: var(--color-40);  /* #005c73 */
  --pf-v5-global--palette--light-blue-700: var(--color-20);  /* #002d39 */

  /* --- Light Green Palette --- */
  --pf-v5-global--palette--light-green-100: var(--color-95); /* #e4f5bc */
  --pf-v5-global--palette--light-green-200: var(--color-85); /* #c8eb79 */
  --pf-v5-global--palette--light-green-300: var(--color-75); /* #ace12e */
  --pf-v5-global--palette--light-green-400: var(--color-65); /* #92d400 */
  --pf-v5-global--palette--light-green-500: var(--color-50); /* #6ca100 */
  --pf-v5-global--palette--light-green-600: var(--color-40); /* #486b00 */
  --pf-v5-global--palette--light-green-700: var(--color-20); /* #253600 */

  /* --- Orange Palette --- */
  --pf-v5-global--palette--orange-50:  var(--color-98);  /* #fff6ec */
  --pf-v5-global--palette--orange-100: var(--color-85);  /* #f4b678 */
  --pf-v5-global--palette--orange-200: var(--color-75);  /* #ef9234 */
  --pf-v5-global--palette--orange-300: var(--color-65);  /* #ec7a08 */
  --pf-v5-global--palette--orange-400: var(--color-50);  /* #c46100 */
  --pf-v5-global--palette--orange-500: var(--color-40);  /* #8f4700 */
  --pf-v5-global--palette--orange-600: var(--color-30);  /* #773d00 */
  --pf-v5-global--palette--orange-700: var(--color-20);  /* #3b1f00 */

  /* --- Purple Palette --- */
  --pf-v5-global--palette--purple-50:   var(--color-98);  /* #f2f0fc */
  --pf-v5-global--palette--purple-100:  var(--color-90);  /* #cbc1ff */
  --pf-v5-global--palette--purple-200:  var(--color-80);  /* #b2a3ff */
  --pf-v5-global--palette--purple-300:  var(--color-70);  /* #a18fff */
  --pf-v5-global--palette--purple-400:  var(--color-60);  /* #8476d1 */
  --pf-v5-global--palette--purple-500:  var(--color-50);  /* #6753ac */
  --pf-v5-global--palette--purple-600:  var(--color-40);  /* #40199a */
  --pf-v5-global--palette--purple-700:  var(--color-20);  /* #1f0066 */

  /* --- Red Palette --- */
  --pf-v5-global--palette--red-50:    var(--color-98);  /* #faeae8 */
  --pf-v5-global--palette--red-100:   var(--color-70);  /* #c9190b */
  --pf-v5-global--palette--red-200:   var(--color-50);  /* #a30000 */
  --pf-v5-global--palette--red-300:   var(--color-40);  /* #7d1007 */
  --pf-v5-global--palette--red-400:   var(--color-30);  /* #470000 */
  --pf-v5-global--palette--red-500:   var(--color-20);  /* #2c0000 */

  /* --- White --- */
  --pf-v5-global--palette--white:      var(--color-99);

  /* --- Background Colors --- */
  --pf-v5-global--BackgroundColor--100:              var(--color-99);
  --pf-v5-global--BackgroundColor--150:              var(--color-95);
  --pf-v5-global--BackgroundColor--200:              var(--color-85);
  --pf-v5-global--BackgroundColor--300:              var(--color-75);
  --pf-v5-global--BackgroundColor--400:              var(--color-65);
  --pf-v5-global--BackgroundColor--light-100:        var(--color-99);
  --pf-v5-global--BackgroundColor--light-200:        var(--color-95);
  --pf-v5-global--BackgroundColor--light-300:        var(--color-85);
  --pf-v5-global--BackgroundColor--dark-100:         var(--color-10);
  --pf-v5-global--BackgroundColor--dark-200:         var(--color-25);
  --pf-v5-global--BackgroundColor--dark-300:         var(--color-20);
  --pf-v5-global--BackgroundColor--dark-400:         var(--color-30);
  --pf-v5-global--BackgroundColor--dark-transparent-100: var(--color-05);
  --pf-v5-global--BackgroundColor--dark-transparent-200: var(--color-05);

  /* --- Color Variables --- */
  --pf-v5-global--Color--100:           var(--color-10);
  --pf-v5-global--Color--200:           var(--color-40);
  --pf-v5-global--Color--300:           var(--color-25);
  --pf-v5-global--Color--400:           var(--color-50);
  --pf-v5-global--Color--light-100:     var(--color-99);
  --pf-v5-global--Color--light-200:     var(--color-85);
  --pf-v5-global--Color--light-300:     var(--color-75);
  --pf-v5-global--Color--dark-100:      var(--color-10);
  --pf-v5-global--Color--dark-200:      var(--color-40);

  /* --- Active Colors --- */
  --pf-v5-global--active-color--100:    var(--color-65);
  --pf-v5-global--active-color--200:    var(--color-95);
  --pf-v5-global--active-color--300:    var(--color-75);
  --pf-v5-global--active-color--400:    var(--color-85);

  /* --- Disabled Colors --- */
  --pf-v5-global--disabled-color--100:  var(--color-40);
  --pf-v5-global--disabled-color--200:  var(--color-75);
  --pf-v5-global--disabled-color--300:  var(--color-85);

  /* --- Primary Colors --- */
  --pf-v5-global--primary-color--100:   var(--color-65);
  --pf-v5-global--primary-color--200:   var(--color-40);
  --pf-v5-global--primary-color--light-100: var(--color-75);
  --pf-v5-global--primary-color--dark-100:  var(--color-65);

  /* --- Secondary Colors --- */
  --pf-v5-global--secondary-color--100: var(--color-40);

  /* --- Custom Colors --- */
  --pf-v5-global--custom-color--100:    var(--color-65);
  --pf-v5-global--custom-color--200:    var(--color-65);
  --pf-v5-global--custom-color--300:    var(--color-30);

  /* --- Success Colors --- */
  --pf-v5-global--success-color--100:   var(--color-50);
  --pf-v5-global--success-color--200:   var(--color-40);

  /* --- Info Colors --- */
  --pf-v5-global--info-color--100:      var(--color-75);
  --pf-v5-global--info-color--200:      var(--color-30);

  /* --- Warning Colors --- */
  --pf-v5-global--warning-color--100:   var(--color-60);
  --pf-v5-global--warning-color--200:   var(--color-40);

  /* --- Danger Colors --- */
  --pf-v5-global--danger-color--100:    var(--color-70);
  --pf-v5-global--danger-color--200:    var(--color-50);
  --pf-v5-global--danger-color--300:    var(--color-30);

  /* --- Link Colors --- */
  --pf-v5-global--link--Color:                  var(--color-65);
  --pf-v5-global--link--Color--hover:           var(--color-40);
  --pf-v5-global--link--Color--light:           var(--color-75);
  --pf-v5-global--link--Color--light--hover:    var(--color-85);
  --pf-v5-global--link--Color--dark:            var(--color-65);
  --pf-v5-global--link--Color--dark--hover:     var(--color-40);
  --pf-v5-global--link--Color--visited:         var(--color-40);

  /* --- Border Colors --- */
  --pf-v5-global--BorderColor--100:             var(--color-75);
  --pf-v5-global--BorderColor--200:             var(--color-50);
  --pf-v5-global--BorderColor--300:             var(--color-85);
  --pf-v5-global--BorderColor--400:             var(--color-65);
  --pf-v5-global--BorderColor--dark-100:        var(--color-75);
  --pf-v5-global--BorderColor--light-100:       var(--color-65);

  /* --- Icon Colors --- */
  --pf-v5-global--icon--Color--light:          var(--color-40);
  --pf-v5-global--icon--Color--dark:           var(--color-10);
  --pf-v5-global--icon--Color--light--light:   var(--color-85);
  --pf-v5-global--icon--Color--dark--light:    var(--color-99);
  --pf-v5-global--icon--Color--light--dark:    var(--color-40);
  --pf-v5-global--icon--Color--dark--dark:     var(--color-10);
}

/** Mastodon Overrides **/
:root{
    --surface-variant-background-color: var(--color-80);
}

/* Modal Overwrittes */ 
div.modal div.modal-content {
  /* Colors – adjusted to the existing scheme */
  --bs-modal-color: var(--color-21);                /* Text color: dark contrast against the light modal background */
  --bs-modal-bg: var(--color-82);                   /* Background color, as desired */
  --bs-modal-border-color: var(--color-82);         /* A slightly darker border than the background */
  --bs-modal-header-border-color: var(--color-87);  /* Same shade as the modal border */
  --bs-modal-footer-bg: var(--color-87);            /* A slightly offset footer background (a bit darker than the main area) */
  --bs-modal-footer-border-color: var(--color-87);
}

/** Nextcloud Specific**/
:root{
    --color-main-background:        var(--color-84);
    --color-main-background-rgb:    rgba(var(--color-rgb-84),0.83);
    --color-primary-element:        var(--color-80);
    --color-main-text:              var(--color-40);
    --color-background-hover:       var(--color-65);

    /** Calendar **/
    --color-background-dark:        var(--color-73); /** Days which aren't in the current month **/
    --color-primary-element-light:  var(--color-65);
}

/** Peertube **/
:root {
    --mainColor: var(--color-50);
}

/** Pixelfed **/

:root {
    /* Base Colors */
    --light:                  var(--color-05);    /* Very dark (was #000) */
    --dark:                   var(--color-99);   /* Very light (was #fff) */
    
    /* Backgrounds */
    --body-bg:                var(--color-05);    /* Main background: very dark */
    --nav-bg:                 var(--color-05);    /* Navigation background: very dark */
    
    /* Text Colors */
    --body-color:             var(--color-70);    /* Main text – mid brightness */
    --text-lighter:           var(--color-60);    /* Lighter text for less prominent elements */
    
    /* Section Backgrounds and Cards */
    --bg-light:               var(--color-95);    /* Lighter background areas */
    --card-bg:                var(--color-90);    /* Card background */
    --light-gray:             var(--color-75);    /* For less dominant elements */
    --light-hover-bg:         var(--color-85);    /* Slightly lighter hover background */
    
    /* Borders and Input Fields */
    --btn-light-border:       var(--color-10);    /* Dark border for buttons */
    --input-border:           var(--color-10);    /* Border color for inputs */
    --border-color:           var(--color-85);    /* General border: slightly lighter than background */
    
    /* Other Areas */
    --comment-bg:             var(--color-85);    /* Background for comments */
    --card-header-accent:     var(--color-85);    /* Accent color in card headers */
    
    /* Dropdown Menus */
    --dropdown-item-hover-bg: var(--color-05);    /* Hover background: very dark */
    --dropdown-item-hover-color: var(--color-60);  /* Hover text: a bit lighter */
    --dropdown-item-color:     var(--color-70);    /* Regular dropdown item text */
    --dropdown-item-active-color: var(--color-99);/* Active state: very light (white) */
}

/* Wordpress */
:root {
  --wp--preset--color--black:              var(--color-05);
  --wp--preset--color--contrast:           var(--color-22);
  --wp--preset--color--contrast-2:         var(--color-40);
  --wp--preset--color--contrast-3:         var(--color-50);
  --wp--preset--color--base:               var(--color-90);
  --wp--preset--color--base-2:             var(--color-95);
  --wp--preset--color--white:              var(--color-99);
}

/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
    background-color: var(--color-93);
    background-image: none;
    color: var(--color-40);
    /* Use the corporate-design font family */
    font-family: "Liberation Sans", Arial, sans-serif;
}

/* Links (Color Only) */
a {
    color: var(--color-50);
}

/* Buttons (Background, Text, Border, and Shadow)
   Now using a button background that is only slightly darker than the overall background */
html[native-dark-active] button, html[native-dark-active] .btn, button, .btn {
    background-color: var(--color-87);
    color: var(--color-50);
    border-color: var(--color-80);
    cursor: pointer;
}

button:hover, .btn:hover {
    filter: brightness(0.9);
}

/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
input, textarea, select {
    background-color: var(--color-82);  /* Instead of var(--color-90) */
    color: var(--color-40);
    border-color: var(--color-70);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--color-50);
}

/* Tables (Borders and Header Colors) */
th, td {
    border-color: var(--color-70) !important;
}

thead {
    background-color: var(--color-80) !important;
    color: var(--color-40) !important;
}

/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
    color: var(--color-10) !important;
}

/* Bootstrap */

/* States: Success, Warning, Error, Info (Background and Text Colors) */
.success, .alert-success {
    background-color: var(--success-color) !important;
    color: var(--color-40) !important;
}
.warning, .alert-warning {
    background-color: var(--warning-color) !important;
    color: var(--color-40) !important;
}
.error, .alert-danger {
    background-color: var(--error-color) !important;
    color: var(--color-40) !important;
}
.info, .alert-info {
    background-color: var(--info-color) !important;
    color: var(--color-40) !important;
}

/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
    background-color:   var(--color-90) !important;
    color:              var(--color-50) !important;
    border-color:       var(--color-85) !important;
}

.navbar a {
    color: var(--color-40) !important;
}

.navbar a.dropdown-item {
    color: var(--color-40) !important;
}

/* Cards / Containers (Background, Border, and Shadow)
   Cards now use a slightly lighter background and a bold, clear shadow */
.card {
    background-color: var(--color-90) !important;
    border-color: var(--color-85) !important;
}

.card-body {
    color: var(--color-40) !important;
}

/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
.navbar .dropdown-menu,
.nav-item .dropdown-menu {
    background-color: var(--color-80) !important;
    color: var(--color-40) !important;
}

.dropdown-item {
    color: var(--color-40) !important;
    background-color: var(--color-80) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-65) !important;
    color: var(--color-40) !important;
}

/* Ensure the button itself uses the light text color. Occurred in Mastodon */
button.icon-button {
    color: var(--color-99) !important;
}

/* Keycloak Header */
div#app header, div#app header *{
    background-color: var(--color-60) !important;
    color: var(--color-98);
}

/** LAM Specific **/
.lam-vertical-tabs-navigation li, .lam-vertical-tabs-navigation{
    background-color: transparent !important;
    border-color: transparent !important;
}

/** Mailu **/
[class*=sidebar-dark-], .bg-mailu-logo {
    background-color: var(--color-90) !important;
}


/** Mastodon Specific **/ 
div#mastodon div.compose-panel div.compose-form__highlightable{
    background-color: var(--color-90) !important;
}

div#mastodon strong{
    color: var(--color-40) !important;
}

/** Nextcloud specific **/
html.ng-csp header#header{
    color:              var(--color-90) !important;
    background-color:   var(--color-80) !important;
}

html.ng-csp div#postsetupchecks ul.warnings{
    color: var(--error-color) !important;
}

html.ng-csp div#postsetupchecks ul.info{
    background-color: transparent !important;
}

/** OpenProject **/
header.op-app-header{
    background-color: var(--color-40) !important;
    color: var(--color-40) !important;
}

/** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
    background-color: transparent !important;
}

/* Peertube specific configuration */
.peertube-container button {
    background-color: transparent !important;
}

/* Pixelfed */
div.page-wrapper{
    background: none !important;
    background-color: none !important;
}

/** Taiga specific configuration  **/

section.main.kanban{
    background-color: transparent !important;
}

div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
    background-color: var(--info-color) !important;
    color: var(--color-40) !important;
}

section.kanban h1, section.kanban h2{
    color: var(--color-40) !important;
}

/* Wordpress */
.has-contrast-background-color{
    color: var(--color-90) !important;
}