:root {
  /* ====== Colors ====== */
  /* --- primary ---      */
  --bp-primary-100: #379eff;
  --bp-primary-200: #0e8bff;
  --bp-primary-300: #0076e5;
  --bp-primary-400: #0061bc;
  --bp-primary-500: #004c93;
  --bp-primary-600: #002f5b;
  --bp-primary-700: #001223;
  /* --- secondary ---    */
  --bp-secondary-100: #f9fbfe;
  --bp-secondary-200: #d7e7f6;
  --bp-secondary-300: #b6d3ef;
  --bp-secondary-400: #94bfe7;
  --bp-secondary-500: #73abe0;
  --bp-secondary-600: #458fd6;
  --bp-secondary-700: #2973ba;
  /* --- font ---         */
  --bp-font-100: #969696;
  --bp-font-200: #818181;
  --bp-font-300: #6d6d6d;
  --bp-font-400: #585858;
  --bp-font-500: #444444;
  --bp-font-600: #282828;
  --bp-font-700: #0c0c0c;
  --bp-font-800: #000000;
  /* --- success ---      */
  --bp-success-100: #b9ebc1;
  --bp-success-200: #99e2a4;
  --bp-success-300: #7ad988;
  --bp-success-400: #5ad06b;
  --bp-success-500: #3ac74f;
  --bp-success-600: #2c9c3d;
  /* --- error ---        */
  --bp-error-100: #e9aaaa;
  --bp-error-200: #e08a8a;
  --bp-error-300: #d86a6a;
  --bp-error-400: #cf4a4a;
  --bp-error-500: #be3232;
  --bp-error-600: #922626;
  /* --- gray ---         */
  --bp-gray-100: #f3f4f6;
  --bp-gray-200: #e5e7eb;
  --bp-gray-300: #d1d5db;
  --bp-gray-400: #9ca3af;
  --bp-gray-500: #6b7280;
  --bp-gray-600: #4b5563;
  --bp-gray-700: #374151;
  --bp-gray-800: #1f2937;
  /* --- scaffold ---     */
  --bp-scaffold-400: #ffffff;
  --bp-scaffold-500: #f3f4f6;
  --bp-scaffold-600: #d3d7de;

  /* ===== Spacings ===== */
  --bp-spacing-050: 4px;
  --bp-spacing-100: 8px;
  --bp-spacing-150: 12px;
  --bp-spacing-200: 16px;
  --bp-spacing-300: 24px;
  --bp-spacing-400: 32px;
  --bp-spacing-500: 40px;
  --bp-spacing-600: 56px;
  --bp-spacing-700: 80px;
  --bp-spacing-800: 120px;
  --bp-spacing-900: 160px;
  --bp-spacing-950: 200px;

  /* ===== Viewports ==== */
  --bp-view-tablet: 767px;
  --bp-view-tablet-offset: calc(var(--bp-view-tablet) + 1px);
  --bp-view-desktop: 1024px;
  --bp-view-desktop-offset: calc(var(--bp-view-desktop) + 1px);
}

/* ===== Spacings ==== */

.bp__pl-sm {
  padding-left: var(--bp-spacing-100);
}

.bp__pl-md {
  padding-left: var(--bp-spacing-200);
}

.bp__pl-lg {
  padding-left: var(--bp-spacing-300);
}

.bp__pr-sm {
  padding-right: var(--bp-spacing-100);
}

.bp__pr-md {
  padding-right: var(--bp-spacing-200);
}

.bp__pr-lg {
  padding-right: var(--bp-spacing-300);
}

.bp__px-sm {
  padding-left: var(--bp-spacing-100);
  padding-right: var(--bp-spacing-100);
}

.bp__px-md {
  padding-left: var(--bp-spacing-200);
  padding-right: var(--bp-spacing-200);
}

.bp__px-lg {
  padding-left: var(--bp-spacing-300);
  padding-right: var(--bp-spacing-300);
}

.bp__py-sm {
  padding-top: var(--bp-spacing-100);
  padding-bottom: var(--bp-spacing-100);
}

.bp__py-md {
  padding-top: var(--bp-spacing-200);
  padding-bottom: var(--bp-spacing-200);
}

.bp__py-lg {
  padding-top: var(--bp-spacing-300);
  padding-bottom: var(--bp-spacing-300);
}

.bp__p-sm {
  padding: var(--bp-spacing-100);
}

.bp__p-md {
  padding: var(--bp-spacing-200);
}

.bp__p-lg {
  padding: var(--bp-spacing-300);
}

/* ===== Text ==== */

.bp__font-primary {
  color: var(--bp-primary-500);
}

.bp__font-primary-400 {
  color: var(--bp-primary-400);
}