// Couleurs du nuancier Captive
// https://www.notion.so/Nuanciers-Captive-pour-le-web-et-mobile-ee189f2db6e543e6bc7cba77c9e8dff5
$white: #fff !default;
$blue-grey-900: #102a43 !default;
$blue-grey-800: #243b53 !default;
$blue-grey-700: #334e68 !default;
$blue-grey-600: #486581 !default;
$blue-grey-500: #5e7997 !default;
$blue-grey-200: #bcccdc !default;
$blue-grey-100: #d9e2ec !default;
$blue-grey-050: #f5f7fa !default;
$pink-vivid-500: #d9127c !default;
$pink-vivid-400: #e8368f !default;
$pink-vivid-050: #fff5f8 !default;
$light-blue-vivid-700: #1177b6 !default;
$light-blue-vivid-600: #188dcd !default;
$light-blue-vivid-050: #f0fbff !default;
$lime-green-700: #507712 !default;
$lime-green-600: #63921a !default;
$lime-green-050: #f2fde0 !default;
$red-vivid-600: #cf1124 !default;
$red-vivid-500: #e12d39 !default;
$red-vivid-050: #fff0f0 !default;
$yellow-vivid-800: #b44d12 !default;
$yellow-vivid-700: #cb6e17 !default;
$yellow-vivid-050: #fffbea !default;
$purple-700: #421987 !default;
$purple-500: #653cad !default;
$purple-050: #eae2f8 !default;

// Couleurs du Design System Captive
// https://www.notion.so/captive/UI-Les-couleurs-du-design-system-Captive-eed4bbb0295f4d949c47e183033e5180

$fg-default: $blue-grey-900 !default;
$fg-muted: $blue-grey-600 !default;
$fg-subtle: $blue-grey-500 !default;
$fg-on-emphasis: $white !default;
$bg-default: $white !default;
$bg-subtle: $blue-grey-050 !default;
$bg-emphasis: $blue-grey-900 !default;
$primary-fg: $pink-vivid-500 !default;
$primary-emphasis: $pink-vivid-500 !default;
$primary-muted: $pink-vivid-400 !default;
$primary-subtle: $pink-vivid-050 !default;
$primary-on-emphasis: $white !default;
$accent-fg: $light-blue-vivid-700 !default;
$accent-emphasis: $light-blue-vivid-700 !default;
$accent-muted: $light-blue-vivid-600 !default;
$accent-subtle: $light-blue-vivid-050 !default;
$success-fg: $lime-green-700 !default;
$success-emphasis: $lime-green-700 !default;
$success-muted: $lime-green-600 !default;
$success-subtle: $lime-green-050 !default;
$attention-fg: $yellow-vivid-800 !default;
$attention-emphasis: $yellow-vivid-800 !default;
$attention-muted: $yellow-vivid-700 !default;
$attention-subtle: $yellow-vivid-050 !default;
$danger-fg: $red-vivid-600 !default;
$danger-emphasis: $red-vivid-600 !default;
$danger-muted: $red-vivid-500 !default;
$danger-subtle: $red-vivid-050 !default;
$support-fg: $purple-700 !default;
$support-emphasis: $purple-700 !default;
$support-muted: $purple-500 !default;
$support-subtle: $purple-050 !default;
$border-color: $blue-grey-200 !default;
$border-color-emphasis: $blue-grey-900 !default;

// Espacements
// Cf https://www.notion.so/captive/UI-Espacement-du-Design-System-Captive-cc192b02b57d453fa0da9fdc6d1234c2
$spacer-0: 0 !default;
$spacer-1: 4px !default;
$spacer-2: 8px !default;
$spacer-3: 12px !default;
$spacer-4: 16px !default;
$spacer-5: 24px !default;
$spacer-6: 32px !default;
$spacer-7: 48px !default;
$spacer-8: 64px !default;
$spacer-9: 96px !default;
$spacer-10: 128px !default;
$spacer-11: 192px !default;
$spacer-12: 256px !default;

// Fonts
// https://www.notion.so/captive/Typographie-Captive-85c60f5a849f4adaacaf18cc4aff2cea
/* stylelint-disable-next-line import-notation */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Barlow:wght@400;600&display=swap');

$default-font-family:
  'Open Sans',
  -apple-system,
  segoe ui,
  roboto,
  noto sans,
  ubuntu,
  cantarell,
  helvetica neue !default;
$title-font-family:
  'Barlow',
  -apple-system,
  segoe ui,
  roboto,
  noto sans,
  ubuntu,
  cantarell,
  helvetica neue !default;

// Fonts sizes
// Body
$f1: 24px;
$f2: 20px;
$f3: 18px;
$f4: 16px;
$f5: 14px;
$f6: 12px;

// Headers
$h1: 30px;

// Shadows
$shadow-xs:
  0 1px 3px rgba(0, 0, 0, 0.12),
  0 1px 2px rgba(0, 0, 0, 0.24);
$shadow-s:
  0 3px 6px rgba(0, 0, 0, 0.15),
  0 2px 4px rgba(0, 0, 0, 0.12);
$shadow-m:
  0 10px 20px rgba(0, 0, 0, 0.15),
  0 3px 6px rgba(0, 0, 0, 0.1);
$shadow-l:
  0 15px 25px rgba(0, 0, 0, 0.15),
  0 5px 10px rgba(0, 0, 0, 0.5);
$shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

// radius
$border-radius-s: 12px !default;