:root{
  /* --- Palette Black (Gray Scale) --- */
{% for i in range(1, 21) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set black = i * 50 %}
  {% set color = 100 - i * 5 %}
  --pf-v5-global--palette--black-{{ black }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}

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

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

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

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

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

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

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

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

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

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

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

}

.pf-v5-c-button.pf-m-tertiary {
    --pf-v5-c-button--m-tertiary--BackgroundColor: var(--color-01-70);
    {# Assume that the following line is necessary due to load order #}
    background-color: var(--pf-v5-c-button--m-tertiary--BackgroundColor); 
}

/* Additional Keykloak Configuration */
a.pf-v5-c-nav__link{
    --pf-v5-c-nav__link--BackgroundColor: rgba(var(--color-01-rgb-56), 0.4);
}

/* Keycloak */
div#app header{
    background-color: var(--color-01-60);
    /* New Gradient based on original background (60 -5, 60, 60 +1, 60 +5) */
    background: linear-gradient({{ range(0, 361) | random }}deg, var(--color-01-55), var(--color-01-60), var(--color-01-61), var(--color-01-65));
    color: var(--color-01-98);
}