//Navbar
$navbar-chulapa-bg-color: $primary !default;
$navbar-chulapa-text-contrast: color-contrast($navbar-chulapa-bg-color, $black, $white);
$navbar-chulapa-text-color: mix($navbar-chulapa-text-contrast, $navbar-chulapa-bg-color, 50%) !default;
$navbar-chulapa-hover-color: mix($navbar-chulapa-text-contrast, $navbar-chulapa-bg-color, 75%) !default;
$navbar-chulapa-hover-bg-color: mix($navbar-chulapa-text-contrast, $navbar-chulapa-bg-color, 10%) !default;
$navbar-chulapa-active-color: $navbar-chulapa-text-contrast !default;
$navbar-chulapa-disabled-color: mix($navbar-chulapa-text-contrast, $navbar-chulapa-bg-color, 20%) !default;
$navbar-chulapa-brand-color: $navbar-chulapa-active-color !default;
$navbar-chulapa-brand-hover-color: $navbar-chulapa-active-color !default;
$navbar-chulapa-toggler-color: $navbar-chulapa-text-color !default;
$navbar-chulapa-toggler-color-bg: transparent !default;
$navbar-chulapa-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-chulapa-toggler-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-chulapa-toggler-border-color: $navbar-chulapa-toggler-color !default;


//Footer
$footer-chulapa-bg-color: $navbar-chulapa-bg-color !default;
$footer-chulapa-text-contrast: color-contrast($footer-chulapa-bg-color, $black, $white);
$footer-chulapa-text-color: mix($footer-chulapa-text-contrast, $footer-chulapa-bg-color, 75%) !default;
$footer-chulapa-link-color: mix($footer-chulapa-text-contrast, $footer-chulapa-bg-color, 90%) !default;
$footer-chulapa-hover-color: mix($footer-chulapa-link-color, $footer-chulapa-bg-color, 80%) !default;
$footer-chulapa-icon-color: $footer-chulapa-text-color !default;
$footer-chulapa-icon-hover-color: mix($footer-chulapa-text-contrast, $footer-chulapa-bg-color, 50%) !default;

//Hero
$hero-chulapa-bg-color: $navbar-chulapa-bg-color !default;
$hero-chulapa-text-color: color-contrast($hero-chulapa-bg-color, $black, $white) !default;

//Landing page
$landingpage-chulapa-bg-color: $hero-chulapa-bg-color !default;
$landingpage-chulapa-text-color: color-contrast($landingpage-chulapa-bg-color, $black, $white) !default;
$landingpage-card-bg: mix($landingpage-chulapa-text-color, $landingpage-chulapa-bg-color, 5%);

//Misc
//Blockquote
$blockquote-chulapa-bg-color: darken($body-bg, 5%) !default;
$blockquote-chulapa-text-color: mix($blockquote-chulapa-bg-color, $body-color, 20%) !default;

$footnote-chulapa-text-color: color-contrast($body-bg, $gray-600, $gray-300) !default;

$pre-chulapa-bg-color: mix($white, $primary, 95%) !default;

//Table
$thead-chulapa-bg-color: $primary !default;
$thead-chulapa-text-color: color-contrast($thead-chulapa-bg-color, $black, $white) !default;


//Pagination
$pagination-chulapa-text-color: $body-color !default;
$pagination-chulapa-bg-hover-color: $primary !default;
$pagination-chulapa-text-hover-color: color-contrast($pagination-chulapa-bg-hover-color, $black, $white) !default;


// Chulapa Layouts

$indexcards-chulapa-border-color: $text-muted !default;

// TOC bg

$chulapa-toc-bg: $light !default;

// Cactus comments

$cactus-btn-text: color-contrast($secondary, $black, $white);

:root {
  --cactus-error-color: #{$danger};
  --cactus-border-radius: #{$btn-border-radius};
  --cactus-button-text-color: #{$cactus-btn-text};
  --cactus-border-color: #{$secondary};
  --cactus-button-color: #{$secondary};
  --cactus-text-color: #{$footer-chulapa-text-color};
  --cactus-text-color--soft: #{$footer-chulapa-hover-color};
}
