// Customize bootstrap variables, in particular the color theme.
// https://getbootstrap.com/docs/5.1/customize/color/#theme-colors
// https://nextjs.org/docs/basic-features/built-in-css-support#sass-support

$red: #c71e32;
$orange: #ff8600;
$blue: #1a3185;
$dark-blue: #0b0a3e;
$green: #3d9922;
$gray-700: #495057;
$pantone-blue: #d1d6e7;

$body-bg: #eae7e7;

$primary: $red;
$secondary: $blue;
$success: $green;
$info: $pantone-blue;
$warning: $orange;
$dark: $dark-blue;

$link-color: $secondary;

$line-height-0: 0;

// Nunito, rest copied from node_modules/bootstrap/scss/_variables.scss
$font-family-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

$headings-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

// Modal Overrides
$modal-header-padding-x: 1.5rem;
$modal-header-padding-y: 1rem;
$modal-inner-padding: 2rem;

$modal-lg: 650px;

// Input overrides
$input-bg: #fff;
$input-focus-border-color: rgba($gray-700, 0.75);
$input-btn-focus-color: rgba($gray-700, 0.25);

// Close button overrides
$btn-close-color: #fff;
$btn-close-focus-shadow: 0 0 0 0.25rem rgba(#fff, 0.25);
$btn-close-opacity: 1;
$btn-close-hover-opacity: 1;
$btn-close-focus-opacity: 1;

// Tooltip overrides
$tooltip-bg: $blue;
$tooltip-arrow-color: $blue;

// Negative Margin override
$enable-negative-margins: true;

// Font size adjustments
// $font-size-base: 16px; // default is 1rem. initially using exact px values but may go back to rem etc

$h1-font-size: 40px;
$h2-font-size: 32px;
$h3-font-size: 28px;
$h4-font-size: 24px;
$h5-font-size: 20px;
$h6-font-size: 16px;

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
) !default;

$utilities: (
  "font-size": (
    rfs: true,
    responsive: true,
    property: font-size,
    class: fs,
    values: $font-sizes
  )
) !default;

@import "bootstrap/scss/bootstrap";

// Import fonts using the default bootstrap weights
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap");

:root {
  --bs-blue-100: #{$blue-100};
  --bs-blue-300: #{$blue-300};
  --bs-red-100: #{$red-100};
  --bs-dark-blue: #0b0a3e;
}

@mixin button-contrast($color-a, $color-b) {
  --#{$prefix}btn-bg: #{$color-a};
  --#{$prefix}btn-hover-bg: #{$color-b};
  --#{$prefix}btn-active-bg: #{$color-a};
  --#{$prefix}btn-color: #{$color-b};
  --#{$prefix}btn-hover-color: #{$color-a};
  --#{$prefix}btn-active-color: #{$color-b};
}

@each $color, $value in $theme-colors {
  .btn-hover-#{$color} {
    @include button-contrast($white, $value);
  }
  .btn-hover-outline-#{$color} {
    @include button-contrast($value, $white);
  }
  .btn-active-#{$color} {
    @include button-contrast($value, $white);
  }
  .btn-active-outline-#{$color} {
    @include button-contrast($white, $value);
  }
}

.btn-bg-white {
  --bs-btn-bg: white;
  background-color: var(--bs-btn-bg);
}

.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-narrow {
  letter-spacing: -0.015em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
