//** Init | Variables
// Colors variables
$background: #fbfaf9;
$primary: #255687;

$primary: #1863af;
$secondary: #1f8389;
$tertiary: #667a81;
$success: #4f8419;
$info: #0f7a8b;
$warning: #bf1722;
$danger: #db2427;
$light: #e0e0e0;
$dark: #333;
$disabled: #c8c8c8;
$veryLightBorder: #e8e8e8;

$bolt-blue: #255687; // Nice and bright, pretty light
$bolt-bluegray: #2f3e4d; // Nice dark and desaturated
$bolt-saturated: #003e7c; // Very saturated. Use with care

$gray-200: #e9ecef; // Use default Bootstrap value for now

$body-bg: $background;
$body-secondary-bg:         $gray-200; // Use default Bootstrap value for now

$theme-colors: (
  "primary":   $primary,
  "secondary": $secondary,
  "tertiary":  $tertiary,
  "success":   $success,
  "info":      $info,
  "warning":   $warning,
  "danger":    $danger,
  "light":     $light,
  "dark":      $dark,
  "boltblue":  $bolt-blue,
  'very-light-border': $veryLightBorder,
  "toast-success": #dce6d1,
  "toast-danger": #f8d3d4,
  "toast-info": #cfe4e8,
  "toast-warning": #f2d1d3
);

$letter-spacing: 0;

$big-z-index: 1000;

// Typography
$font-family-base:            system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$headings-font-family:        'Source Sans Variable', sans-serif;

$font-size-base:              0.9rem;
$font-size-largescreen:       1rem;
$line-height-base:            1.5;
$small-font-size:             88%;

// Minor Third progression for header font sizes
$h1-font-size:                $font-size-base * 2.07;
$h2-font-size:                $font-size-base * 1.728;
$h3-font-size:                $font-size-base * 1.44;
$h4-font-size:                $font-size-base * 1.2;
$h5-font-size:                $font-size-base;
$h6-font-size:                $font-size-base;

$font-weight-light:             300;
$font-weight-normal:            400;
$font-weight-semibold:          600;
$font-weight-bold:              700;
$headings-font-weight:          600;

// Links
$link-color:                $primary;

//buttons
$btn-disabled-opacity:                  0.75;
$btn-hover-bg-shade-amount:             10%;
//$btn-hover-bg-tint-amount:              50%;

// Form controls
$border-radius:                         0.15rem;
$component-active-bg:                   $primary;
$input-focus-border-color:              var(--primary-400);
$custom-control-indicator-active-bg:    var(--primary-400);
$custom-range-thumb-active-bg:          var(--primary-400);
$form-group-margin-bottom:              2rem;

$input-bg:                              var(--foreground);
$input-disabled-bg:                     #f0f3f6;
$input-disabled-color:                  #6f6f6f;
$input-placeholder-color:               #aaa;

$input-btn-focus-width:                 0.15rem;
$input-btn-focus-box-shadow:            0 0 0 $input-btn-focus-width var(--primary-200);

// Cards
$card-border-width:                 0;
$card-border-radius:                $border-radius;
$card-border-color:                 var(--very-light-border);
$card-bg:                           var(--foreground);
$card-box-shadow:                   0 7.5px 15px -5px rgba(0, 0, 0, 0.12);
$card-cap-bg:                       rgba(0, 0, 0, 0.06);

// Buttons
$btn-border-radius: 0.2rem;
$btn-border-radius-sm: 0.2rem;
$btn-font-weight: 500;
$btn-font-size-lg: 16px;
$btn-font-size: 14px;
$btn-font-size-sm: 13px;
$btn-padding-x: 0.6rem;

$spacer: 1rem;

// Pagination
$pagination-focus-outline: solid 0.15rem;

// Alerts
//
// Define alert colors, border radius, and padding.
$alert-bg-level: 0; // Keep Bootstrap 4 variable to prevent breaking compilation when it's used

// Grid
$grid-breakpoints: (
  xxs: 0,
  xs: 480px,
  sm: 576px,
  md: 760px,
  lg: 992px,
  xl: 1272px,
  wd: 1400px,
  xw: 1750px
);

// This number determines of a button has white or black text (a11y)
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
$min-contrast-ratio:  4.5;

// Popovers

$popover-header-padding-y:          0.5rem;
$popover-header-padding-x:          0.75rem;
$popover-header-bg:                 $body-secondary-bg;

$popover-body-padding-y:            0.5rem;
$popover-body-padding-x:            0.75rem;

// Variables overriding Bootstrap
// Toasts
$toast-max-width:                   250px;
$toast-background-color:            #fbfaf9;
$toast-border-radius:               0.25rem;
$toast-box-shadow:                  0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
$toast-header-border-color:         rgba(0, 0, 0, 0.05);

:root {
  --body: #222; // Note: this value isn't actually used. @todo Find out where it's coming from.
  --body-dimmed: #555;
  --background: #fbfaf9;
  --foreground: #fff;
  --foreground-border: #e8e8e8;
  --primary: #255687;
  --shade: #666;
  --shade-light: #ddd;
  --status-published: #08b883;
  --status-draft: #1078da;
  --status-held: #dd2443;
  --status-timed: #741ce6;
  --admin-sidebar: #2f3e4d;
  --admin-sidebar-text: #eee;
  --admin-sidebar-icon: #fff;
  --admin-sidebar-menu: #fff;
  --admin-sidebar-menu-text: #666;
  --admin-toolbar: #4c6e91;
  --admin-toolbar-text-light: #fff;
  --admin-toolbar-text-dark: #0c223b;
  --very-light-border: #e8e8e8;
  --light-border: #e0e0e0;

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }
}

// Variables for admin, toolbar and admin sidebar
$admin-toolbar-height: 40px;
$admin-toolbar-height-wide: 50px;
$admin-sidebar-width: 200px;
$admin-sidebar-width-wide: 250px;
$admin-aside-width: 320px;
$admin-header-height: 70px;
