:root {
  --header-height: 3rem;

  --#{$prefix}page-footer-bg: #{$page-footer-bg};
  --#{$prefix}page-footer-headline-color: #{$page-footer-headline-color};
  @if $page-footer-color {
    --#{$prefix}page-footer-color: #{$page-footer-color};
  }
  @if $page-footer-link-hover-color {
    --#{$prefix}page-footer-link-hover-color: #{$page-footer-link-hover-color};
  }


  --#{$prefix}scroll-margin-top: #{$scroll-margin-top};

  --#{$prefix}nav-meta-link-color: #{$gray-700};
  --#{$prefix}nav-calltoaction-link-color: #{$gray-700};
  --#{$prefix}nav-calltoaction-link-hover-color: #{$primary};

  --#{$prefix}page-bg: #{$page-bg};

  --#{$prefix}page-header-middle-bg: #{$page-header-middle-bg};

  --#{$prefix}input-focus-border-color: #{tint-color($component-active-bg, 50%)};
  --#{$prefix}focus-ring-box-shadow: #{0 0 $focus-ring-blur $focus-ring-width $focus-ring-color};

  --#{$prefix}mobile-menu-bg: #{$mobile-menu-bg};
}

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    color-scheme: dark;

    --#{$prefix}page-footer-bg: #{$page-footer-bg-dark};
    --#{$prefix}page-footer-headline-color: #{$page-footer-headline-color-dark};
    @if $page-footer-color-dark {
      --#{$prefix}page-footer-color: #{$page-footer-color-dark};
    }

    --#{$prefix}page-bg: #{$page-bg-dark};

    --#{$prefix}mobile-menu-bg: #{$mobile-menu-bg-dark};
  }
}

@if $enable-contrast-mode {
  @include contrast-mode(more, true) {


    --#{$prefix}body-color: #{$body-color-high};
    --#{$prefix}body-color-rgb: #{to-rgb($body-color-high)};
    --#{$prefix}body-bg: #{$body-bg-high};
    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-high)};

    --#{$prefix}page-footer-bg: #{$page-footer-bg-high};

  }
}