@use "sass:color";

// Fonts
$font-family-sans-serif: "Inter", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-size-base: 0.875rem !default;
$font-size-lg: 0.925rem !default;
$font-size-sm: 0.75rem !default;
$small-font-size: 80% !default;

// Spacer
$spacer: 1rem !default;

// Grid gutter (allows consistent spacing with cards inside grid)
$grid-gutter-width: 1rem !default;

$container-padding-x: $grid-gutter-width !default;

// Options
// 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: 3 !default;
$enable-validation-icons: false !default;
$enable-rfs: true !default;
$enable-negative-margins: true !default;

// Transitions
$transition-base: all 0.35s ease-in-out !default;

// Theme colors, based on
// Color palette: https://accessiblepalette.com/?lightness=98.2,93.9,85,76.2,67.4,59,48,40.2,31.8,24.9&e11629=1,0&f65b01=1,0&f9d103=1,0&218246=1,0&00c2c2=1,0&669999=1,0&0077bc=0,0&bed0ed=1,0&2A1770=1,0&AF34FE=1,0&DF2F9B=1,0&e0e0e0=1,0
// Gray palette: https://accessiblepalette.com/?lightness=98.2,97.8,92.9,89,83.8,72.4,50,33,23,13.5&e11629=1,0&f65b01=1,0&f9d103=1,0&218246=1,0&00c2c2=1,0&669999=1,0&0077bc=0,0&bed0ed=1,0&2A1770=1,0&AF34FE=1,0&DF2F9B=1,0&6c757d=1,0
$blue: #0077bc !default;
$red: #e21e2b !default;
$orange: #f65b01 !default;
$green: #228246 !default;
$teal: #527979 !default;
$cyan: #1d7e7e !default;

// Other colors, not used in admini
$yellow: #f9d10c !default;
$indigo: #695297 !default;
$purple: #a633f1 !default;
$pink: #cc2e8e !default;

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$primary: $blue !default;
$primary-hs: color.hue($blue), color.saturation($blue) !default;
$primary-l: color.lightness($blue) !default;
$secondary: #6a7380 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $orange !default;
$danger: $red !default;
$light: #e9ecef !default;
$dark: #212529 !default;

$blue-50: #f7fafd !default;
$blue-100: #e2f0f7 !default;
$blue-200: #b6d9ee !default;
$blue-300: #8bc3e3 !default;
$blue-400: #60add9 !default;
$blue-500: #3496ce !default;
$blue-600: $blue !default;
$blue-700: #00639c !default;
$blue-800: #004f7c !default;
$blue-900: #003e62 !default;

$red-50: #fff8f7 !default;
$red-100: #ffe9e5 !default;
$red-200: #ffc7be !default;
$red-300: #ffa497 !default;
$red-400: #fd7e71 !default;
$red-500: #f5584f !default;
$red-600: $red !default;
$red-700: #ba1c24 !default;
$red-800: #911d1e !default;
$red-900: #711b19 !default;

$orange-50: #fff9f5 !default;
$orange-100: #ffe9dd !default;
$orange-200: #ffc9ab !default;
$orange-300: #ffa779 !default;
$orange-400: #ff8042 !default;
$orange-500: $orange !default;
$orange-600: #c44b0b !default;
$orange-700: #a2400e !default;
$orange-800: #7f340f !default;
$orange-900: #632a0f !default;

$green-50: #f8fbf8 !default;
$green-100: #e6f0e8 !default;
$green-200: #c2dbc7 !default;
$green-300: #9ec5a7 !default;
$green-400: #7bb087 !default;
$green-500: #589c6b !default;
$green-600: $green !default;
$green-700: #206c3b !default;
$green-800: #1e5530 !default;
$green-900: #1b4327 !default;

$teal-50: #f8fafa !default;
$teal-100: #e7efef !default;
$teal-200: #c5d8d8 !default;
$teal-300: #a4c2c1 !default;
$teal-400: #83acac !default;
$teal-500: #659797 !default;
$teal-600: $teal !default;
$teal-700: #456464 !default;
$teal-800: #374f4f !default;
$teal-900: #2d3e3e !default;

$cyan-50: #f4fbfb !default;
$cyan-100: #d9f3f2 !default;
$cyan-200: #a0e0df !default;
$cyan-300: #5acdcc !default;
$cyan-400: #0bb7b7 !default;
$cyan-500: $cyan !default;
$cyan-600: #1d7e7e !default;
$cyan-700: #1e6969 !default;
$cyan-800: #1d5352 !default;
$cyan-900: #1a4141 !default;

// not used

$yellow-50: #fffae9 !default;
$yellow-100: #ffedb2 !default;
$yellow-200: $yellow !default;
$yellow-300: #ddb90f !default;
$yellow-400: #c1a214 !default;
$yellow-500: #a78c17 !default;
$yellow-600: #867018 !default;
$yellow-700: #6f5d17 !default;
$yellow-800: #584a16 !default;
$yellow-900: #453a14 !default;

$indigo-50: #faf9fc !default;
$indigo-100: #efecf4 !default;
$indigo-200: #d9d1e5 !default;
$indigo-300: #c3b7d5 !default;
$indigo-400: #ad9dc6 !default;
$indigo-500: #9885b7 !default;
$indigo-600: #7d67a5 !default;
$indigo-700: $indigo !default;
$indigo-800: #543d89 !default;
$indigo-900: #422b7d !default;

$purple-50: #fdf8ff !default;
$purple-100: #f8e8ff !default;
$purple-200: #edc7ff !default;
$purple-300: #e0a6ff !default;
$purple-400: #d283ff !default;
$purple-500: #c260ff !default;
$purple-600: $purple !default;
$purple-700: #8a2ec5 !default;
$purple-800: #6c2899 !default;
$purple-900: #552275 !default;

$pink-50: #fff8fb !default;
$pink-100: #fee8f2 !default;
$pink-200: #fbc6df !default;
$pink-300: #f6a3cd !default;
$pink-400: #ef7fba !default;
$pink-500: #e759a9 !default;
$pink-600: $pink !default;
$pink-700: #a82b76 !default;
$pink-800: #83265c !default;
$pink-900: #662148 !default;

// Body
$body-bg: $white !default;
$body-color: $gray-700 !default;

// Main
$main-bg: tint-color($primary, 98%) !default;
$main-bg-dark: desaturate(mix(black, $primary, 90%), 60%) !default;

// Header
$header-bg: tint-color($primary, 94%) !default;
$header-bg-dark: desaturate(mix(black, $primary, 90%), 20%) !default;

// Links
$link-decoration: none !default;
$link-hover-decoration: underline !default;

// Common
$border-width: 1px !default;

// Fonts
$line-height-base: 1.5 !default;
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;

// Headings
$h1-font-size: $font-size-base * 2 !default;
$h2-font-size: $font-size-base * 1.75 !default;
$h3-font-size: $font-size-base * 1.5 !default;
$h4-font-size: $font-size-base * 1.25 !default;
$h5-font-size: $font-size-base !default;
$h6-font-size: $font-size-base !default;
$headings-color: $black !default;
$headings-font-weight: 400 !default;

// Displays
$display-font-sizes: (
  1: 6rem,
  2: 5.5rem,
  3: 4.5rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem,
  ) !default;

// Border radius
$border-radius-sm: 0.1rem !default;
$border-radius: 0.2rem !default;
$border-radius-lg: 0.3rem !default;

// Do not show valid state
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-invalid-color: $danger !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;

$form-validation-states: (
  // "valid": (
  //   "color": $form-feedback-valid-color,
  //   "icon": $form-feedback-icon-valid
  // ),
  "invalid": ("color": $form-feedback-invalid-color,
    "icon": $form-feedback-icon-invalid,
  )) !default;

// Cards
$card-border-radius: 0.25rem !default;
$card-inner-border-radius: $card-border-radius !default;
$card-border-width: 0 !default;
$card-border-color: transparent !default;
$card-shadow: 0 0 0.875rem 0 rgba($dark, 0.05) !default;
$card-title-font-size: $font-size-lg !default;
$card-title-font-weight: $font-weight-bold !default;
$card-title-color: lighten($gray-600, 15%) !default;
$card-spacer-y: 1rem !default;
$card-spacer-x: 1rem !default;
$card-cap-padding-y: 1rem !default;
$card-cap-padding-x: $card-spacer-x !default;

// Cards badge
$card-badge-bg: lighten($primary, 35%) !default;
$card-badge-color: $primary !default;
$card-badge-size: 36px;

// Tables
$table-cell-padding-y: 0.75rem !default;
$table-cell-padding-x: 0.75rem !default;
$table-cell-padding-y-sm: 0.3rem !default;
$table-cell-padding-x-sm: 0.3rem !default;

// Sidebar //
// Sidebar general
$sidebar-width: 260px !default;
$sidebar-compact-width: 80px !default;
$sidebar-bg: desaturate(mix(black, $primary, 90%), 20%) !default;
$sidebar-bg-dark: desaturate(mix(black, $primary, 70%), 50%) !default;
$sidebar-border-color: rgba(255, 255, 255, 0.15) !default;

// Sidebar brand
$sidebar-brand-height: 52px;
$sidebar-brand-padding: 0.625rem !default;
$sidebar-brand-font-weight: $font-weight-bold !default;
$sidebar-brand-font-size: 1.1rem !default;
$sidebar-brand-color: $gray-100 !default;
$sidebar-brand-bg: mix(black, $sidebar-bg, 60%) !default;
$sidebar-brand-bg-dark: mix(black, $sidebar-bg-dark, 20%) !default;

// Sidebar scroller
$sidebar-scroller-color: color.hue($sidebar-brand-bg),
  color.saturation($sidebar-brand-bg) * 0.5 !default;
$sidebar-scroller-lightness: 30% !default;

// Sidebar nav header
$sidebar-nav-header-padding: 1rem 0.625rem 0.375rem !default;
$sidebar-nav-header-font-size: $font-size-sm !default;
$sidebar-nav-header-color: $gray-600 !default;

// Sidebar footer
$sidebar-footer-height: 52px;

// Sidebar link
$sidebar-link-padding-x: 0.625rem !default;
$sidebar-link-padding-y: 0.625rem !default;
$sidebar-link-padding: $sidebar-link-padding-y $sidebar-link-padding-x !default;
$sidebar-link-font-weight: 400 !default;
$sidebar-link-color: rgba($light, 0.7) !default;
$sidebar-link-border-left-color: transparent !default;

$sidebar-link-hover-font-weight: $font-weight-normal !default;
$sidebar-link-hover-bg: $sidebar-bg !default;
$sidebar-link-hover-color: #{rgba($gray-200, 1)} !default;
$sidebar-link-hover-border-left-color: transparent !default;

$sidebar-link-active-font-weight: $font-weight-normal !default;
$sidebar-link-active-bg: #{linear-gradient(90deg, rgba($primary, 0.1) 0%, rgba($primary, 0.0875) 50%, rgba($black, 0) 100%)} !default;
$sidebar-link-active-color: $gray-200 !default;
$sidebar-link-active-border-left-color: $primary !default;

// Sidebar link icon
$sidebar-link-icon-color: #{rgba($gray-200, 0.7)} !default;
$sidebar-link-icon-hover-color: #{rgba($gray-200, 1)} !default;
$sidebar-link-icon-active-color: $gray-200 !default;

// Sidebar cta
$sidebar-cta-color: $gray-200 !default;
$sidebar-cta-bg: mix(white, $sidebar-bg, 10%) !default;
$sidebar-cta-padding: $spacer * 1.5 !default;
$sidebar-cta-margin: $spacer * 1.75 !default;
$sidebar-cta-border-radius: $border-radius-lg !default;
// End of Sidebar //

// Sidemenu
$sidemenu-width: 260px !default;

// Modals
$modal-content-border-width: 0 !default;
$modal-header-border-width: 1px !default;
$modal-footer-border-width: 1px !default;
$modal-xl: 1140px !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-sm: 400px !default;
$modal-transition: transform 0.3s ease-out !default;

$scrollable-selector: "body, .scroller" !default;

// Patterns
// @link https://heropatterns.com/
$default-pattern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'><path fill='currentColor' opacity='0.2' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'></path></svg>") !default;