/* ================= */
// ABSTRACTS: VARIABLES GENERAL
/* ================= */

// https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

$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;

$blue: #0d6efd !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #d63384 !default;
$red: #dc3545 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #198754 !default;
$teal: #20c997 !default;
$cyan: #0dcaf0 !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-900 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark,
  ),
  $theme-colors
);

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;

//font-family: 'Nunito Sans', sans-serif;
//font-family: 'Poppins', sans-serif;
$font-family-base: "Guillon";
$headings-font-family: "Guillon", sans-serif;
$font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
  sans-serif;
$font-family-monospace: "Space Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

$enable-grid-classes: false;
$spacer: 1rem;
$border-width: 0;
$btn-border-radius: 0.25rem;

$card-border-color: rgba($black, 0.0625);
$card-spacer-x: 3rem;

/* ================= */
// ABSTRACTS: VARIABLES LIGHT
/* ================= */

html,
html[data-theme="light"] {
  --light-text-color: hsl(0, 0%, 35%);
  --main-background-color: hsl(0, 5%, 95%);
  --main-text-color: hsl(0, 0%, 0%);
}

/* ================= */
// ABSTRACTS: VARIABLES DARK
/* ================= */

html[data-theme="dark"] {
  --light-text-color: hsl(0, 0%, 60%);
  --main-background-color: hsl(0, 0%, 10%);
  --main-text-color: hsl(0, 10%, 80%);
}

@media (prefers-color-scheme: dark) {
  html {
    content: "dark";
  }
}