custom.scss

//
// Color system adapted to the Philippine flag colors
//
$white: #fff !default; // Already matches the flag
$black: #000 !default;

// Colors from the flag
$philippine-blue: #0038a8 !default; // Royal blue for peace and justice
$philippine-red: #ce1126 !default; // Red for valor and bravery
$philippine-yellow: #fcd116 !default; // Yellow for the sun and stars
$philippine-gray: #c4c4c4 !default; // A neutral gray for balance

// Navbar
$navbar-bg: $philippine-blue !default;
$navbar-fg: $white !default; // White for contrast with the blue background
$navbar-hl: $philippine-yellow !default; // Highlight links with yellow

// Links
$link-color: $philippine-red !default; // Red for links to stand out

// Code blocks
$code-block-bg: $philippine-gray !default; // Light gray background for code blocks

/* -- scss:mixins --*/

/*-- scss:rules --*/
// Overrides selectors from Sandstone that take precedence
// over $navbar-hl
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: $philippine-yellow; // Yellow on hover/focus for contrast and brightness
}

// Overrides Sandstone selectors for tabset links
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: $philippine-red; // Use red for tab links for consistency with other links
}

// Make blockquote text dark enough
.blockquote {
  color: $black; // Ensuring readability
}