/* COLORS */
$color-primary-50: #effef4;
$color-primary-100: #d9ffe6;
$color-primary-200: #b6fccf;
$color-primary-300: #7df8ab;
$color-primary-400: #3eea7e;
$color-primary-500: #0aa544;
$color-primary-600: #0c893c;
$color-primary-700: #106b32;
$color-primary-800: #0f582c;
$color-primary-900: #023115;
$color-primary-950: #012711;
$color-primary-opacity-25: rgba($color-primary-500, 0.25);

$color-secondary-50: #fbf6fd;
$color-secondary-100: #f7edfa;
$color-secondary-200: #efdaf4;
$color-secondary-300: #e2bdea;
$color-secondary-400: #d296dc;
$color-secondary-500: #ba68c8;
$color-secondary-600: #a14dac;
$color-secondary-700: #863d8e;
$color-secondary-800: #6f3375;
$color-secondary-900: #5d2e61;
$color-secondary-950: #3a143e;
$color-secondary-opacity-25: rgba($color-secondary-500, 0.25);

$color-danger-50: #fef2f2;
$color-danger-100: #fee6e5;
$color-danger-200: #fccfcf;
$color-danger-300: #f9a8a8;
$color-danger-400: #f57779;
$color-danger-500: #ec474f;
$color-danger-600: #dc3545;
$color-danger-700: #b7192c;
$color-danger-800: #99182c;
$color-danger-900: #83182c;
$color-danger-950: #490812;
$color-danger-opacity-25: rgba($color-danger-500, 0.25);

$color-success-50: #f0fdf6;
$color-success-100: #ddfbec;
$color-success-200: #bcf6d9;
$color-success-300: #88edbd;
$color-success-400: #4ddb98;
$color-success-500: #25c279;
$color-success-600: #19a061;
$color-success-700: #198754;
$color-success-800: #186340;
$color-success-900: #155237;
$color-success-950: #062d1c;
$color-success-opacity-25: rgba($color-success-500, 0.25);

$color-warning-50: #fefce8;
$color-warning-100: #fff9c2;
$color-warning-200: #fff089;
$color-warning-300: #ffdd38;
$color-warning-400: #fdcb12;
$color-warning-500: #ecb106;
$color-warning-600: #cc8902;
$color-warning-700: #a36005;
$color-warning-800: #864c0d;
$color-warning-900: #723e11;
$color-warning-950: #431f05;
$color-warning-opacity-25: rgba($color-warning-500, 0.25);

$color-gray-50: #f6f6f6;
$color-gray-100: #e7e7e7;
$color-gray-200: #d1d1d1;
$color-gray-300: #b0b0b0;
$color-gray-400: #888888;
$color-gray-500: #6d6d6d;
$color-gray-600: #5d5d5d;
$color-gray-700: #4f4f4f;
$color-gray-800: #454545;
$color-gray-900: #3d3d3d;
$color-gray-950: #222222;

$color-white: #ffffff;
$color-white-25: rgba($color-white, 0.25);

/* BORDER RADIUS */
$border-radius: 4px !default;
$border-radius-medium: 8px !default;
$border-radius-large: 12px !default;
$border-radius-xlarge: 16px !default;
$border-radius-circle: 50% !default;
$border-radius-pill: 300px !default;

/* SPACING */
$spacing-xxsmall: 4px;
$spacing-xsmall: 8px;
$spacing-small: 12px;
$spacing-base: 16px;
$spacing-medium: 20px;
$spacing-large: 24px;
$spacing-xlarge: 28px;
$spacing-xxlarge: 32px;
$spacing-xxxlarge: 40px;
$spacing-xxxxlarge: 48px;
$spacing-giant: 64px;
$spacing-xgiant: 80px;

/* TYPOGRAPHY */
$font-family: 'Ubuntu', sans-serif;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

$font-size-base: 1rem;
$font-size-small: 0.825 * $font-size-base;
$font-size-h6: $font-size-base;
$font-size-h5: 1.25 * $font-size-base;
$font-size-h4: 1.5 * $font-size-base;
$font-size-h3: 1.75 * $font-size-base;
$font-size-h2: 2 * $font-size-base;
$font-size-h1: 2.5 * $font-size-base;

$line-height-base: 1.2;
$line-height-headings: $line-height-base;

:root,
::backdrop {
  --border-radius: #{$border-radius};
  --border-radius-medium: #{$border-radius-medium};
  --border-radius-large: #{$border-radius-large};
  --border-radius-xlarge: #{$border-radius-xlarge};
  --border-radius-circle: #{$border-radius-circle};
  --border-radius-pill: #{$border-radius-pill};

  --spacing-xxsmall: #{$spacing-xxsmall};
  --spacing-xsmall: #{$spacing-xsmall};
  --spacing-small: #{$spacing-small};
  --spacing-base: #{$spacing-base};
  --spacing-medium: #{$spacing-medium};
  --spacing-large: #{$spacing-large};
  --spacing-xlarge: #{$spacing-xlarge};
  --spacing-xxlarge: #{$spacing-xxlarge};
  --spacing-xxxlarge: #{$spacing-xxxlarge};
  --spacing-xxxxlarge: #{$spacing-xxxxlarge};
  --spacing-giant: #{$spacing-giant};
  --spacing-xgiant: #{$spacing-xgiant};

  --font-family: #{$font-family};
  --font-weight-light: #{$font-weight-light};
  --font-weight-regular: #{$font-weight-regular};
  --font-weight-medium: #{$font-weight-medium};
  --font-weight-bold: #{$font-weight-bold};

  --font-size-base: #{$font-size-base};
  --font-size-small: #{$font-size-small};
  --font-size-h6: #{$font-size-h6};
  --font-size-h5: #{$font-size-h5};
  --font-size-h4: #{$font-size-h4};
  --font-size-h3: #{$font-size-h3};
  --font-size-h2: #{$font-size-h2};
  --font-size-h1: #{$font-size-h1};

  --line-height-base: #{$line-height-base};
  --line-height-headings: #{$line-height-headings};

  --color-primary-50: #{$color-primary-50};
  --color-primary-100: #{$color-primary-100};
  --color-primary-200: #{$color-primary-200};
  --color-primary-300: #{$color-primary-300};
  --color-primary-400: #{$color-primary-400};
  --color-primary-500: #{$color-primary-500};
  --color-primary-600: #{$color-primary-600};
  --color-primary-700: #{$color-primary-700};
  --color-primary-800: #{$color-primary-800};
  --color-primary-900: #{$color-primary-900};
  --color-primary-950: #{$color-primary-950};
  --color-primary-opacity-25: #{$color-primary-opacity-25};

  --color-secondary-50: #{$color-secondary-50};
  --color-secondary-100: #{$color-secondary-100};
  --color-secondary-200: #{$color-secondary-200};
  --color-secondary-300: #{$color-secondary-300};
  --color-secondary-400: #{$color-secondary-400};
  --color-secondary-500: #{$color-secondary-500};
  --color-secondary-600: #{$color-secondary-600};
  --color-secondary-700: #{$color-secondary-700};
  --color-secondary-800: #{$color-secondary-800};
  --color-secondary-900: #{$color-secondary-900};
  --color-secondary-950: #{$color-secondary-950};
  --color-secondary-opacity-25: #{$color-secondary-opacity-25};

  --color-danger-50: #{$color-danger-50};
  --color-danger-100: #{$color-danger-100};
  --color-danger-200: #{$color-danger-200};
  --color-danger-300: #{$color-danger-300};
  --color-danger-400: #{$color-danger-400};
  --color-danger-500: #{$color-danger-500};
  --color-danger-600: #{$color-danger-600};
  --color-danger-700: #{$color-danger-700};
  --color-danger-800: #{$color-danger-800};
  --color-danger-900: #{$color-danger-900};
  --color-danger-950: #{$color-danger-950};
  --color-danger-opacity-25: #{$color-danger-opacity-25};

  --color-success-50: #{$color-success-50};
  --color-success-100: #{$color-success-100};
  --color-success-200: #{$color-success-200};
  --color-success-300: #{$color-success-300};
  --color-success-400: #{$color-success-400};
  --color-success-500: #{$color-success-500};
  --color-success-600: #{$color-success-600};
  --color-success-700: #{$color-success-700};
  --color-success-800: #{$color-success-800};
  --color-success-900: #{$color-success-900};
  --color-success-950: #{$color-success-950};
  --color-success-opacity-25: #{$color-success-opacity-25};

  --color-warning-50: #{$color-warning-50};
  --color-warning-100: #{$color-warning-100};
  --color-warning-200: #{$color-warning-200};
  --color-warning-300: #{$color-warning-300};
  --color-warning-400: #{$color-warning-400};
  --color-warning-500: #{$color-warning-500};
  --color-warning-600: #{$color-warning-600};
  --color-warning-700: #{$color-warning-700};
  --color-warning-800: #{$color-warning-800};
  --color-warning-900: #{$color-warning-900};
  --color-warning-950: #{$color-warning-950};
  --color-warning-opacity-25: #{$color-warning-opacity-25};

  --color-white: #{$color-white};
  --color-white-25: #{$color-white-25};

  --color-gray-50: #{$color-gray-50};
  --color-gray-100: #{$color-gray-100};
  --color-gray-200: #{$color-gray-200};
  --color-gray-300: #{$color-gray-300};
  --color-gray-400: #{$color-gray-400};
  --color-gray-500: #{$color-gray-500};
  --color-gray-600: #{$color-gray-600};
  --color-gray-700: #{$color-gray-700};
  --color-gray-800: #{$color-gray-800};
  --color-gray-900: #{$color-gray-900};
  --color-gray-950: #{$color-gray-950};

  --text-color: var(--color-gray-950);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-family);
  color: var(--text-color);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-headings);
}

.h1 {
  font-size: var(--font-size-h1);
}

.h2 {
  font-size: var(--font-size-h2);
}

.h3 {
  font-size: var(--font-size-h3);
}

.h4 {
  font-size: var(--font-size-h4);
}

.h5 {
  font-size: var(--font-size-h5);
}

.h6 {
  font-size: var(--font-size-h6);
}

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}