// Bootstrap-derived SASS. See README.md in this folder for instructions.

@import "_colors.scss";
@import "_font-face.scss";

$navbar-padding-y: 0;
$nav-link-padding-x: 2rem;
$nav-link-padding-y: 1rem;
$navbar-brand-padding-y: 1.25rem;
$navbar-nav-link-padding-x: $nav-link-padding-x;
$navbar-nav-link-padding-y: $nav-link-padding-y;
$border-radius-lg: 8px;
$border-radius-sm: 4px;
$border-radius: $border-radius-sm;
$dropdown-border-width: 1px;
$enable-shadows: true;
$dropdown-box-shadow: 0px 5px 40px $black;
$card-spacer-x: 2rem;
$card-spacer-y: 2rem;
$spacer: 0.5rem;
// Bootstrap 5 uses separate variables for card header/footer
$card-cap-padding-y: 2rem;
$card-cap-padding-x: 2rem;
// $card-deck-margin is deprecated in Bootstrap 5 - card-deck no longer exists
// Define custom variable for backward compatibility
$card-deck-margin: 1.25rem;
$card-border-radius: $border-radius-lg;
// $card-columns-gap is deprecated in Bootstrap 5 - use grid system instead
$caret-width: 0.4em;

$input-btn-padding-y: 1rem;
$input-btn-padding-x: 1.5rem;
$input-btn-font-size: 14px;
$input-btn-line-height: 1.25;
$input-font-size: 1rem;

// @import "_font-face.scss";
$font-family-monospace: "Tobias", "Noto Serif", monospace;
$font-family-sans-serif: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
$base-size: 16px;
$line-height-base: 1.5;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 576px,
  lg: 992px,
  xl: 1280px
);

// Bootstrap v5 - Import only what we need
// Note: Bootstrap still uses @import internally, so we use @import for Bootstrap
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";

// Layout & components we actually use
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/tables";
@import "../node_modules/bootstrap/scss/forms";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/dropdown";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/card";
@import "../node_modules/bootstrap/scss/breadcrumb";
@import "../node_modules/bootstrap/scss/modal";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/helpers";

// Import utilities LAST so they have highest specificity
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/utilities/api";

// Import site styles
@import "_font.scss";
@import "_forms.scss";
@import "_layout.scss";
@import "_side-nav.scss";
@import "_helpers.scss";
@import "_buttons.scss";
@import "_tables.scss";
@import "_use-cases.scss";
@import "_github-edit.scss";
@import "_top-nav.scss";
@import "_top-banner.scss";
@import "_content.scss";
@import "../shared/components/PageGrid/page-grid";
@import "_code-tabs.scss";
@import "_code-walkthrough.scss";
@import "_diagrams.scss";
@import "_external-links.scss";
@import "_footer.scss";
@import "_callouts.scss";
@import "_cards.scss";
@import "_breadcrumbs.scss";
@import "_landings.scss";
@import "_interactive-tutorials.scss";
@import "_status-labels.scss";
@import "_dev-tools.scss";
@import "_print.scss";
@import "_pages.scss";
@import "_rpc-tool.scss";
@import "_blog.scss";
@import "_feedback.scss";
@import "_video.scss";
@import "_contribute.scss";
@import "_docs-landing.scss";
@import "_osano.scss";

// Light/Dark theme settings ---------------------------------------------------
// Option to only change theme on user system settings.  No toggle.

//Mixin to conditionaly include other themes
// @import "light/_mixins.scss";

// Default to dark theme with light being alt
// $color-scheme-alt: light;

// @include prefers-color-scheme($color-scheme-alt) {
//     @import "light/_light-theme.scss";
// }

html.light {
  @import "light/_light-theme.scss";
}