// ============================================
// t-theme (for reference / completeness)
// ============================================
// _t-theme.scss

:root {
  // Base colors
  --hks-primary: #{$primary};
  --hks-primary-50: #{$primary-50};
  --hks-primary-30: #{$primary-30};
  --hks-primary-15: #{$primary-15};
  --hks-black: #{$black};
  --hks-black-50: #{$black-50};
  --hks-black-30: #{$black-30};
  --hks-black-15: #{$black-15};
  --hks-white: #{$white};

  // NRW state colors
  --hks-green: #{$hks-green};
  --hks-red: #{$hks-red};

  // Secondary greens
  --hks-secondary-grasgruen: #{$secondary-grasgruen};
  --hks-secondary-grasgruen-70: #{$secondary-grasgruen-70};
  --hks-secondary-grasgruen-50: #{$secondary-grasgruen-50};
  --hks-secondary-grasgruen-30: #{$secondary-grasgruen-30};
  --hks-secondary-petrolgruen: #{$secondary-petrolgruen};
  --hks-secondary-petrolgruen-70: #{$secondary-petrolgruen-70};
  --hks-secondary-petrolgruen-50: #{$secondary-petrolgruen-50};
  --hks-secondary-petrolgruen-30: #{$secondary-petrolgruen-30};
  --hks-secondary-farngruen: #{$secondary-farngruen};
  --hks-secondary-farngruen-70: #{$secondary-farngruen-70};
  --hks-secondary-farngruen-50: #{$secondary-farngruen-50};
  --hks-secondary-farngruen-30: #{$secondary-farngruen-30};

  // Secondary reds
  --hks-secondary-purpurrot: #{$secondary-purpurrot};
  --hks-secondary-purpurrot-70: #{$secondary-purpurrot-70};
  --hks-secondary-purpurrot-50: #{$secondary-purpurrot-50};
  --hks-secondary-purpurrot-30: #{$secondary-purpurrot-30};
  --hks-secondary-rosenrot: #{$secondary-rosenrot};
  --hks-secondary-rosenrot-70: #{$secondary-rosenrot-70};
  --hks-secondary-rosenrot-50: #{$secondary-rosenrot-50};
  --hks-secondary-rosenrot-30: #{$secondary-rosenrot-30};
  --hks-secondary-tonsteinrot: #{$secondary-tonsteinrot};
  --hks-secondary-tonsteinrot-70: #{$secondary-tonsteinrot-70};
  --hks-secondary-tonsteinrot-50: #{$secondary-tonsteinrot-50};
  --hks-secondary-tonsteinrot-30: #{$secondary-tonsteinrot-30};

  // Semantic aliases
  --hks-bg-light: #{$bg-light};
  --hks-bg-dark: #{$bg-dark};
  --hks-bg-muted: #{$bg-muted};
  --hks-color-text-inverse: #{$color-text-inverse};
  --hks-color-text-muted: #{$color-text-muted};
  --hks-color-link-inverse: #{$color-link-inverse};
  --hks-color-hover: #{$color-hover};
  --hks-color-accent: #{$color-accent};
  --hks-color-success: #{$color-success};
}

.t-dark {
  background-color: $bg-dark;
  color: $color-text-inverse;

  a:not([class]) {
    color: $color-link-inverse;
  }

  a:not([class]),
  a[class=""] {
    color: $color-text-inverse;
    text-decoration-color: rgba($color-text-inverse, 0.4);

    &:hover {
      color: $color-text-inverse;
      text-decoration-color: $color-text-inverse;
    }

    &:visited {
      color: rgba($color-text-inverse, 0.8);
    }

    &:focus-visible {
      outline-color: $color-text-inverse;
    }
  }
}

.t-blue {
  background-color: $primary;
  color: $white;
}

.t-light {
  background-color: $bg-light;
}

.t-red {
  background-color: $secondary-purpurrot;
  color: #fff;
}

// ============================================
// Accent Utilities
// ============================================
// Adds decorative color accents to themed sections.

.t-accent {
  position: relative;
}
section,
div {
  &:has(.t-accent) {
    // Ensure accents don't overflow the section/container
    overflow: visible;
  }
}
.t-accent--block,
.t-accent--text-block {
  isolation: isolate;

  --accent-width: clamp(6rem, 25vw, 10rem);
  --accent-height: calc(var(--accent-width) * 0.46875);
  --accent-edge-gap: 0.25rem;

  position: relative;

  &::before,
  &::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: var(--accent-width);
    height: var(--accent-height);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  // Top-right red accent
  &::before {
    top: calc(var(--accent-edge-gap) * -15);
    right: calc(var(--accent-edge-gap) * 12);

    background-image: url("data:image/svg+xml,%3Csvg width='288' height='135' viewBox='0 0 288 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.77198 27.9846C2.59065 39.8207 0 44.4414 0 65.6449C0 74.2529 10.3626 107.282 42.7459 119.445C82.9012 136.666 166.399 135.111 218.559 132.52C242.173 131.347 285.394 131.332 287.468 107.282C289.672 81.7143 252.25 83.0686 231.471 82.7917C192.202 82.2595 108.585 91.79 75.4573 80.0597C46.646 69.857 18.1347 55.9555 28.4973 0C11.658 16.1443 11.658 20.4526 7.77198 27.9846Z' fill='%23e2001a'/%3E%3C/svg%3E");
    transform: translate(38%, -38%) rotate(180deg);
    transform-origin: center;
    @include media-breakpoint-up(sm) {
      top: calc(var(--accent-edge-gap) * -10);
      right: calc(var(--accent-edge-gap) * 20);
    }
    @include media-breakpoint-up(md) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 10);
    }
    @media (min-width: 850px) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(lg) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(xl) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 1);
    }
  }

  // Bottom-left green accent
  &::after {
    bottom: calc(var(--accent-edge-gap) * -15);
    left: calc(var(--accent-edge-gap) * 13);

    background-image: url("data:image/svg+xml,%3Csvg width='288' height='135' viewBox='0 0 288 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.77198 27.9846C2.59065 39.8207 0 44.4414 0 65.6449C0 74.2529 10.3626 107.282 42.7459 119.445C82.9012 136.666 166.399 135.111 218.559 132.52C242.173 131.347 285.394 131.332 287.468 107.282C289.672 81.7143 252.25 83.0686 231.471 82.7917C192.202 82.2595 108.585 91.79 75.4573 80.0597C46.646 69.857 18.1347 55.9555 28.4973 0C11.658 16.1443 11.658 20.4526 7.77198 27.9846Z' fill='%23009036'/%3E%3C/svg%3E");
    transform: translate(-38%, 38%);
    @include media-breakpoint-up(sm) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 15);
    }
    @media (min-width: 850px) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 8);
    }
    @include media-breakpoint-up(lg) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(xl) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 1);
    }
  }

  > * {
    position: relative;
    z-index: 1;
  }
}

.t-accent--block {
  // Top-right red accent
  &::before {
    top: calc(var(--accent-edge-gap) * -10);
    right: calc(var(--accent-edge-gap) * 13);

    background-image: url("data:image/svg+xml,%3Csvg width='288' height='135' viewBox='0 0 288 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.77198 27.9846C2.59065 39.8207 0 44.4414 0 65.6449C0 74.2529 10.3626 107.282 42.7459 119.445C82.9012 136.666 166.399 135.111 218.559 132.52C242.173 131.347 285.394 131.332 287.468 107.282C289.672 81.7143 252.25 83.0686 231.471 82.7917C192.202 82.2595 108.585 91.79 75.4573 80.0597C46.646 69.857 18.1347 55.9555 28.4973 0C11.658 16.1443 11.658 20.4526 7.77198 27.9846Z' fill='%23e2001a'/%3E%3C/svg%3E");
    transform: translate(38%, -38%) rotate(180deg);
    transform-origin: center;
    @include media-breakpoint-up(sm) {
      top: calc(var(--accent-edge-gap) * -10);
      right: calc(var(--accent-edge-gap) * 20);
    }
    @include media-breakpoint-up(md) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 10);
    }
    @media (min-width: 850px) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(lg) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(xl) {
      top: calc(var(--accent-edge-gap) * -5);
      right: calc(var(--accent-edge-gap) * 1);
    }
  }

  // Bottom-left green accent
  &::after {
    bottom: calc(var(--accent-edge-gap) * -5);
    left: calc(var(--accent-edge-gap) * 13);

    background-image: url("data:image/svg+xml,%3Csvg width='288' height='135' viewBox='0 0 288 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.77198 27.9846C2.59065 39.8207 0 44.4414 0 65.6449C0 74.2529 10.3626 107.282 42.7459 119.445C82.9012 136.666 166.399 135.111 218.559 132.52C242.173 131.347 285.394 131.332 287.468 107.282C289.672 81.7143 252.25 83.0686 231.471 82.7917C192.202 82.2595 108.585 91.79 75.4573 80.0597C46.646 69.857 18.1347 55.9555 28.4973 0C11.658 16.1443 11.658 20.4526 7.77198 27.9846Z' fill='%23009036'/%3E%3C/svg%3E");
    transform: translate(-38%, 38%);
    @include media-breakpoint-up(sm) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 15);
    }
    @media (min-width: 850px) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 8);
    }
    @include media-breakpoint-up(lg) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 5);
    }
    @include media-breakpoint-up(xl) {
      bottom: calc(var(--accent-edge-gap) * -5);
      left: calc(var(--accent-edge-gap) * 1);
    }
  }

  > * {
    position: relative;
    z-index: 1;
  }
}

.t-accent--text-block {
  // JS-enabled state only; without JS it falls back to standard .t-accent--block.
  &.is-text-accent-ready {
    &::before {
      content: none;
    }

    .c-text-block__title {
      position: relative;
      isolation: isolate;

      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        width: var(--accent-width);
        height: var(--accent-height);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;

        // Top-right red accent on title (right controlled by JS line measurement)
        top: calc(var(--accent-edge-gap) * -7);
        right: var(--accent-title-before-right, 0px);

        background-image: url("data:image/svg+xml,%3Csvg width='288' height='135' viewBox='0 0 288 135' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.77198 27.9846C2.59065 39.8207 0 44.4414 0 65.6449C0 74.2529 10.3626 107.282 42.7459 119.445C82.9012 136.666 166.399 135.111 218.559 132.52C242.173 131.347 285.394 131.332 287.468 107.282C289.672 81.7143 252.25 83.0686 231.471 82.7917C192.202 82.2595 108.585 91.79 75.4573 80.0597C46.646 69.857 18.1347 55.9555 28.4973 0C11.658 16.1443 11.658 20.4526 7.77198 27.9846Z' fill='%23e2001a'/%3E%3C/svg%3E");
        transform: translate(38%, -38%) rotate(180deg);
        transform-origin: center;

        @include media-breakpoint-up(sm) {
          top: calc(var(--accent-edge-gap) * -8);
          right: calc(var(--accent-title-before-right) - 2.5%);
        }

        @include media-breakpoint-up(md) {
          top: calc(var(--accent-edge-gap) * -8);
        }

        @media (min-width: 850px) {
          top: calc(var(--accent-edge-gap) * -8);
        }

        @include media-breakpoint-up(lg) {
          top: calc(var(--accent-edge-gap) * -8);
        }

        @include media-breakpoint-up(xl) {
          top: calc(var(--accent-edge-gap) * -8);
        }
        @include media-breakpoint-up(xxl) {
          top: calc(var(--accent-edge-gap) * -12);
          right: calc(var(--accent-title-before-right) - 10%);
        }
      }
    }
  }
}

// Small accent variant
.t-accent--s {
  --accent-width: clamp(4rem, 15vw, 5rem);
}

// ============================================
// 08. DARK THEME BUTTON OVERRIDES
// ============================================
// Inside .t-dark, certain variants need adjustment.

.t-dark {
  .btn-ghost {
    --hks-btn-color: #{$white};
    --hks-btn-hover-color: #{$white};
    --hks-btn-hover-bg: rgba(#{$white}, 0.1);
    --hks-btn-active-bg: rgba(#{$white}, 0.15);
  }

  .btn-outline-primary {
    --hks-btn-color: #{$white};
    --hks-btn-border-color: rgba(#{$white}, 0.4);
    --hks-btn-hover-color: #{$black};
    --hks-btn-hover-bg: #{$white};
    --hks-btn-hover-border-color: #{$white};
  }

  .btn-link {
    --hks-btn-color: #{$white};
    --hks-btn-hover-color: rgba(#{$white}, 0.8);
  }
}