.field__item:has(> .alt_pale) {
  --ctx-bg:        var(--alt-pale-bg);
  --ctx-fg:        var(--alt-pale-fg);
  --ctx-highlight: var(--alt-pale-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--alt-pale-surface-bg);
  --ctx-surface-fg:          var(--alt-pale-surface-fg);
  --ctx-surface-related-bg:       var(--alt-pale-surface-related-bg);
  --ctx-surface-related-fg:       var(--alt-pale-surface-related-fg);
  --ctx-surface-complementary-bg: var(--alt-pale-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--alt-pale-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--alt-pale-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--alt-pale-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .alt_dark) {
  --ctx-bg:        var(--alt-dark-bg);
  --ctx-fg:        var(--alt-dark-fg);
  --ctx-highlight: var(--alt-dark-highlight);
  --ctx-hover-mix: white;
  --ctx-surface-bg:          var(--alt-dark-surface-bg);
  --ctx-surface-fg:          var(--alt-dark-surface-fg);
  --ctx-surface-related-bg:       var(--alt-dark-surface-related-bg);
  --ctx-surface-related-fg:       var(--alt-dark-surface-related-fg);
  --ctx-surface-complementary-bg: var(--alt-dark-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--alt-dark-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--alt-dark-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--alt-dark-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .alt_mid) {
  --ctx-bg:        var(--alt-mid-bg);
  --ctx-fg:        var(--alt-mid-fg);
  --ctx-highlight: var(--alt-mid-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--alt-mid-surface-bg);
  --ctx-surface-fg:          var(--alt-mid-surface-fg);
  --ctx-surface-related-bg:       var(--alt-mid-surface-related-bg);
  --ctx-surface-related-fg:       var(--alt-mid-surface-related-fg);
  --ctx-surface-complementary-bg: var(--alt-mid-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--alt-mid-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--alt-mid-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--alt-mid-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .main_pale) {
  --ctx-bg:        var(--main-pale-bg);
  --ctx-fg:        var(--main-pale-fg);
  --ctx-highlight: var(--main-pale-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:               var(--main-pale-surface-bg);
  --ctx-surface-fg:               var(--main-pale-surface-fg);
  --ctx-surface-related-bg:       var(--main-pale-surface-related-bg);
  --ctx-surface-related-fg:       var(--main-pale-surface-related-fg);
  --ctx-surface-complementary-bg: var(--main-pale-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--main-pale-surface-complementary-fg);
  --ctx-surface-neutral-bg:       var(--main-pale-surface-neutral-bg);
  --ctx-surface-neutral-fg:       var(--main-pale-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .main_dark) {
  --ctx-bg:        var(--main-dark-bg);
  --ctx-fg:        var(--main-dark-fg);
  --ctx-highlight: var(--main-dark-highlight);
  --ctx-hover-mix: white;
  --ctx-surface-bg:               var(--main-dark-surface-bg);
  --ctx-surface-fg:               var(--main-dark-surface-fg);
  --ctx-surface-related-bg:       var(--main-dark-surface-related-bg);
  --ctx-surface-related-fg:       var(--main-dark-surface-related-fg);
  --ctx-surface-complementary-bg: var(--main-dark-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--main-dark-surface-complementary-fg);
  --ctx-surface-neutral-bg:       var(--main-dark-surface-neutral-bg);
  --ctx-surface-neutral-fg:       var(--main-dark-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .main_mid) {
  --ctx-bg:        var(--main-mid-bg);
  --ctx-fg:        var(--main-mid-fg);
  --ctx-highlight: var(--main-mid-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--main-mid-surface-bg);
  --ctx-surface-fg:          var(--main-mid-surface-fg);
  --ctx-surface-related-bg:       var(--main-mid-surface-related-bg);
  --ctx-surface-related-fg:       var(--main-mid-surface-related-fg);
  --ctx-surface-complementary-bg: var(--main-mid-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--main-mid-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--main-mid-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--main-mid-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .highlight_pale) {
  --ctx-bg:        var(--highlight-pale-bg);
  --ctx-fg:        var(--highlight-pale-fg);
  --ctx-highlight: var(--highlight-pale-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--highlight-pale-surface-bg);
  --ctx-surface-fg:          var(--highlight-pale-surface-fg);
  --ctx-surface-related-bg:       var(--highlight-pale-surface-related-bg);
  --ctx-surface-related-fg:       var(--highlight-pale-surface-related-fg);
  --ctx-surface-complementary-bg: var(--highlight-pale-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--highlight-pale-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--highlight-pale-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--highlight-pale-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .highlight_dark) {
  --ctx-bg:        var(--highlight-dark-bg);
  --ctx-fg:        var(--highlight-dark-fg);
  --ctx-highlight: var(--highlight-dark-highlight);
  --ctx-hover-mix: white;
  --ctx-surface-bg:          var(--highlight-dark-surface-bg);
  --ctx-surface-fg:          var(--highlight-dark-surface-fg);
  --ctx-surface-related-bg:       var(--highlight-dark-surface-related-bg);
  --ctx-surface-related-fg:       var(--highlight-dark-surface-related-fg);
  --ctx-surface-complementary-bg: var(--highlight-dark-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--highlight-dark-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--highlight-dark-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--highlight-dark-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .highlight_mid) {
  --ctx-bg:        var(--highlight-mid-bg);
  --ctx-fg:        var(--highlight-mid-fg);
  --ctx-highlight: var(--highlight-mid-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--highlight-mid-surface-bg);
  --ctx-surface-fg:          var(--highlight-mid-surface-fg);
  --ctx-surface-related-bg:       var(--highlight-mid-surface-related-bg);
  --ctx-surface-related-fg:       var(--highlight-mid-surface-related-fg);
  --ctx-surface-complementary-bg: var(--highlight-mid-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--highlight-mid-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--highlight-mid-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--highlight-mid-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}

.field__item:has(> .neutral) {
  --ctx-bg:        var(--neutral-bg);
  --ctx-fg:        var(--neutral-fg);
  --ctx-highlight: var(--neutral-highlight);
  --ctx-hover-mix: black;
  --ctx-surface-bg:          var(--neutral-surface-bg);
  --ctx-surface-fg:          var(--neutral-surface-fg);
  --ctx-surface-related-bg:       var(--neutral-surface-related-bg);
  --ctx-surface-related-fg:       var(--neutral-surface-related-fg);
  --ctx-surface-complementary-bg: var(--neutral-surface-complementary-bg);
  --ctx-surface-complementary-fg: var(--neutral-surface-complementary-fg);
  --ctx-surface-neutral-bg:  var(--neutral-surface-neutral-bg);
  --ctx-surface-neutral-fg:  var(--neutral-surface-neutral-fg);
  background:      var(--ctx-bg);
  color:           var(--ctx-fg);
}


/*
.surface-default {
  background: var(--ctx-surface-bg);
  color:      var(--ctx-surface-fg);
}
.surface-default:hover {
  background: color-mix(in oklch, var(--ctx-surface-bg) 85%, var(--ctx-hover-mix));
}

.surface-related {
  background: var(--ctx-surface-related-bg);
  color:      var(--ctx-surface-related-fg);
}
.surface-related:hover {
  background: color-mix(in oklch, var(--ctx-surface-related-bg) 85%, var(--ctx-hover-mix));
}

.surface-complementary {
  background: var(--ctx-surface-complementary-bg);
  color:      var(--ctx-surface-complementary-fg);
}
.surface-complementary:hover {
  background: color-mix(in oklch, var(--ctx-surface-complementary-bg) 85%, var(--ctx-hover-mix));
}

.surface-neutral {
  background: var(--ctx-surface-neutral-bg);
  color:      var(--ctx-surface-neutral-fg);
}
.surface-neutral:hover {
  background: color-mix(in oklch, var(--ctx-surface-neutral-bg) 85%, var(--ctx-hover-mix));
}
*/

.surface-default .big-button a,
.surface-default a .field--name-field-link-text{
  background: var(--ctx-surface-bg);
  color:      var(--ctx-surface-fg);
}
.surface-default .big-button a:hover ,
.surface-default a:hover .field--name-field-link-text{
  background: color-mix(in oklch, var(--ctx-surface-bg) 85%, var(--ctx-hover-mix));
}

.surface-related .big-button a,
.surface-related a .field--name-field-link-text{
  background: var(--ctx-surface-related-bg);
  color:      var(--ctx-surface-related-fg);
}
.surface-related .big-button a:hover ,
.surface-related a:hover .field--name-field-link-text{
  background: color-mix(in oklch, var(--ctx-surface-related-bg) 85%, var(--ctx-hover-mix));
}

.surface-complementary .big-button a,
.surface-complementary a .field--name-field-link-text{
  background: var(--ctx-surface-complementary-bg);
  color:      var(--ctx-surface-complementary-fg);
}
.surface-complementary .big-button a:hover ,
.surface-complementary a:hover {
	background: color-mix(in oklch, var(--ctx-surface-complementary-bg) 85%, var(--ctx-hover-mix));
}

.surface-neutral .big-button a,
.surface-neutral a .field--name-field-link-text{
  background: var(--ctx-surface-neutral-bg);
  color:      var(--ctx-surface-neutral-fg);
}
.surface-neutral .big-button a:hover ,
.surface-neutral a:hover .field--name-field-link-text{
  background: color-mix(in oklch, var(--ctx-surface-neutral-bg) 85%, var(--ctx-hover-mix));
}


a.file-download{
  background: var(--ctx-surface-bg);
  color:      var(--ctx-surface-fg);
}
a:hover.file-download{
  background: color-mix(in oklch, var(--ctx-surface-bg) 85%, var(--ctx-hover-mix));
}


.field__item .text-formatted ul li::before { color: var(--ctx-highlight); }
.field__item .text-formatted ol              { color: var(--ctx-fg); }
.field__item .text-formatted ul              { color: var(--ctx-fg); }
.field__item .text-formatted p              { color: var(--ctx-fg); }
.field__item .text-formatted a              { color: var(--ctx-highlight); }
.field__item .text-formatted h1, 
.field__item .text-formatted h2, 
.field__item .text-formatted h3             { color: var(--ctx-fg); }
.card-title 								{color: var(--ctx-fg);}