@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&family=Inter:wght@100..900&family=Inter+Tight:wght@100..900&display=swap');

// Colors

$body-color: #fff !default;
$body-bg: #24292f !default;

$primary: mix($body-color, #22272e, 10%) !default;
$secondary: #6c757d !default;
$white: #fff !default;
$black: #373e47 !default;
$link-color: #2B8FFD !default;
$success: #2da44e !default;
$warning: #d4a72c !default;
$danger: #D86F75 !default;
$info: #9686BE !default;
$code-color: #E75CA2 !default;

// Typography

$headings-font-family: 'Inter Tight', Roboto !default;
$font-family-base: 'Inter', Roboto !default;
$font-family-monospace: 'Roboto Mono', monospace !default;
$headings-font-weight: 800 !default;
$text-muted: #8b949e !default;

// Chulapa components

$navbar-chulapa-bg-color: $body-bg !default;
$navbar-chulapa-toggler-border-color: $body-bg !default;
$navbar-chulapa-text-color: $body-color !default;
$navbar-chulapa-hover-color: $text-muted !default;
$navbar-chulapa-brand-color: $navbar-chulapa-text-color !default;

$footer-chulapa-bg-color: $body-bg !default;
$footer-chulapa-text-color: $text-muted !default;
$footer-chulapa-link-color: #58a6ff !default;
$footer-chulapa-icon-hover-color: mix($footer-chulapa-link-color, $footer-chulapa-bg-color, 20%) !default;

// Misc
// Blockquote
$blockquote-chulapa-bg-color: $body-bg !default;
$blockquote-chulapa-text-color: $body-color !default;

$pre-chulapa-bg-color: mix($body-bg, $body-color, 5%) !default;

$pagination-chulapa-bg-hover-color: $white !default;
$min-contrast-ratio: 2 !default;

// Lines for dark themes

@import "skins/dark-bg";

// Special rules

.hero-chulapa h1,
.hero-chulapa-image h1,
.splash-chulapa h1,
.splash-chulapa-image h1 {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight !important;
}

nav, .navbar, .navbar-chulapa-fab .nav-item, .navbar-chulapa, .footer-chulapa {
  font-family: $headings-font-family;
  font-weight: $headings-font-weight !important;
}

.navbar-chulapa .active, .navbar-chulapa-fab .active {
  color: mix($navbar-chulapa-text-color, $navbar-chulapa-bg-color, 80%) !important;
}

.chulapa-links-hover-only i {
  color: $link-color;
}

.chulapaDateSocial time, .chulapaDateSocial .chulapa-text-line-through {
  font-family: $font-family-monospace;
}

time {
  font-family: $font-family-monospace;
  font-style: normal !important;
}

blockquote {
  border-radius: 0 !important;
  border-left: solid $link-color !important;
}
