/* Generated from src/styles/tokens/ by `npm run generate:tokens`. Do not edit. */

@layer blueprint.reset, blueprint.tokens, blueprint.components;

@layer blueprint.tokens {
  :root,
  [data-theme='light'],
  [data-theme='auto'] {
    color-scheme: light;
    /* Text */
    --bp-text-primary: #262626;
    --bp-text-secondary: #757575;
    --bp-text-accent: #e52a00;
    --bp-text-error: #d70025;
    --bp-text-link: #0033cc;
    --bp-text-link-button: #007ac9;
    /* Surfaces */
    --bp-surface-1: #ffffff;
    --bp-surface-2: #ffffff;
    --bp-surface-3: #ffffff;
    --bp-surface-4: #ffffff;
    --bp-surface-5: #ffffff;
    /* Borders */
    --bp-border-default: #cccccc;
    /* The outer ring of a focus indicator */
    --bp-focus-ring: #0f3777;
    /* The inner ring, between the element and the outer ring */
    --bp-focus-ring-inner: #ffffff;
    /* The fill of a checked checkbox or radio button (accent-color) */
    --bp-control-accent: #00890d;
    /* Skeleton */
    --bp-skeleton-base: #ececec;
    --bp-skeleton-highlight: #f8f8f8;
    /* Components */
    --bp-topnav-background: #ff520e;
    /* Tints: 0% takes a tint's light value, 100% its dark value */
    --bp-tint-dark: 0%;
    --bp-shadow-raised-subtle: 0px 0px 1px rgba(0, 42, 88, 0.08), 0px 1px 2px rgba(0, 42, 88, 0.08);
    --bp-shadow-raised:
      0px 0px 2px rgba(0, 42, 88, 0.08), 0px 1px 4px rgba(0, 42, 88, 0.08),
      0px 2px 8px rgba(0, 42, 88, 0.08);
    --bp-shadow-floating:
      0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 6px 10px 1px rgba(0, 0, 0, 0.14),
      0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    --bp-shadow-overlay: 0px 4px 10px rgba(0, 0, 0, 0.3);
    --bp-shadow-inset:
      inset 0px 0px 2px rgba(0, 42, 88, 0.08), inset 0px 1px 4px rgba(0, 42, 88, 0.08),
      inset 0px 2px 8px rgba(0, 42, 88, 0.08);
  }

  :root {
    /* Font family */
    --bp-font-family-sans: 'Open Sans', 'Helvetica Neue', helvetica, sans-serif;
    --bp-font-family-mono: ui-monospace, Menlo, Consolas, monospace;
    /* Font weight; Open Sans is loaded in 300, 400, 600 and 700 only, so there is no medium */
    --bp-font-weight-regular: 400;
    --bp-font-weight-semibold: 600;
    --bp-font-weight-bold: 700;
    /* Line height, unitless: tight for large headings, normal for everything else */
    --bp-font-line-height-tight: 1.25;
    --bp-font-line-height-normal: 1.4;
    /* Headings */
    --bp-font-heading-l-size: 2.166667rem;
    --bp-font-heading-l-line-height: var(--bp-font-line-height-tight);
    --bp-font-heading-l-weight: var(--bp-font-weight-regular);
    --bp-font-heading-l-family: var(--bp-font-family-sans);
    --bp-font-heading-m-size: 1.666667rem;
    --bp-font-heading-m-line-height: var(--bp-font-line-height-tight);
    --bp-font-heading-m-weight: var(--bp-font-weight-semibold);
    --bp-font-heading-m-family: var(--bp-font-family-sans);
    --bp-font-heading-s-size: 1.333333rem;
    --bp-font-heading-s-line-height: var(--bp-font-line-height-normal);
    --bp-font-heading-s-weight: var(--bp-font-weight-semibold);
    --bp-font-heading-s-family: var(--bp-font-family-sans);
    --bp-font-heading-xs-size: 1.166667rem;
    --bp-font-heading-xs-line-height: var(--bp-font-line-height-normal);
    --bp-font-heading-xs-weight: var(--bp-font-weight-regular);
    --bp-font-heading-xs-family: var(--bp-font-family-sans);
    --bp-font-heading-l: var(--bp-font-heading-l-weight) var(--bp-font-heading-l-size) /
      var(--bp-font-heading-l-line-height) var(--bp-font-heading-l-family);
    --bp-font-heading-m: var(--bp-font-heading-m-weight) var(--bp-font-heading-m-size) /
      var(--bp-font-heading-m-line-height) var(--bp-font-heading-m-family);
    --bp-font-heading-s: var(--bp-font-heading-s-weight) var(--bp-font-heading-s-size) /
      var(--bp-font-heading-s-line-height) var(--bp-font-heading-s-family);
    --bp-font-heading-xs: var(--bp-font-heading-xs-weight) var(--bp-font-heading-xs-size) /
      var(--bp-font-heading-xs-line-height) var(--bp-font-heading-xs-family);
    /* Body text */
    --bp-font-body-l-size: 1.333333rem;
    --bp-font-body-l-line-height: var(--bp-font-line-height-normal);
    --bp-font-body-l-weight: var(--bp-font-weight-regular);
    --bp-font-body-l-family: var(--bp-font-family-sans);
    --bp-font-body-m-size: 1.083333rem;
    --bp-font-body-m-line-height: var(--bp-font-line-height-normal);
    --bp-font-body-m-weight: var(--bp-font-weight-regular);
    --bp-font-body-m-family: var(--bp-font-family-sans);
    --bp-font-body-s-size: 0.916667rem;
    --bp-font-body-s-line-height: var(--bp-font-line-height-normal);
    --bp-font-body-s-weight: var(--bp-font-weight-regular);
    --bp-font-body-s-family: var(--bp-font-family-sans);
    --bp-font-body-l: var(--bp-font-body-l-weight) var(--bp-font-body-l-size) /
      var(--bp-font-body-l-line-height) var(--bp-font-body-l-family);
    --bp-font-body-m: var(--bp-font-body-m-weight) var(--bp-font-body-m-size) /
      var(--bp-font-body-m-line-height) var(--bp-font-body-m-family);
    --bp-font-body-s: var(--bp-font-body-s-weight) var(--bp-font-body-s-size) /
      var(--bp-font-body-s-line-height) var(--bp-font-body-s-family);
    /* Small caps above a heading; set text-transform: uppercase yourself */
    --bp-font-overline-size: 1rem;
    --bp-font-overline-line-height: var(--bp-font-line-height-normal);
    --bp-font-overline-weight: var(--bp-font-weight-regular);
    --bp-font-overline-family: var(--bp-font-family-sans);
    --bp-font-overline: var(--bp-font-overline-weight) var(--bp-font-overline-size) /
      var(--bp-font-overline-line-height) var(--bp-font-overline-family);
    /* Code */
    --bp-font-code-size: 1.083333rem;
    --bp-font-code-line-height: var(--bp-font-line-height-normal);
    --bp-font-code-weight: var(--bp-font-weight-regular);
    --bp-font-code-family: var(--bp-font-family-mono);
    --bp-font-code: var(--bp-font-code-weight) var(--bp-font-code-size) /
      var(--bp-font-code-line-height) var(--bp-font-code-family);
    /* Spacing */
    --bp-space-100: 0.333333rem;
    --bp-space-200: 0.666667rem;
    --bp-space-250: 0.833333rem;
    --bp-space-300: 1rem;
    --bp-space-350: 1.166667rem;
    --bp-space-400: 1.333333rem;
    --bp-space-600: 2rem;
    --bp-space-800: 2.666667rem;
    --bp-space-1200: 4rem;
    --bp-space-1600: 5.333333rem;
    /* Border radius */
    --bp-radius-100: 0.333333rem;
    --bp-radius-150: 0.5rem;
    --bp-radius-200: 0.666667rem;
    --bp-radius-300: 1rem;
    --bp-radius-full: 833.25rem;
    /* Animation duration; there is room for a medium (200ms) in between */
    --bp-duration-short: 150ms;
    --bp-duration-long: 250ms;
    /* Opacity */
    --bp-opacity-disabled: 0.45;
    --bp-color-aqua-900: #002b39;
    --bp-color-aqua-800: #004154;
    --bp-color-aqua-700: #005872;
    --bp-color-aqua-600: #006e8c;
    --bp-color-aqua-500: #007fa1;
    --bp-color-aqua-400: #00add0;
    --bp-color-aqua-300: #6ed4f0;
    --bp-color-aqua-200: #a7e4f5;
    --bp-color-aqua-100: #e4f7fc;
    --bp-color-beach-900: #332514;
    --bp-color-beach-800: #66512c;
    --bp-color-beach-700: #8a733b;
    --bp-color-beach-600: #ceb66f;
    --bp-color-beach-500: #f7e594;
    --bp-color-beach-400: #fbecaa;
    --bp-color-beach-300: #fdf2c1;
    --bp-color-beach-200: #fff8da;
    --bp-color-beach-100: #fffdf3;
    --bp-color-black-900: #141414;
    --bp-color-black-800: #181818;
    --bp-color-black-700: #1d1d1d;
    --bp-color-black-600: #222222;
    --bp-color-black-500: #272727;
    --bp-color-black-400: #585858;
    --bp-color-black-300: #757575;
    --bp-color-black-200: #b9b9b9;
    --bp-color-black-100: #e9e9e9;
    --bp-color-blue-900: #002846;
    --bp-color-blue-800: #003d69;
    --bp-color-blue-700: #00528c;
    --bp-color-blue-600: #0066ac;
    --bp-color-blue-500: #007ac9;
    --bp-color-blue-400: #3ea3ec;
    --bp-color-blue-300: #88ccff;
    --bp-color-blue-200: #b3dfff;
    --bp-color-blue-100: #e7f6ff;
    --bp-color-brown-900: #3a1f01;
    --bp-color-brown-800: #582f02;
    --bp-color-brown-700: #764003;
    --bp-color-brown-600: #915104;
    --bp-color-brown-500: #ad620a;
    --bp-color-brown-400: #ca8d4a;
    --bp-color-brown-300: #e8ba87;
    --bp-color-brown-200: #f0d4b4;
    --bp-color-brown-100: #fbf2e8;
    --bp-color-candy-900: #450735;
    --bp-color-candy-800: #68054f;
    --bp-color-candy-700: #8b076b;
    --bp-color-candy-600: #aa0b84;
    --bp-color-candy-500: #ca159e;
    --bp-color-candy-400: #e85ec2;
    --bp-color-candy-300: #ff9ee3;
    --bp-color-candy-200: #ffc3ee;
    --bp-color-candy-100: #ffedfa;
    --bp-color-dolphin-900: #242630;
    --bp-color-dolphin-800: #363a48;
    --bp-color-dolphin-700: #4b4f61;
    --bp-color-dolphin-600: #5d6278;
    --bp-color-dolphin-500: #6f758e;
    --bp-color-dolphin-400: #959aaf;
    --bp-color-dolphin-300: #bfc3d2;
    --bp-color-dolphin-200: #d6d8e2;
    --bp-color-dolphin-100: #f2f3f6;
    --bp-color-dynamite-900: #490e01;
    --bp-color-dynamite-800: #6e1400;
    --bp-color-dynamite-700: #921d00;
    --bp-color-dynamite-600: #b42500;
    --bp-color-dynamite-500: #d53002;
    --bp-color-dynamite-400: #f46b49;
    --bp-color-dynamite-300: #ffab96;
    --bp-color-dynamite-200: #ffcbbf;
    --bp-color-dynamite-100: #ffefec;
    --bp-color-emerald-900: #002f22;
    --bp-color-emerald-800: #004635;
    --bp-color-emerald-700: #005f47;
    --bp-color-emerald-600: #007559;
    --bp-color-emerald-500: #008667;
    --bp-color-emerald-400: #36b395;
    --bp-color-emerald-300: #7ed7c2;
    --bp-color-emerald-200: #b0e6d9;
    --bp-color-emerald-100: #e7f8f3;
    --bp-color-grass-900: #384c09;
    --bp-color-grass-800: #527005;
    --bp-color-grass-700: #5d8100;
    --bp-color-grass-600: #94c625;
    --bp-color-grass-500: #b2eb31;
    --bp-color-grass-400: #c5f35c;
    --bp-color-grass-300: #d7f989;
    --bp-color-grass-200: #e8fdb8;
    --bp-color-grass-100: #f8ffe9;
    --bp-color-green-900: #003102;
    --bp-color-green-800: #004903;
    --bp-color-green-700: #006206;
    --bp-color-green-600: #007708;
    --bp-color-green-500: #00890d;
    --bp-color-green-400: #35b93c;
    --bp-color-green-300: #80dd81;
    --bp-color-green-200: #b1eab1;
    --bp-color-green-100: #e7f9e7;
    --bp-color-hazelnut-900: #342211;
    --bp-color-hazelnut-800: #4e341a;
    --bp-color-hazelnut-700: #694825;
    --bp-color-hazelnut-600: #825a2f;
    --bp-color-hazelnut-500: #9b6c3c;
    --bp-color-hazelnut-400: #ba936c;
    --bp-color-hazelnut-300: #dcbda1;
    --bp-color-hazelnut-200: #e8d5c3;
    --bp-color-hazelnut-100: #f8f2ec;
    --bp-color-heaven-900: #333c47;
    --bp-color-heaven-800: #525f70;
    --bp-color-heaven-700: #627389;
    --bp-color-heaven-600: #9bb0cc;
    --bp-color-heaven-500: #a9c1e0;
    --bp-color-heaven-400: #c2d5ee;
    --bp-color-heaven-300: #d3e1f4;
    --bp-color-heaven-200: #e4edf9;
    --bp-color-heaven-100: #f7fafd;
    --bp-color-jazz-900: #281a50;
    --bp-color-jazz-800: #3d2779;
    --bp-color-jazz-700: #5336a1;
    --bp-color-jazz-600: #6843c6;
    --bp-color-jazz-500: #7d53e9;
    --bp-color-jazz-400: #a381fc;
    --bp-color-jazz-300: #cab6ff;
    --bp-color-jazz-200: #ddd0ff;
    --bp-color-jazz-100: #f5f1ff;
    --bp-color-jeans-900: #0a244f;
    --bp-color-jeans-800: #0f3777;
    --bp-color-jeans-700: #164aa1;
    --bp-color-jeans-600: #1d5cc6;
    --bp-color-jeans-500: #266fe9;
    --bp-color-jeans-400: #5d99fe;
    --bp-color-jeans-300: #a2c5ff;
    --bp-color-jeans-200: #c3daff;
    --bp-color-jeans-100: #edf3ff;
    --bp-color-kiwi-900: #464909;
    --bp-color-kiwi-800: #6d7111;
    --bp-color-kiwi-700: #afb542;
    --bp-color-kiwi-600: #c0c635;
    --bp-color-kiwi-500: #d9e031;
    --bp-color-kiwi-400: #e5ea5c;
    --bp-color-kiwi-300: #eff389;
    --bp-color-kiwi-200: #f7f9b8;
    --bp-color-kiwi-100: #fdfee9;
    --bp-color-lavender-900: #3e0e40;
    --bp-color-lavender-800: #5d1360;
    --bp-color-lavender-700: #7c1c82;
    --bp-color-lavender-600: #9924a0;
    --bp-color-lavender-500: #b630bd;
    --bp-color-lavender-400: #d46adb;
    --bp-color-lavender-300: #f2a2f6;
    --bp-color-lavender-200: #f7c6f9;
    --bp-color-lavender-100: #fcedfd;
    --bp-color-lemon-900: #4d4d0b;
    --bp-color-lemon-800: #79791a;
    --bp-color-lemon-700: #b3b33f;
    --bp-color-lemon-600: #d2d24b;
    --bp-color-lemon-500: #fff36d;
    --bp-color-lemon-400: #fff887;
    --bp-color-lemon-300: #fffca3;
    --bp-color-lemon-200: #fffec0;
    --bp-color-lemon-100: #ffffdf;
    --bp-color-lipstick-900: #410017;
    --bp-color-lipstick-800: #650025;
    --bp-color-lipstick-700: #870033;
    --bp-color-lipstick-600: #a70041;
    --bp-color-lipstick-500: #c60450;
    --bp-color-lipstick-400: #d73977;
    --bp-color-lipstick-300: #fe89b4;
    --bp-color-lipstick-200: #f4afc8;
    --bp-color-lipstick-100: #fbe6ed;
    --bp-color-go-turquoise-900: #1c3c3a;
    --bp-color-go-turquoise-800: #2e5e5b;
    --bp-color-go-turquoise-700: #30716c;
    --bp-color-go-turquoise-600: #33827d;
    --bp-color-go-turquoise-500: #67c0ba;
    --bp-color-go-turquoise-400: #88d0cb;
    --bp-color-go-turquoise-300: #a9dfdb;
    --bp-color-go-turquoise-200: #cbedeb;
    --bp-color-go-turquoise-100: #effaf9;
    --bp-color-go-purple-900: #1a0920;
    --bp-color-go-purple-800: #290f32;
    --bp-color-go-purple-700: #371543;
    --bp-color-go-purple-600: #451c54;
    --bp-color-go-purple-500: #532464;
    --bp-color-go-purple-400: #7a5488;
    --bp-color-go-purple-300: #886d92;
    --bp-color-go-purple-200: #c8b6ce;
    --bp-color-go-purple-100: #eee9f0;
    --bp-color-mint-900: #164730;
    --bp-color-mint-800: #256f4b;
    --bp-color-mint-700: #1f8658;
    --bp-color-mint-600: #50c58b;
    --bp-color-mint-500: #50d997;
    --bp-color-mint-400: #7beab4;
    --bp-color-mint-300: #9ff2ca;
    --bp-color-mint-200: #c5f8e0;
    --bp-color-mint-100: #edfdf5;
    --bp-color-moss-900: #28280e;
    --bp-color-moss-800: #3d3d15;
    --bp-color-moss-700: #53531e;
    --bp-color-moss-600: #676727;
    --bp-color-moss-500: #7a792f;
    --bp-color-moss-400: #a09f64;
    --bp-color-moss-300: #c7c79a;
    --bp-color-moss-200: #dbdbbf;
    --bp-color-moss-100: #f4f4eb;
    --bp-color-night-900: #232438;
    --bp-color-night-800: #353855;
    --bp-color-night-700: #484c72;
    --bp-color-night-600: #5a5f8d;
    --bp-color-night-500: #6d72a7;
    --bp-color-night-400: #9397c4;
    --bp-color-night-300: #bec1e2;
    --bp-color-night-200: #d5d7eb;
    --bp-color-night-100: #f2f2f9;
    --bp-color-ocean-900: #1c4041;
    --bp-color-ocean-800: #2e6466;
    --bp-color-ocean-700: #377e81;
    --bp-color-ocean-600: #67bbbf;
    --bp-color-ocean-500: #6bced2;
    --bp-color-ocean-400: #8bdcdf;
    --bp-color-ocean-300: #ace8ea;
    --bp-color-ocean-200: #cdf3f5;
    --bp-color-ocean-100: #f2fefe;
    --bp-color-olive-900: #102f07;
    --bp-color-olive-800: #18460d;
    --bp-color-olive-700: #235f15;
    --bp-color-olive-600: #2b751a;
    --bp-color-olive-500: #31871c;
    --bp-color-olive-400: #6ab057;
    --bp-color-olive-300: #a0d591;
    --bp-color-olive-200: #c4e4ba;
    --bp-color-olive-100: #ecf7e9;
    --bp-color-orange-900: #4d2100;
    --bp-color-orange-800: #793400;
    --bp-color-orange-700: #9f4400;
    --bp-color-orange-600: #bf5100;
    --bp-color-orange-500: #ff9058;
    --bp-color-orange-400: #ffa970;
    --bp-color-orange-300: #ffc293;
    --bp-color-orange-200: #ffd9ba;
    --bp-color-orange-100: #fff0e6;
    --bp-color-pink-900: #49042a;
    --bp-color-pink-800: #6d003f;
    --bp-color-pink-700: #920053;
    --bp-color-pink-600: #b30067;
    --bp-color-pink-500: #d6007a;
    --bp-color-pink-400: #f853a8;
    --bp-color-pink-300: #ffa2d1;
    --bp-color-pink-200: #ffc5e3;
    --bp-color-pink-100: #ffedf7;
    --bp-color-purple-900: #301a44;
    --bp-color-purple-800: #482767;
    --bp-color-purple-700: #62378a;
    --bp-color-purple-600: #7945aa;
    --bp-color-purple-500: #9155c8;
    --bp-color-purple-400: #b281e1;
    --bp-color-purple-300: #d6b1f9;
    --bp-color-purple-200: #e5cefa;
    --bp-color-purple-100: #f7f0fe;
    --bp-color-red-900: #4f0201;
    --bp-color-red-800: #740000;
    --bp-color-red-700: #9a0000;
    --bp-color-red-600: #bc0000;
    --bp-color-red-500: #e00000;
    --bp-color-red-400: #ff5c54;
    --bp-color-red-300: #ffa9a5;
    --bp-color-red-200: #ffc9c9;
    --bp-color-red-100: #ffefef;
    --bp-color-sage-900: #22291c;
    --bp-color-sage-800: #343f29;
    --bp-color-sage-700: #48553a;
    --bp-color-sage-600: #5a6949;
    --bp-color-sage-500: #6a7b57;
    --bp-color-sage-400: #92a283;
    --bp-color-sage-300: #bdc8b1;
    --bp-color-sage-200: #d5dccd;
    --bp-color-sage-100: #f2f4f0;
    --bp-color-salmon-900: #4d251f;
    --bp-color-salmon-800: #793c32;
    --bp-color-salmon-700: #98483b;
    --bp-color-salmon-600: #b85547;
    --bp-color-salmon-500: #ff9281;
    --bp-color-salmon-400: #ffaa9d;
    --bp-color-salmon-300: #ffc3ba;
    --bp-color-salmon-200: #ffdbd5;
    --bp-color-salmon-100: #fff2f0;
    --bp-color-silver-900: #7c7c7c;
    --bp-color-silver-800: #9d9d9d;
    --bp-color-silver-700: #b7b7b7;
    --bp-color-silver-600: #c9c9c9;
    --bp-color-silver-500: #dddddd;
    --bp-color-silver-400: #e5e5e5;
    --bp-color-silver-300: #ececec;
    --bp-color-silver-200: #f4f4f4;
    --bp-color-silver-100: #f8f8f8;
    --bp-color-steel-900: #1d2831;
    --bp-color-steel-800: #2f3c4a;
    --bp-color-steel-700: #405264;
    --bp-color-steel-600: #536576;
    --bp-color-steel-500: #697786;
    --bp-color-steel-400: #919da9;
    --bp-color-steel-300: #bcc5ce;
    --bp-color-steel-200: #d4d9df;
    --bp-color-steel-100: #f1f3f4;
    --bp-color-tangerine-900: #4d2d00;
    --bp-color-tangerine-800: #794700;
    --bp-color-tangerine-700: #8f5300;
    --bp-color-tangerine-600: #ac6300;
    --bp-color-tangerine-500: #ff9827;
    --bp-color-tangerine-400: #ffb14a;
    --bp-color-tangerine-300: #ffc97e;
    --bp-color-tangerine-200: #ffdfb1;
    --bp-color-tangerine-100: #fff5e6;
    --bp-color-violet-900: #211a58;
    --bp-color-violet-800: #312785;
    --bp-color-violet-700: #4235b3;
    --bp-color-violet-600: #5441dd;
    --bp-color-violet-500: #6554ff;
    --bp-color-violet-400: #9388ff;
    --bp-color-violet-300: #c1baff;
    --bp-color-violet-200: #d8d2ff;
    --bp-color-violet-100: #f3f1ff;
    --bp-color-vrt-leer-mee-900: #02050c;
    --bp-color-vrt-leer-mee-800: #040918;
    --bp-color-vrt-leer-mee-700: #070e25;
    --bp-color-vrt-leer-mee-600: #091231;
    --bp-color-vrt-leer-mee-500: #0b173d;
    --bp-color-vrt-leer-mee-400: #3d476e;
    --bp-color-vrt-leer-mee-300: #73789b;
    --bp-color-vrt-leer-mee-200: #acadc6;
    --bp-color-vrt-leer-mee-100: #e6e6ee;
    --bp-color-watermelon-900: #4e0114;
    --bp-color-watermelon-800: #72001d;
    --bp-color-watermelon-700: #980027;
    --bp-color-watermelon-600: #ba0032;
    --bp-color-watermelon-500: #de003e;
    --bp-color-watermelon-400: #ff5679;
    --bp-color-watermelon-300: #ffa6b8;
    --bp-color-watermelon-200: #ffc8d4;
    --bp-color-watermelon-100: #ffeef2;
    --bp-color-yellow-900: #4d4409;
    --bp-color-yellow-800: #796a10;
    --bp-color-yellow-700: #c6ad43;
    --bp-color-yellow-600: #dcbc33;
    --bp-color-yellow-500: #ffd531;
    --bp-color-yellow-400: #ffe15b;
    --bp-color-yellow-300: #ffeb88;
    --bp-color-yellow-200: #fff4b7;
    --bp-color-yellow-100: #fffce8;
  }

  [data-theme='dark'] {
    color-scheme: dark;
    /* Text */
    --bp-text-primary: #d5d7eb;
    --bp-text-secondary: #9ca0cd;
    --bp-text-accent: #ff9058;
    --bp-text-error: #ff0f0f;
    --bp-text-link: #ff8829;
    --bp-text-link-button: #88ccff;
    /* Surfaces */
    --bp-surface-1: #161725;
    --bp-surface-2: #25273b;
    --bp-surface-3: #3b3e5c;
    --bp-surface-4: #696e9d;
    --bp-surface-5: #d5d7eb;
    /* Borders */
    --bp-border-default: #696e9d;
    /* The outer ring of a focus indicator */
    --bp-focus-ring: #c3daff;
    /* The inner ring, between the element and the outer ring */
    --bp-focus-ring-inner: #161725;
    /* The fill of a checked checkbox or radio button (accent-color) */
    --bp-control-accent: #3bd63d;
    /* Skeleton */
    --bp-skeleton-base: #25273b;
    --bp-skeleton-highlight: #3b3e5c;
    /* Components */
    --bp-topnav-background: #25273b;
    /* Tints: 0% takes a tint's light value, 100% its dark value */
    --bp-tint-dark: 100%;
    --bp-shadow-raised-subtle:
      0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
      0px 1px 1px rgba(0, 0, 0, 0.32), 0px 2px 2px rgba(0, 0, 0, 0.32);
    --bp-shadow-raised:
      0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
      0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
      0px 8px 8px rgba(0, 0, 0, 0.32);
    --bp-shadow-floating:
      0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
      0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
      0px 8px 8px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.32),
      0px 1px 4px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.32);
    --bp-shadow-overlay:
      0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
      0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
      0px 8px 8px rgba(0, 0, 0, 0.32), 0px 16px 16px rgba(0, 0, 0, 0.32),
      0px 32px 32px rgba(0, 0, 0, 0.32);
    --bp-shadow-inset:
      inset 0px 0px 2px rgba(0, 0, 0, 0.32), inset 0px 1px 4px rgba(0, 0, 0, 0.32),
      inset 0px 2px 8px rgba(0, 0, 0, 0.32);
  }

  /* `auto` follows the OS. It sets the light values too, so it also works inside a dark subtree. */

  [data-theme='auto'] {
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    [data-theme='auto'] {
      /* Text */
      --bp-text-primary: #d5d7eb;
      --bp-text-secondary: #9ca0cd;
      --bp-text-accent: #ff9058;
      --bp-text-error: #ff0f0f;
      --bp-text-link: #ff8829;
      --bp-text-link-button: #88ccff;
      /* Surfaces */
      --bp-surface-1: #161725;
      --bp-surface-2: #25273b;
      --bp-surface-3: #3b3e5c;
      --bp-surface-4: #696e9d;
      --bp-surface-5: #d5d7eb;
      /* Borders */
      --bp-border-default: #696e9d;
      /* The outer ring of a focus indicator */
      --bp-focus-ring: #c3daff;
      /* The inner ring, between the element and the outer ring */
      --bp-focus-ring-inner: #161725;
      /* The fill of a checked checkbox or radio button (accent-color) */
      --bp-control-accent: #3bd63d;
      /* Skeleton */
      --bp-skeleton-base: #25273b;
      --bp-skeleton-highlight: #3b3e5c;
      /* Components */
      --bp-topnav-background: #25273b;
      /* Tints: 0% takes a tint's light value, 100% its dark value */
      --bp-tint-dark: 100%;
      --bp-shadow-raised-subtle:
        0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
        0px 1px 1px rgba(0, 0, 0, 0.32), 0px 2px 2px rgba(0, 0, 0, 0.32);
      --bp-shadow-raised:
        0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
        0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
        0px 8px 8px rgba(0, 0, 0, 0.32);
      --bp-shadow-floating:
        0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
        0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
        0px 8px 8px rgba(0, 0, 0, 0.32), 0px 0px 2px rgba(0, 0, 0, 0.32),
        0px 1px 4px rgba(0, 0, 0, 0.32), 0px 2px 8px rgba(0, 0, 0, 0.32);
      --bp-shadow-overlay:
        0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.32),
        0px 2px 2px rgba(0, 0, 0, 0.32), 0px 4px 4px rgba(0, 0, 0, 0.32),
        0px 8px 8px rgba(0, 0, 0, 0.32), 0px 16px 16px rgba(0, 0, 0, 0.32),
        0px 32px 32px rgba(0, 0, 0, 0.32);
      --bp-shadow-inset:
        inset 0px 0px 2px rgba(0, 0, 0, 0.32), inset 0px 1px 4px rgba(0, 0, 0, 0.32),
        inset 0px 2px 8px rgba(0, 0, 0, 0.32);
    }
  }

  /* The focus ring goes inside the element, for one in a clipping container. Custom properties inherit, so the attribute also works on that container. The ring itself reads these with the outset values as fallback. */

  [data-focus-ring='inset'] {
    --bp-focus-ring-offset: -2px;
    --bp-focus-ring-spread: 4px;
    --bp-focus-ring-inset: inset;
  }

  /* Motion that uses the duration tokens stops when the user asks for less of it. */

  @media (prefers-reduced-motion: reduce) {
    :root {
      --bp-duration-short: 0ms;
      --bp-duration-long: 0ms;
    }
  }

  /* Colors: the ramp of one palette color */

  .bp-color-aqua {
    --bp-color-100: #e4f7fc;
    --bp-color-200: #a7e4f5;
    --bp-color-300: #6ed4f0;
    --bp-color-400: #00add0;
    --bp-color-500: #007fa1;
    --bp-color-600: #006e8c;
    --bp-color-700: #005872;
    --bp-color-800: #004154;
    --bp-color-900: #002b39;
  }

  .bp-color-beach {
    --bp-color-100: #fffdf3;
    --bp-color-200: #fff8da;
    --bp-color-300: #fdf2c1;
    --bp-color-400: #fbecaa;
    --bp-color-500: #f7e594;
    --bp-color-600: #ceb66f;
    --bp-color-700: #8a733b;
    --bp-color-800: #66512c;
    --bp-color-900: #332514;
  }

  .bp-color-black {
    --bp-color-100: #e9e9e9;
    --bp-color-200: #b9b9b9;
    --bp-color-300: #757575;
    --bp-color-400: #585858;
    --bp-color-500: #272727;
    --bp-color-600: #222222;
    --bp-color-700: #1d1d1d;
    --bp-color-800: #181818;
    --bp-color-900: #141414;
  }

  .bp-color-blue {
    --bp-color-100: #e7f6ff;
    --bp-color-200: #b3dfff;
    --bp-color-300: #88ccff;
    --bp-color-400: #3ea3ec;
    --bp-color-500: #007ac9;
    --bp-color-600: #0066ac;
    --bp-color-700: #00528c;
    --bp-color-800: #003d69;
    --bp-color-900: #002846;
  }

  .bp-color-brown {
    --bp-color-100: #fbf2e8;
    --bp-color-200: #f0d4b4;
    --bp-color-300: #e8ba87;
    --bp-color-400: #ca8d4a;
    --bp-color-500: #ad620a;
    --bp-color-600: #915104;
    --bp-color-700: #764003;
    --bp-color-800: #582f02;
    --bp-color-900: #3a1f01;
  }

  .bp-color-candy {
    --bp-color-100: #ffedfa;
    --bp-color-200: #ffc3ee;
    --bp-color-300: #ff9ee3;
    --bp-color-400: #e85ec2;
    --bp-color-500: #ca159e;
    --bp-color-600: #aa0b84;
    --bp-color-700: #8b076b;
    --bp-color-800: #68054f;
    --bp-color-900: #450735;
  }

  .bp-color-dolphin {
    --bp-color-100: #f2f3f6;
    --bp-color-200: #d6d8e2;
    --bp-color-300: #bfc3d2;
    --bp-color-400: #959aaf;
    --bp-color-500: #6f758e;
    --bp-color-600: #5d6278;
    --bp-color-700: #4b4f61;
    --bp-color-800: #363a48;
    --bp-color-900: #242630;
  }

  .bp-color-dynamite {
    --bp-color-100: #ffefec;
    --bp-color-200: #ffcbbf;
    --bp-color-300: #ffab96;
    --bp-color-400: #f46b49;
    --bp-color-500: #d53002;
    --bp-color-600: #b42500;
    --bp-color-700: #921d00;
    --bp-color-800: #6e1400;
    --bp-color-900: #490e01;
  }

  .bp-color-emerald {
    --bp-color-100: #e7f8f3;
    --bp-color-200: #b0e6d9;
    --bp-color-300: #7ed7c2;
    --bp-color-400: #36b395;
    --bp-color-500: #008667;
    --bp-color-600: #007559;
    --bp-color-700: #005f47;
    --bp-color-800: #004635;
    --bp-color-900: #002f22;
  }

  .bp-color-grass {
    --bp-color-100: #f8ffe9;
    --bp-color-200: #e8fdb8;
    --bp-color-300: #d7f989;
    --bp-color-400: #c5f35c;
    --bp-color-500: #b2eb31;
    --bp-color-600: #94c625;
    --bp-color-700: #5d8100;
    --bp-color-800: #527005;
    --bp-color-900: #384c09;
  }

  .bp-color-green {
    --bp-color-100: #e7f9e7;
    --bp-color-200: #b1eab1;
    --bp-color-300: #80dd81;
    --bp-color-400: #35b93c;
    --bp-color-500: #00890d;
    --bp-color-600: #007708;
    --bp-color-700: #006206;
    --bp-color-800: #004903;
    --bp-color-900: #003102;
  }

  .bp-color-hazelnut {
    --bp-color-100: #f8f2ec;
    --bp-color-200: #e8d5c3;
    --bp-color-300: #dcbda1;
    --bp-color-400: #ba936c;
    --bp-color-500: #9b6c3c;
    --bp-color-600: #825a2f;
    --bp-color-700: #694825;
    --bp-color-800: #4e341a;
    --bp-color-900: #342211;
  }

  .bp-color-heaven {
    --bp-color-100: #f7fafd;
    --bp-color-200: #e4edf9;
    --bp-color-300: #d3e1f4;
    --bp-color-400: #c2d5ee;
    --bp-color-500: #a9c1e0;
    --bp-color-600: #9bb0cc;
    --bp-color-700: #627389;
    --bp-color-800: #525f70;
    --bp-color-900: #333c47;
  }

  .bp-color-jazz {
    --bp-color-100: #f5f1ff;
    --bp-color-200: #ddd0ff;
    --bp-color-300: #cab6ff;
    --bp-color-400: #a381fc;
    --bp-color-500: #7d53e9;
    --bp-color-600: #6843c6;
    --bp-color-700: #5336a1;
    --bp-color-800: #3d2779;
    --bp-color-900: #281a50;
  }

  .bp-color-jeans {
    --bp-color-100: #edf3ff;
    --bp-color-200: #c3daff;
    --bp-color-300: #a2c5ff;
    --bp-color-400: #5d99fe;
    --bp-color-500: #266fe9;
    --bp-color-600: #1d5cc6;
    --bp-color-700: #164aa1;
    --bp-color-800: #0f3777;
    --bp-color-900: #0a244f;
  }

  .bp-color-kiwi {
    --bp-color-100: #fdfee9;
    --bp-color-200: #f7f9b8;
    --bp-color-300: #eff389;
    --bp-color-400: #e5ea5c;
    --bp-color-500: #d9e031;
    --bp-color-600: #c0c635;
    --bp-color-700: #afb542;
    --bp-color-800: #6d7111;
    --bp-color-900: #464909;
  }

  .bp-color-lavender {
    --bp-color-100: #fcedfd;
    --bp-color-200: #f7c6f9;
    --bp-color-300: #f2a2f6;
    --bp-color-400: #d46adb;
    --bp-color-500: #b630bd;
    --bp-color-600: #9924a0;
    --bp-color-700: #7c1c82;
    --bp-color-800: #5d1360;
    --bp-color-900: #3e0e40;
  }

  .bp-color-lemon {
    --bp-color-100: #ffffdf;
    --bp-color-200: #fffec0;
    --bp-color-300: #fffca3;
    --bp-color-400: #fff887;
    --bp-color-500: #fff36d;
    --bp-color-600: #d2d24b;
    --bp-color-700: #b3b33f;
    --bp-color-800: #79791a;
    --bp-color-900: #4d4d0b;
  }

  .bp-color-lipstick {
    --bp-color-100: #fbe6ed;
    --bp-color-200: #f4afc8;
    --bp-color-300: #fe89b4;
    --bp-color-400: #d73977;
    --bp-color-500: #c60450;
    --bp-color-600: #a70041;
    --bp-color-700: #870033;
    --bp-color-800: #650025;
    --bp-color-900: #410017;
  }

  .bp-color-go-turquoise {
    --bp-color-100: #effaf9;
    --bp-color-200: #cbedeb;
    --bp-color-300: #a9dfdb;
    --bp-color-400: #88d0cb;
    --bp-color-500: #67c0ba;
    --bp-color-600: #33827d;
    --bp-color-700: #30716c;
    --bp-color-800: #2e5e5b;
    --bp-color-900: #1c3c3a;
  }

  .bp-color-go-purple {
    --bp-color-100: #eee9f0;
    --bp-color-200: #c8b6ce;
    --bp-color-300: #886d92;
    --bp-color-400: #7a5488;
    --bp-color-500: #532464;
    --bp-color-600: #451c54;
    --bp-color-700: #371543;
    --bp-color-800: #290f32;
    --bp-color-900: #1a0920;
  }

  .bp-color-mint {
    --bp-color-100: #edfdf5;
    --bp-color-200: #c5f8e0;
    --bp-color-300: #9ff2ca;
    --bp-color-400: #7beab4;
    --bp-color-500: #50d997;
    --bp-color-600: #50c58b;
    --bp-color-700: #1f8658;
    --bp-color-800: #256f4b;
    --bp-color-900: #164730;
  }

  .bp-color-moss {
    --bp-color-100: #f4f4eb;
    --bp-color-200: #dbdbbf;
    --bp-color-300: #c7c79a;
    --bp-color-400: #a09f64;
    --bp-color-500: #7a792f;
    --bp-color-600: #676727;
    --bp-color-700: #53531e;
    --bp-color-800: #3d3d15;
    --bp-color-900: #28280e;
  }

  .bp-color-night {
    --bp-color-100: #f2f2f9;
    --bp-color-200: #d5d7eb;
    --bp-color-300: #bec1e2;
    --bp-color-400: #9397c4;
    --bp-color-500: #6d72a7;
    --bp-color-600: #5a5f8d;
    --bp-color-700: #484c72;
    --bp-color-800: #353855;
    --bp-color-900: #232438;
  }

  .bp-color-ocean {
    --bp-color-100: #f2fefe;
    --bp-color-200: #cdf3f5;
    --bp-color-300: #ace8ea;
    --bp-color-400: #8bdcdf;
    --bp-color-500: #6bced2;
    --bp-color-600: #67bbbf;
    --bp-color-700: #377e81;
    --bp-color-800: #2e6466;
    --bp-color-900: #1c4041;
  }

  .bp-color-olive {
    --bp-color-100: #ecf7e9;
    --bp-color-200: #c4e4ba;
    --bp-color-300: #a0d591;
    --bp-color-400: #6ab057;
    --bp-color-500: #31871c;
    --bp-color-600: #2b751a;
    --bp-color-700: #235f15;
    --bp-color-800: #18460d;
    --bp-color-900: #102f07;
  }

  .bp-color-orange {
    --bp-color-100: #fff0e6;
    --bp-color-200: #ffd9ba;
    --bp-color-300: #ffc293;
    --bp-color-400: #ffa970;
    --bp-color-500: #ff9058;
    --bp-color-600: #bf5100;
    --bp-color-700: #9f4400;
    --bp-color-800: #793400;
    --bp-color-900: #4d2100;
  }

  .bp-color-pink {
    --bp-color-100: #ffedf7;
    --bp-color-200: #ffc5e3;
    --bp-color-300: #ffa2d1;
    --bp-color-400: #f853a8;
    --bp-color-500: #d6007a;
    --bp-color-600: #b30067;
    --bp-color-700: #920053;
    --bp-color-800: #6d003f;
    --bp-color-900: #49042a;
  }

  .bp-color-purple {
    --bp-color-100: #f7f0fe;
    --bp-color-200: #e5cefa;
    --bp-color-300: #d6b1f9;
    --bp-color-400: #b281e1;
    --bp-color-500: #9155c8;
    --bp-color-600: #7945aa;
    --bp-color-700: #62378a;
    --bp-color-800: #482767;
    --bp-color-900: #301a44;
  }

  .bp-color-red {
    --bp-color-100: #ffefef;
    --bp-color-200: #ffc9c9;
    --bp-color-300: #ffa9a5;
    --bp-color-400: #ff5c54;
    --bp-color-500: #e00000;
    --bp-color-600: #bc0000;
    --bp-color-700: #9a0000;
    --bp-color-800: #740000;
    --bp-color-900: #4f0201;
  }

  .bp-color-sage {
    --bp-color-100: #f2f4f0;
    --bp-color-200: #d5dccd;
    --bp-color-300: #bdc8b1;
    --bp-color-400: #92a283;
    --bp-color-500: #6a7b57;
    --bp-color-600: #5a6949;
    --bp-color-700: #48553a;
    --bp-color-800: #343f29;
    --bp-color-900: #22291c;
  }

  .bp-color-salmon {
    --bp-color-100: #fff2f0;
    --bp-color-200: #ffdbd5;
    --bp-color-300: #ffc3ba;
    --bp-color-400: #ffaa9d;
    --bp-color-500: #ff9281;
    --bp-color-600: #b85547;
    --bp-color-700: #98483b;
    --bp-color-800: #793c32;
    --bp-color-900: #4d251f;
  }

  .bp-color-silver {
    --bp-color-100: #f8f8f8;
    --bp-color-200: #f4f4f4;
    --bp-color-300: #ececec;
    --bp-color-400: #e5e5e5;
    --bp-color-500: #dddddd;
    --bp-color-600: #c9c9c9;
    --bp-color-700: #b7b7b7;
    --bp-color-800: #9d9d9d;
    --bp-color-900: #7c7c7c;
  }

  .bp-color-steel {
    --bp-color-100: #f1f3f4;
    --bp-color-200: #d4d9df;
    --bp-color-300: #bcc5ce;
    --bp-color-400: #919da9;
    --bp-color-500: #697786;
    --bp-color-600: #536576;
    --bp-color-700: #405264;
    --bp-color-800: #2f3c4a;
    --bp-color-900: #1d2831;
  }

  .bp-color-tangerine {
    --bp-color-100: #fff5e6;
    --bp-color-200: #ffdfb1;
    --bp-color-300: #ffc97e;
    --bp-color-400: #ffb14a;
    --bp-color-500: #ff9827;
    --bp-color-600: #ac6300;
    --bp-color-700: #8f5300;
    --bp-color-800: #794700;
    --bp-color-900: #4d2d00;
  }

  .bp-color-violet {
    --bp-color-100: #f3f1ff;
    --bp-color-200: #d8d2ff;
    --bp-color-300: #c1baff;
    --bp-color-400: #9388ff;
    --bp-color-500: #6554ff;
    --bp-color-600: #5441dd;
    --bp-color-700: #4235b3;
    --bp-color-800: #312785;
    --bp-color-900: #211a58;
  }

  .bp-color-vrt-leer-mee {
    --bp-color-100: #e6e6ee;
    --bp-color-200: #acadc6;
    --bp-color-300: #73789b;
    --bp-color-400: #3d476e;
    --bp-color-500: #0b173d;
    --bp-color-600: #091231;
    --bp-color-700: #070e25;
    --bp-color-800: #040918;
    --bp-color-900: #02050c;
  }

  .bp-color-watermelon {
    --bp-color-100: #ffeef2;
    --bp-color-200: #ffc8d4;
    --bp-color-300: #ffa6b8;
    --bp-color-400: #ff5679;
    --bp-color-500: #de003e;
    --bp-color-600: #ba0032;
    --bp-color-700: #980027;
    --bp-color-800: #72001d;
    --bp-color-900: #4e0114;
  }

  .bp-color-yellow {
    --bp-color-100: #fffce8;
    --bp-color-200: #fff4b7;
    --bp-color-300: #ffeb88;
    --bp-color-400: #ffe15b;
    --bp-color-500: #ffd531;
    --bp-color-600: #dcbc33;
    --bp-color-700: #c6ad43;
    --bp-color-800: #796a10;
    --bp-color-900: #4d4409;
  }

  /* Tints: the roles every color gets */

  .bp-tint-100 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-100),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-200 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-200),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-500) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-500 {
    --bp-tint-background: var(--bp-color-500);
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  /* Hover: a hover tint takes the roles of the next one */

  .bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-200),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-500) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-500);
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  /* Exceptions: colors where a role needs another candidate to keep its contrast */

  .bp-color-aqua.bp-tint-100 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-aqua.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-aqua.bp-tint-300 {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-aqua.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-aqua.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-aqua.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-aqua.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-beach.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-beach.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-beach.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-beach.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-beach.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-beach.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-beach.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-beach.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: var(--bp-color-900);
  }

  .bp-color-beach.bp-tint-600 {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: var(--bp-color-900);
  }

  .bp-color-beach.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-beach.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-black.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-black.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-black.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-black.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-400);
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-300) var(--bp-tint-dark));
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: color-mix(in srgb, #ffffff, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-black.bp-tint-300 {
    --bp-tint-background: var(--bp-color-400);
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-300) var(--bp-tint-dark));
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: color-mix(in srgb, #ffffff, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-black.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: #ffffff;
  }

  .bp-color-black.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: #ffffff;
  }

  .bp-color-black.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-500) var(--bp-tint-dark));
  }

  .bp-color-black.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-500) var(--bp-tint-dark));
  }

  .bp-color-black.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-100) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-400) var(--bp-tint-dark));
  }

  .bp-color-black.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-100) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-400) var(--bp-tint-dark));
  }

  .bp-color-blue.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-blue.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-blue.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-blue.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-blue.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-blue.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-blue.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-brown.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-brown.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-brown.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-brown.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-brown.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-brown.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-brown.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-brown.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-brown.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-candy.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-candy.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-candy.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-candy.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-candy.bp-tint-300 {
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-candy.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-candy.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-candy.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-candy.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-dolphin.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-dolphin.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-dolphin.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-dolphin.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-dolphin.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-dolphin.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-dolphin.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-dolphin.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-dolphin.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-dynamite.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-dynamite.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-dynamite.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-dynamite.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-dynamite.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-dynamite.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-dynamite.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-dynamite.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-dynamite.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-emerald.bp-tint-100 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-emerald.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-emerald.bp-tint-300 {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-emerald.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-emerald.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-emerald.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-emerald.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-grass.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-grass.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-grass.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #262626, #ffffff var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #262626, #ffffff var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-600 {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
  }

  .bp-color-grass.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-grass.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-green.bp-tint-100 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-green.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-green.bp-tint-300 {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-green.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-green.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-green.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-green.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-hazelnut.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-hazelnut.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-hazelnut.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-hazelnut.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-hazelnut.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-hazelnut.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-hazelnut.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-heaven.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
  }

  .bp-color-heaven.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
  }

  .bp-color-heaven.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-heaven.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-heaven.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-400) var(--bp-tint-dark)
    );
  }

  .bp-color-heaven.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-400) var(--bp-tint-dark)
    );
  }

  .bp-color-jazz.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-jazz.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-jazz.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-jazz.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-jazz.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-jazz.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-jazz.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-jazz.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-jazz.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-jeans.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-jeans.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-jeans.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-jeans.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-jeans.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-jeans.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-jeans.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-jeans.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-jeans.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-kiwi.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-kiwi.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-kiwi.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-kiwi.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-kiwi.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-kiwi.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-kiwi.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-kiwi.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-600);
  }

  .bp-color-kiwi.bp-tint-600 {
    --bp-tint-background: var(--bp-color-600);
  }

  .bp-color-kiwi.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-kiwi.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-lavender.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-lavender.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-lavender.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-lavender.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-lavender.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-lavender.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-lavender.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-lavender.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-lavender.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-lemon.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-100) var(--bp-tint-dark)
    );
  }

  .bp-color-lemon.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: var(--bp-color-900);
  }

  .bp-color-lemon.bp-tint-600 {
    --bp-tint-background: var(--bp-color-600);
    --bp-tint-text: var(--bp-color-900);
  }

  .bp-color-lemon.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-lemon.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-mint.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-mint.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-mint.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-mint.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-mint.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-mint.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-moss.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-moss.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-moss.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-moss.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-moss.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-moss.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-moss.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-night.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-night.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-night.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-night.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-night.bp-tint-300 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-night.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-night.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-night.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-night.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-ocean.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-700) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-ocean.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-ocean.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-ocean.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-olive.bp-tint-100 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-olive.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-olive.bp-tint-300 {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-olive.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-olive.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-olive.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-olive.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-100 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-orange.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-orange.bp-tint-200 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-orange.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-orange.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-orange.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-pink.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-pink.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-pink.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-pink.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-purple.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-purple.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-purple.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-purple.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #d8d2ff var(--bp-tint-dark));
  }

  .bp-color-purple.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #d8d2ff var(--bp-tint-dark));
  }

  .bp-color-purple.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-purple.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-purple.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-purple.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-red.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-red.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-red.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-red.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-red.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-red.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-red.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-red.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-red.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-sage.bp-tint-100 {
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-sage.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-sage.bp-tint-300 {
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
  }

  .bp-color-sage.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-sage.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-sage.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-sage.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-100 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-salmon.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-salmon.bp-tint-200 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-salmon.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-salmon.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-salmon.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-silver.bp-tint-100 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-100),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #444444, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(in srgb, var(--bp-color-900), #000000 var(--bp-tint-dark));
  }

  .bp-color-silver.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-200),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #444444, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(in srgb, var(--bp-color-900), #000000 var(--bp-tint-dark));
  }

  .bp-color-silver.bp-tint-200 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-200),
      var(--bp-color-700) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #444444, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(in srgb, var(--bp-color-900), #000000 var(--bp-tint-dark));
  }

  .bp-color-silver.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: #000000;
  }

  .bp-color-silver.bp-tint-300 {
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: #000000;
  }

  .bp-color-silver.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-silver.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-silver.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-silver.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-silver.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #444444 var(--bp-tint-dark));
  }

  .bp-color-silver.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #444444 var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-steel.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-steel.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-steel.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-steel.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-steel.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-steel.bp-tint-700 {
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-100 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-tangerine.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-tangerine.bp-tint-200 {
    --bp-tint-border: var(--bp-color-600);
  }

  .bp-color-tangerine.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-600) var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, var(--bp-color-900), #ffffff var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-600) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, #ffffff var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-600 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-600),
      var(--bp-color-400) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #ffffff, #000000 var(--bp-tint-dark));
  }

  .bp-color-tangerine.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-tangerine.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-violet.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-violet.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-violet.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
  }

  .bp-color-violet.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-violet.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-200) var(--bp-tint-dark));
  }

  .bp-color-violet.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-violet.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-violet.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-violet.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-800) var(--bp-tint-dark));
  }

  .bp-color-watermelon.bp-tint-100 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-watermelon.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-watermelon.bp-tint-200 {
    --bp-tint-border: var(--bp-color-500);
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-watermelon.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-watermelon.bp-tint-300 {
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-100) var(--bp-tint-dark));
    --bp-tint-text-secondary: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-200) var(--bp-tint-dark)
    );
  }

  .bp-color-watermelon.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-text: #ffffff;
  }

  .bp-color-watermelon.bp-tint-500 {
    --bp-tint-text: #ffffff;
  }

  .bp-color-watermelon.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-watermelon.bp-tint-600 {
    --bp-tint-text: color-mix(in srgb, #ffffff, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-yellow.bp-tint-100 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-200 {
    --bp-tint-border: color-mix(
      in srgb,
      var(--bp-color-800),
      var(--bp-color-600) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-300 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-300),
      var(--bp-color-900) var(--bp-tint-dark)
    );
    --bp-tint-border: color-mix(in srgb, transparent, var(--bp-color-800) var(--bp-tint-dark));
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-500) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-500 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-500),
      var(--bp-color-800) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(
      in srgb,
      var(--bp-color-900),
      var(--bp-color-300) var(--bp-tint-dark)
    );
  }

  .bp-color-yellow.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: var(--bp-color-600);
  }

  .bp-color-yellow.bp-tint-600 {
    --bp-tint-background: var(--bp-color-600);
  }

  .bp-color-yellow.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  .bp-color-yellow.bp-tint-700 {
    --bp-tint-background: color-mix(
      in srgb,
      var(--bp-color-700),
      var(--bp-color-500) var(--bp-tint-dark)
    );
    --bp-tint-text: color-mix(in srgb, #000000, var(--bp-color-900) var(--bp-tint-dark));
  }

  /* Button and brand colors: their tints keep the values of the 1.x combos */

  .bp-color-lipstick.bp-tint-100 {
    --bp-tint-background: #fbe6ed;
    --bp-tint-border: #c60450;
    --bp-tint-text: #410017;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: #f4afc8;
    --bp-tint-border: #c60450;
    --bp-tint-text: #410017;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-200 {
    --bp-tint-background: #f4afc8;
    --bp-tint-border: #c60450;
    --bp-tint-text: #410017;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: #fe89b4;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-300 {
    --bp-tint-background: #fe89b4;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #c60450;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-500 {
    --bp-tint-background: #c60450;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #a70041;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-600 {
    --bp-tint-background: #a70041;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: #870033;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-lipstick.bp-tint-700 {
    --bp-tint-background: #870033;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-100 {
    --bp-tint-background: #effaf9;
    --bp-tint-border: #33827d;
    --bp-tint-text: #1c3c3a;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: #cbedeb;
    --bp-tint-border: #33827d;
    --bp-tint-text: #1c3c3a;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-200 {
    --bp-tint-background: #cbedeb;
    --bp-tint-border: #33827d;
    --bp-tint-text: #1c3c3a;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: #a9dfdb;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-300 {
    --bp-tint-background: #a9dfdb;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #67c0ba;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-500 {
    --bp-tint-background: #67c0ba;
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #33827d;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-600 {
    --bp-tint-background: #33827d;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: #30716c;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-turquoise.bp-tint-700 {
    --bp-tint-background: #30716c;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-100 {
    --bp-tint-background: #eee9f0;
    --bp-tint-border: #532464;
    --bp-tint-text: #1a0920;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: #c8b6ce;
    --bp-tint-border: #532464;
    --bp-tint-text: #1a0920;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-200 {
    --bp-tint-background: #c8b6ce;
    --bp-tint-border: #532464;
    --bp-tint-text: #1a0920;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: #886d92;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-300 {
    --bp-tint-background: #886d92;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #532464;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-500 {
    --bp-tint-background: #532464;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #451c54;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-600 {
    --bp-tint-background: #451c54;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: #371543;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-purple.bp-tint-700 {
    --bp-tint-background: #371543;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-100 {
    --bp-tint-background: #e6e6ee;
    --bp-tint-border: #0b173d;
    --bp-tint-text: #02050c;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: #acadc6;
    --bp-tint-border: #0b173d;
    --bp-tint-text: #02050c;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-200 {
    --bp-tint-background: #acadc6;
    --bp-tint-border: #0b173d;
    --bp-tint-text: #02050c;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: #3d476e;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-300 {
    --bp-tint-background: #3d476e;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #0b173d;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-500 {
    --bp-tint-background: #0b173d;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #091231;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-600 {
    --bp-tint-background: #091231;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: #070e25;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-vrt-leer-mee.bp-tint-700 {
    --bp-tint-background: #070e25;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-100 {
    --bp-tint-background: color-mix(in srgb, #ffffff, #585858 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #272727, transparent var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #141414, #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-hover.bp-tint-100:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #b9b9b9, #585858 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #272727, transparent var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #141414, #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-200 {
    --bp-tint-background: color-mix(in srgb, #b9b9b9, #585858 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #272727, transparent var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #141414, #ffffff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-hover.bp-tint-200:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #757575, #585858 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #757575 var(--bp-tint-dark));
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #757575, #585858 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #757575 var(--bp-tint-dark));
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #272727, #757575 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #272727, #757575 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #222222, #b9b9b9 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #dddddd var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #ffffff, #272727 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-600 {
    --bp-tint-background: color-mix(in srgb, #222222, #b9b9b9 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #dddddd var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #ffffff, #272727 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-hover.bp-tint-600:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #1d1d1d, #e9e9e9 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #ffffff var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #ffffff, #585858 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-white.bp-tint-700 {
    --bp-tint-background: color-mix(in srgb, #1d1d1d, #e9e9e9 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, transparent, #ffffff var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #ffffff, #585858 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger-outline.bp-tint-300 {
    --bp-tint-background: transparent;
    --bp-tint-border: color-mix(in srgb, #e30000, #ff0f0f var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #e30000, #ffc9c9 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #ffefef, #4d0000 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #e30000, #ff0f0f var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #d20000, #ffc9c9 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger-outline.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #ffefef, #4d0000 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #e30000, #ff0f0f var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #d20000, #ffc9c9 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #ffefef, #4d0000 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #e30000, #ff0f0f var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #d20000, #ffc9c9 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #e30000, #a60000 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #d20000;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger.bp-tint-500 {
    --bp-tint-background: #d20000;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-danger.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #d20000;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-neutral.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #d8e0e8, #a1b0c0 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-neutral.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #abc0dc;
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-neutral.bp-tint-500 {
    --bp-tint-background: #abc0dc;
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-neutral.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #abc0dc;
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-plain-outline.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #ffffff, #161725 var(--bp-tint-dark));
    --bp-tint-border: var(--bp-border-default);
    --bp-tint-text: var(--bp-text-primary);
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-plain-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #f5f5f5, #333c47 var(--bp-tint-dark));
    --bp-tint-border: var(--bp-border-default);
    --bp-tint-text: var(--bp-text-primary);
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-plain-outline.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #f5f5f5, #333c47 var(--bp-tint-dark));
    --bp-tint-border: var(--bp-border-default);
    --bp-tint-text: var(--bp-text-primary);
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-plain-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #f5f5f5, #333c47 var(--bp-tint-dark));
    --bp-tint-border: var(--bp-border-default);
    --bp-tint-text: var(--bp-text-primary);
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary-outline.bp-tint-300 {
    --bp-tint-background: transparent;
    --bp-tint-border: color-mix(in srgb, #3a70e6, #2564cf var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #3a70e6, #8cb7ff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #e9f1ff, #09234d var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #3a70e6, #2564cf var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #2564cf, #b8d3ff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary-outline.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #e9f1ff, #09234d var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #3a70e6, #2564cf var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #2564cf, #b8d3ff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #e9f1ff, #09234d var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #3a70e6, #2564cf var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #2564cf, #b8d3ff var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #3a70e6, #1a4ea6 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #2564cf;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary.bp-tint-500 {
    --bp-tint-background: #2564cf;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-primary.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #2564cf;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success-outline.bp-tint-300 {
    --bp-tint-background: transparent;
    --bp-tint-border: color-mix(in srgb, #00890a, #007709 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #0d6510, #bcf6bc var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #eafcea, #0d450e var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #00890a, #007709 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #0d6510, #bcf6bc var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success-outline.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #eafcea, #0d450e var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #00890a, #007709 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #0d6510, #bcf6bc var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #eafcea, #0d450e var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #00890a, #007709 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #0d6510, #bcf6bc var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success.bp-tint-300 {
    --bp-tint-background: #57d31a;
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #51c518, #64e266 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #51c518, #64e266 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-success.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #51c518, #64e266 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: #000000;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning-outline.bp-tint-300 {
    --bp-tint-background: transparent;
    --bp-tint-border: color-mix(in srgb, #ffcc00, #fbc400 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #796a10, #fff4b7 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #fffce8, #4d4409 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #ffcc00, #fbc400 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #796a10, #fff4b7 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning-outline.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #fffce8, #4d4409 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #ffcc00, #fbc400 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #796a10, #fff4b7 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #fffce8, #4d4409 var(--bp-tint-dark));
    --bp-tint-border: color-mix(in srgb, #ffcc00, #fbc400 var(--bp-tint-dark));
    --bp-tint-text: color-mix(in srgb, #796a10, #fff4b7 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning.bp-tint-300 {
    --bp-tint-background: color-mix(in srgb, #ffcc00, #dcbc33 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #dcbc33, #ffcc00 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning.bp-tint-500 {
    --bp-tint-background: color-mix(in srgb, #dcbc33, #ffcc00 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-warning.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: color-mix(in srgb, #dcbc33, #ffcc00 var(--bp-tint-dark));
    --bp-tint-border: transparent;
    --bp-tint-text: color-mix(in srgb, #262626, #000000 var(--bp-tint-dark));
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go.bp-tint-300 {
    --bp-tint-background: #c60450;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #a70041;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go.bp-tint-500 {
    --bp-tint-background: #a70041;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #a70041;
    --bp-tint-border: transparent;
    --bp-tint-text: #ffffff;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-outline.bp-tint-300 {
    --bp-tint-background: transparent;
    --bp-tint-border: #c60450;
    --bp-tint-text: #c60450;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-outline.bp-tint-hover.bp-tint-300:hover:not(:disabled) {
    --bp-tint-background: #fbe6ed;
    --bp-tint-border: #c60450;
    --bp-tint-text: #c60450;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-outline.bp-tint-500 {
    --bp-tint-background: #fbe6ed;
    --bp-tint-border: #c60450;
    --bp-tint-text: #c60450;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  .bp-color-go-outline.bp-tint-hover.bp-tint-500:hover:not(:disabled) {
    --bp-tint-background: #fbe6ed;
    --bp-tint-border: #c60450;
    --bp-tint-text: #c60450;
    --bp-tint-text-secondary: var(--bp-tint-text);
    --bp-tint-icon: var(--bp-tint-text);
  }

  /* A tint the button color does not have stays undefined, as its 1.x combo class did */

  .bp-color-danger-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-danger.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-neutral.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-neutral.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-neutral.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-neutral.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-plain-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-plain-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-plain-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-plain-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-primary.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-success.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-warning.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go-outline.bp-tint-100 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go-outline.bp-tint-200 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go-outline.bp-tint-600 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  .bp-color-go-outline.bp-tint-700 {
    --bp-tint-background: initial;
    --bp-tint-border: initial;
    --bp-tint-text: initial;
    --bp-tint-text-secondary: initial;
    --bp-tint-icon: initial;
  }

  /* Applying a tint costs no specificity, so a component can always override it */

  :where(.bp-tint-100, .bp-tint-200, .bp-tint-300, .bp-tint-500, .bp-tint-600, .bp-tint-700) {
    color: var(--bp-tint-text);
    background-color: var(--bp-tint-background);
    border-color: var(--bp-tint-border);
    --combo-color: var(--bp-tint-text);
    --combo-background-color: var(--bp-tint-background);
    --combo-border-color: var(--bp-tint-border);
  }
}