@bcc-code/design-tokens 5.1.67 → 5.1.68

package/build/bcc/css/tailwind-dark.css

@@ -1,1779 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-
-@theme {
-  --color-neutral-0: #ffffff;
-  --color-neutral-100: #f8f8f8;
-  --color-neutral-200: #f0f1f2;
-  --color-neutral-300: #dddee1;
-  --color-neutral-400: #b7b9be;
-  --color-neutral-500: #8c8f97;
-  --color-neutral-600: #7d818a;
-  --color-neutral-700: #6b6e76;
-  --color-neutral-800: #505258;
-  --color-neutral-900: #3b3d42;
-  --color-neutral-1000: #292a2e;
-  --color-neutral-1100: #1e1f21;
-  --color-neutral-alpha-100-a: rgba(23, 23, 23, 0.03);
-  --color-neutral-alpha-200-a: rgba(5, 21, 36, 0.06);
-  --color-neutral-alpha-300-a: rgba(11, 18, 14, 0.14);
-  --color-neutral-alpha-400-a: rgba(8, 15, 33, 0.29);
-  --color-neutral-alpha-500-a: rgba(5, 12, 31, 0.46);
-  --color-dark-neutral-0: #18191a;
-  --color-dark-neutral-100: #1f1f21;
-  --color-dark-neutral-200: #242528;
-  --color-dark-neutral-250: #2b2c2f;
-  --color-dark-neutral-300: #303134;
-  --color-dark-neutral-350: #3d3f43;
-  --color-dark-neutral-400: #4b4d51;
-  --color-dark-neutral-500: #63666b;
-  --color-dark-neutral-600: #7e8188;
-  --color-dark-neutral-700: #96999e;
-  --color-dark-neutral-800: #a9abaf;
-  --color-dark-neutral-900: #bfc1c4;
-  --color-dark-neutral-1000: #cecfd2;
-  --color-dark-neutral-1100: #e2e3e4;
-  --color-dark-neutral-alpha-100-a: rgba(189, 189, 189, 0.04);
-  --color-dark-neutral-alpha-200-a: rgba(206, 206, 217, 0.07);
-  --color-dark-neutral-alpha-250-a: rgba(217, 218, 231, 0.1);
-  --color-dark-neutral-alpha-300-a: rgba(227, 228, 242, 0.12);
-  --color-dark-neutral-alpha-350-a: rgba(232, 237, 253, 0.18);
-  --color-dark-neutral-alpha-400-a: rgba(229, 233, 246, 0.25);
-  --color-dark-neutral-alpha-500-a: rgba(233, 240, 251, 0.36);
-  --color-blue-100: #f6fbff;
-  --color-blue-200: #d9ecff;
-  --color-blue-300: #a6cdfd;
-  --color-blue-400: #7cabf9;
-  --color-blue-500: #608ef6;
-  --color-blue-600: #446add;
-  --color-blue-700: #274eb5;
-  --color-blue-800: #273c8f;
-  --color-blue-900: #212c64;
-  --color-blue-1000: #091e47;
-  --color-teal-100: #f6fbff;
-  --color-teal-200: #c3f2f8;
-  --color-teal-300: #82d3e3;
-  --color-teal-400: #51b9cf;
-  --color-teal-500: #1a9eb7;
-  --color-teal-600: #0b7da1;
-  --color-teal-700: #005b81;
-  --color-teal-800: #09486b;
-  --color-teal-900: #0d324d;
-  --color-teal-1000: #0c2132;
-  --color-bcc-100: #f0fcfa;
-  --color-bcc-200: #d2eeeb;
-  --color-bcc-300: #a0cec8;
-  --color-bcc-400: #6fb5ad;
-  --color-bcc-500: #3e9f97;
-  --color-bcc-600: #1d7f78;
-  --color-bcc-700: #0c625c;
-  --color-bcc-800: #014d49;
-  --color-bcc-900: #0b3633;
-  --color-bcc-1000: #012320;
-  --color-green-100: #efffed;
-  --color-green-200: #cbf3c9;
-  --color-green-300: #83d895;
-  --color-green-400: #32c180;
-  --color-green-500: #1ca673;
-  --color-green-600: #09825d;
-  --color-green-700: #0c6241;
-  --color-green-800: #094c3b;
-  --color-green-900: #073734;
-  --color-green-1000: #032429;
-  --color-brown-100: #f9faf4;
-  --color-brown-200: #ece8dc;
-  --color-brown-300: #d1c5b0;
-  --color-brown-400: #bea889;
-  --color-brown-500: #a98c66;
-  --color-brown-600: #8b6d45;
-  --color-brown-700: #6e5232;
-  --color-brown-800: #553d28;
-  --color-brown-900: #3f2c1e;
-  --color-brown-1000: #2e1b0f;
-  --color-yellow-100: #fdf8e9;
-  --color-yellow-200: #f8e6a0;
-  --color-yellow-300: #e9c348;
-  --color-yellow-400: #d5a406;
-  --color-yellow-500: #bc870d;
-  --color-yellow-600: #a4670b;
-  --color-yellow-700: #854901;
-  --color-yellow-800: #653805;
-  --color-yellow-900: #4b2c04;
-  --color-yellow-1000: #2d1f00;
-  --color-orange-100: #fffaed;
-  --color-orange-200: #fee3c1;
-  --color-orange-300: #f6b981;
-  --color-orange-400: #f19457;
-  --color-orange-500: #da772e;
-  --color-orange-600: #b55919;
-  --color-orange-700: #943a14;
-  --color-orange-800: #782612;
-  --color-orange-900: #5d1712;
-  --color-orange-1000: #420e0d;
-  --color-red-100: #fff8f3;
-  --color-red-200: #fee2dd;
-  --color-red-300: #fab6ad;
-  --color-red-400: #fa877e;
-  --color-red-500: #ed6362;
-  --color-red-600: #ca414e;
-  --color-red-700: #a42237;
-  --color-red-800: #811436;
-  --color-red-900: #630d2e;
-  --color-red-1000: #440223;
-  --color-magenta-100: #fff8ff;
-  --color-magenta-200: #fce0f8;
-  --color-magenta-300: #f3b4e2;
-  --color-magenta-400: #eb8acf;
-  --color-magenta-500: #de66b0;
-  --color-magenta-600: #be428f;
-  --color-magenta-700: #952e70;
-  --color-magenta-800: #751f57;
-  --color-magenta-900: #5b1043;
-  --color-magenta-1000: #3f0534;
-  --color-purple-100: #f6f9ff;
-  --color-purple-200: #e3e3fe;
-  --color-purple-300: #c9c3ec;
-  --color-purple-400: #afa0e0;
-  --color-purple-500: #9a82da;
-  --color-purple-600: #8360c3;
-  --color-purple-700: #61479c;
-  --color-purple-800: #493481;
-  --color-purple-900: #352465;
-  --color-purple-1000: #1d154d;
-  --color-transparent: rgba(0, 0, 0, 0);
-  --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16); /** Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. */
-  --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24); /** Use for the hovered state of color.background.inverse.subtle */
-  --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32); /** Use for the pressed state of color.background.inverse.subtle */
-  --color-blanket-default: rgba(16, 18, 20, 0.6); /** Use for the screen overlay that appears with modal dialogs */
-  --color-blanket-selected: rgba(29, 122, 252, 0.08); /** Use as an overlay to communicate selected states when a simple background color change isn't possible, such as in Editor block elements */
-  --color-blanket-danger: rgba(227, 73, 53, 0.08); /** Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements */
-  --color-interaction-hovered: rgba(255, 255, 255, 0.2); /** Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars. */
-  --color-interaction-pressed: rgba(255, 255, 255, 0.36); /** Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars. */
-  --spacing-0: 0rem; /** 0px */
-  --spacing-25: 0.125rem; /** 2px */
-  --spacing-50: 0.25rem; /** 4px */
-  --spacing-75: 0.375rem; /** 6px */
-  --spacing-100: 0.5rem; /** 8px */
-  --spacing-150: 0.75rem; /** 12px */
-  --spacing-200: 1rem; /** 16px */
-  --spacing-250: 1.25rem; /** 20px */
-  --spacing-300: 1.5rem; /** 24px */
-  --spacing-400: 2rem; /** 32px */
-  --spacing-500: 2.5rem; /** 40px */
-  --spacing-600: 3rem; /** 48px */
-  --spacing-800: 4rem; /** 64px */
-  --spacing-1000: 5rem; /** 80px */
-  --spacing-negative-25: -0.125rem; /** -2px */
-  --spacing-negative-50: -0.25rem; /** -4px */
-  --spacing-negative-75: -0.375rem; /** -6px */
-  --spacing-negative-100: -0.5rem; /** -8px */
-  --spacing-negative-150: -0.75rem; /** -12px */
-  --spacing-negative-200: -1rem; /** -16px */
-  --spacing-negative-250: -1.25rem; /** -20px */
-  --spacing-negative-300: -1.5rem; /** -24px */
-  --spacing-negative-400: -2rem; /** -32px */
-  --radius-none: 0; /** 0 */
-  --radius-2xs: 0.125rem; /** 2px */
-  --radius-xs: 0.25rem; /** 4px */
-  --radius-sm: 0.375rem; /** 6px */
-  --radius-md: 0.5rem; /** 8px */
-  --radius-lg: 0.75rem; /** 12px */
-  --radius-xl: 1rem; /** 16px */
-  --radius-2xl: 1.5rem; /** 24px */
-  --radius-3xl: 2rem; /** 32 */
-  --radius-4xl: 3rem; /** 48px */
-  --radius-full: 999px;
-  --border-width-0: 0;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --font-archivo: Archivo;
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 700;
-  --font-weight-semibold: 600;
-  --leading-xs: 12px;
-  --leading-sm: 14px;
-  --leading-md: 16px;
-  --leading-lg: 20px;
-  --leading-xl: 24px;
-  --leading-2xl: 28px;
-  --leading-3xl: 32px;
-  --leading-4xl: 36px;
-  --leading-5xl: 40px;
-  --leading-6xl: 56px;
-  --leading-7xl: 64px;
-  --leading-none: 1;
-  --text-xs: 0.75rem; /** 12px */
-  --text-sm: 0.875rem; /** 14px */
-  --text-md: 1rem; /** 16px */
-  --text-lg: 1.25rem; /** 20px */
-  --text-xl: 1.5rem; /** 24px */
-  --text-2xl: 2em; /** 32px */
-  --text-3xl: 2.25rem; /** 36px */
-  --text-4xl: 3rem; /** 48px */
-  --text-5xl: 3.5rem; /** 56px */
-  --shadow-oveflow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
-  --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
-  --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
-  --color-brand-100: var(--color-bcc-100);
-  --color-brand-200: var(--color-bcc-200);
-  --color-brand-300: var(--color-bcc-300);
-  --color-brand-400: var(--color-bcc-400);
-  --color-brand-500: var(--color-bcc-500);
-  --color-brand-600: var(--color-bcc-600);
-  --color-brand-700: var(--color-bcc-700);
-  --color-brand-800: var(--color-bcc-800);
-  --color-brand-900: var(--color-bcc-900);
-  --color-brand-1000: var(--color-bcc-1000);
-  --color-text-default: var(--color-dark-neutral-1100);
-  --color-text-subtle: var(--color-dark-neutral-800);
-  --color-text-subtlest: var(--color-dark-neutral-600);
-  --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
-  --color-text-inverse: var(--color-dark-neutral-100);
-  --color-text-success: var(--color-green-300);
-  --color-text-danger: var(--color-red-300);
-  --color-text-information: var(--color-blue-300);
-  --color-text-warning-default: var(--color-yellow-300);
-  --color-text-warning-inverse: var(--color-dark-neutral-100);
-  --color-text-accent-gray-default: var(--color-dark-neutral-800);
-  --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
-  --color-text-accent-blue-default: var(--color-blue-300);
-  --color-text-accent-blue-bold: var(--color-blue-200);
-  --color-text-accent-teal-default: var(--color-teal-300);
-  --color-text-accent-teal-bold: var(--color-teal-200);
-  --color-text-accent-green-default: var(--color-green-300);
-  --color-text-accent-green-bold: var(--color-green-200);
-  --color-text-accent-brown-default: var(--color-brown-300);
-  --color-text-accent-brown-bold: var(--color-brown-200);
-  --color-text-accent-yellow-default: var(--color-yellow-300);
-  --color-text-accent-yellow-bold: var(--color-yellow-200);
-  --color-text-accent-orange-default: var(--color-orange-300);
-  --color-text-accent-orange-bold: var(--color-orange-200);
-  --color-text-accent-red-default: var(--color-red-300);
-  --color-text-accent-red-bold: var(--color-red-200);
-  --color-text-accent-magenta-default: var(--color-magenta-300);
-  --color-text-accent-magenta-bold: var(--color-magenta-200);
-  --color-text-accent-purple-default: var(--color-purple-300);
-  --color-text-accent-purple-bold: var(--color-purple-200);
-  --color-text-static-default: var(--color-neutral-0);
-  --color-link-default: var(--color-blue-400);
-  --color-link-pressed: var(--color-blue-300);
-  --color-link-visited-default: var(--color-purple-300);
-  --color-link-visited-hover: var(--color-purple-200);
-  --color-icon-default: var(--color-dark-neutral-1000);
-  --color-icon-subtle: var(--color-dark-neutral-800);
-  --color-icon-subtlest: var(--color-dark-neutral-600);
-  --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
-  --color-icon-inverse: var(--color-dark-neutral-100);
-  --color-icon-success: var(--color-green-500);
-  --color-icon-danger: var(--color-red-500);
-  --color-icon-information: var(--color-blue-500);
-  --color-icon-warning-default: var(--color-yellow-300);
-  --color-icon-warning-inverse: var(--color-dark-neutral-100);
-  --color-icon-accent-gray-default: var(--color-dark-neutral-600);
-  --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
-  --color-icon-accent-blue-default: var(--color-blue-500);
-  --color-icon-accent-blue-bold: var(--color-blue-400);
-  --color-icon-accent-teal-default: var(--color-teal-500);
-  --color-icon-accent-teal-bold: var(--color-teal-400);
-  --color-icon-accent-green-default: var(--color-green-500);
-  --color-icon-accent-green-bold: var(--color-green-400);
-  --color-icon-accent-brown-default: var(--color-brown-500);
-  --color-icon-accent-brown-bold: var(--color-brown-400);
-  --color-icon-accent-yellow-default: var(--color-yellow-300);
-  --color-icon-accent-yellow-bold: var(--color-yellow-200);
-  --color-icon-accent-orange-default: var(--color-orange-500);
-  --color-icon-accent-orange-bold: var(--color-orange-400);
-  --color-icon-accent-red-default: var(--color-red-600);
-  --color-icon-accent-red-bold: var(--color-red-500);
-  --color-icon-accent-magenta-default: var(--color-magenta-500);
-  --color-icon-accent-magenta-bold: var(--color-magenta-400);
-  --color-icon-accent-purple-default: var(--color-purple-500);
-  --color-icon-accent-purple-bold: var(--color-purple-400);
-  --color-icon-static-default: var(--color-neutral-0);
-  --color-border-default: var(--color-dark-neutral-alpha-300-a);
-  --color-border-bold: var(--color-dark-neutral-600);
-  --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
-  --color-border-focused: var(--color-dark-neutral-800);
-  --color-border-inverse: var(--color-dark-neutral-0);
-  --color-border-input: var(--color-dark-neutral-500);
-  --color-border-success: var(--color-green-500);
-  --color-border-information: var(--color-blue-500);
-  --color-border-danger: var(--color-red-500);
-  --color-border-warning: var(--color-yellow-500);
-  --color-border-accent-gray: var(--color-dark-neutral-600);
-  --color-border-accent-blue: var(--color-blue-500);
-  --color-border-accent-teal: var(--color-teal-500);
-  --color-border-accent-green: var(--color-green-500);
-  --color-border-accent-brown: var(--color-brown-500);
-  --color-border-accent-yellow: var(--color-yellow-500);
-  --color-border-accent-orange: var(--color-orange-500);
-  --color-border-accent-red: var(--color-red-500);
-  --color-border-accent-magenta: var(--color-magenta-500);
-  --color-border-accent-purple: var(--color-purple-500);
-  --color-background-disabled-default: var(--color-dark-neutral-alpha-300-a);
-  --color-background-input-default: var(--color-dark-neutral-200); /** Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. */
-  --color-background-input-hovered: var(--color-dark-neutral-300); /** Hovered state for color.background.input */
-  --color-background-input-pressed: var(--color-dark-neutral-200); /** Pressed state for color.background.input */
-  --color-background-information-default: var(--color-blue-1000);
-  --color-background-information-hover: var(--color-blue-900);
-  --color-background-information-pressed: var(--color-blue-800);
-  --color-background-information-bolder-default: var(--color-blue-400);
-  --color-background-information-bolder-hover: var(--color-blue-300);
-  --color-background-information-bolder-pressed: var(--color-blue-200);
-  --color-background-success-default: var(--color-green-1000);
-  --color-background-success-hover: var(--color-green-900);
-  --color-background-success-pressed: var(--color-green-800);
-  --color-background-success-bolder-default: var(--color-green-400);
-  --color-background-success-bolder-hover: var(--color-green-300);
-  --color-background-success-bolder-pressed: var(--color-green-200);
-  --color-background-danger-default: var(--color-red-1000);
-  --color-background-danger-hover: var(--color-red-900);
-  --color-background-danger-pressed: var(--color-red-800);
-  --color-background-danger-bolder-default: var(--color-red-400);
-  --color-background-danger-bolder-hover: var(--color-red-300);
-  --color-background-danger-bolder-pressed: var(--color-red-200);
-  --color-background-warning-default: var(--color-yellow-1000);
-  --color-background-warning-hover: var(--color-yellow-900);
-  --color-background-warning-pressed: var(--color-yellow-800);
-  --color-background-warning-bolder-default: var(--color-yellow-400);
-  --color-background-warning-bolder-hover: var(--color-yellow-300);
-  --color-background-warning-bolder-pressed: var(--color-yellow-200);
-  --color-background-alpha-default: var(--color-dark-neutral-alpha-300-a);
-  --color-background-alpha-hover: var(--color-dark-neutral-alpha-400-a);
-  --color-background-alpha-pressed: var(--color-dark-neutral-alpha-500-a);
-  --color-background-alpha-subtle-default: var(--color-dark-neutral-alpha-200-a);
-  --color-background-alpha-subtle-hover: var(--color-dark-neutral-alpha-300-a);
-  --color-background-alpha-subtle-pressed: var(--color-dark-neutral-alpha-400-a);
-  --color-background-alpha-subtler-default: var(--color-dark-neutral-alpha-100-a);
-  --color-background-alpha-subtler-hover: var(--color-dark-neutral-alpha-200-a);
-  --color-background-alpha-subtler-pressed: var(--color-dark-neutral-alpha-300-a);
-  --color-background-alpha-subtlest-default: var(--color-transparent);
-  --color-background-alpha-subtlest-hover: var(--color-dark-neutral-alpha-250-a);
-  --color-background-alpha-subtlest-pressed: var(--color-dark-neutral-alpha-300-a);
-  --color-background-alpha-bold-default: var(--color-dark-neutral-alpha-500-a);
-  --color-background-alpha-bold-hover: var(--color-dark-neutral-alpha-400-a);
-  --color-background-alpha-bold-pressed: var(--color-dark-neutral-alpha-300-a);
-  --color-background-accent-blue-subtlest-default: var(--color-blue-1000);
-  --color-background-accent-blue-subtlest-hover: var(--color-blue-900);
-  --color-background-accent-blue-subtlest-pressed: var(--color-blue-800);
-  --color-background-accent-blue-subtler-default: var(--color-blue-900);
-  --color-background-accent-blue-subtler-hover: var(--color-blue-800);
-  --color-background-accent-blue-subtler-pressed: var(--color-blue-700);
-  --color-background-accent-blue-subtle-default: var(--color-blue-700);
-  --color-background-accent-blue-subtle-hover: var(--color-blue-600);
-  --color-background-accent-blue-subtle-pressed: var(--color-blue-500);
-  --color-background-accent-blue-bolder-default: var(--color-blue-400);
-  --color-background-accent-blue-bolder-hover: var(--color-blue-300);
-  --color-background-accent-blue-bolder-pressed: var(--color-blue-200);
-  --color-background-accent-teal-subtlest-default: var(--color-teal-1000);
-  --color-background-accent-teal-subtlest-hover: var(--color-teal-900);
-  --color-background-accent-teal-subtlest-pressed: var(--color-teal-800);
-  --color-background-accent-teal-subtler-default: var(--color-teal-900);
-  --color-background-accent-teal-subtler-hover: var(--color-teal-800);
-  --color-background-accent-teal-subtler-pressed: var(--color-teal-700);
-  --color-background-accent-teal-subtle-default: var(--color-teal-700);
-  --color-background-accent-teal-subtle-hover: var(--color-teal-600);
-  --color-background-accent-teal-subtle-pressed: var(--color-teal-500);
-  --color-background-accent-teal-bolder-default: var(--color-teal-400);
-  --color-background-accent-teal-bolder-hover: var(--color-teal-300);
-  --color-background-accent-teal-bolder-pressed: var(--color-teal-200);
-  --color-background-accent-green-subtlest-default: var(--color-green-1000);
-  --color-background-accent-green-subtlest-hover: var(--color-green-900);
-  --color-background-accent-green-subtlest-pressed: var(--color-green-800);
-  --color-background-accent-green-subtler-default: var(--color-green-900);
-  --color-background-accent-green-subtler-hover: var(--color-green-800);
-  --color-background-accent-green-subtler-pressed: var(--color-green-700);
-  --color-background-accent-green-subtle-default: var(--color-green-700);
-  --color-background-accent-green-subtle-hover: var(--color-green-600);
-  --color-background-accent-green-subtle-pressed: var(--color-green-500);
-  --color-background-accent-green-bolder-default: var(--color-green-400);
-  --color-background-accent-green-bolder-hover: var(--color-green-300);
-  --color-background-accent-green-bolder-pressed: var(--color-green-200);
-  --color-background-accent-brown-subtlest-default: var(--color-brown-1000);
-  --color-background-accent-brown-subtlest-hover: var(--color-brown-900);
-  --color-background-accent-brown-subtlest-pressed: var(--color-brown-800);
-  --color-background-accent-brown-subtler-default: var(--color-brown-900);
-  --color-background-accent-brown-subtler-hover: var(--color-brown-800);
-  --color-background-accent-brown-subtler-pressed: var(--color-brown-700);
-  --color-background-accent-brown-subtle-default: var(--color-brown-700);
-  --color-background-accent-brown-subtle-hover: var(--color-brown-600);
-  --color-background-accent-brown-subtle-pressed: var(--color-brown-500);
-  --color-background-accent-brown-bolder-default: var(--color-brown-400);
-  --color-background-accent-brown-bolder-hover: var(--color-brown-300);
-  --color-background-accent-brown-bolder-pressed: var(--color-brown-200);
-  --color-background-accent-yellow-subtlest-default: var(--color-yellow-1000);
-  --color-background-accent-yellow-subtlest-hover: var(--color-yellow-900);
-  --color-background-accent-yellow-subtlest-pressed: var(--color-yellow-800);
-  --color-background-accent-yellow-subtler-default: var(--color-yellow-900);
-  --color-background-accent-yellow-subtler-hover: var(--color-yellow-800);
-  --color-background-accent-yellow-subtler-pressed: var(--color-yellow-700);
-  --color-background-accent-yellow-subtle-default: var(--color-yellow-700);
-  --color-background-accent-yellow-subtle-hover: var(--color-yellow-600);
-  --color-background-accent-yellow-subtle-pressed: var(--color-yellow-500);
-  --color-background-accent-yellow-bolder-default: var(--color-yellow-400);
-  --color-background-accent-yellow-bolder-hover: var(--color-yellow-300);
-  --color-background-accent-yellow-bolder-pressed: var(--color-yellow-200);
-  --color-background-accent-orange-subtlest-default: var(--color-orange-1000);
-  --color-background-accent-orange-subtlest-hover: var(--color-orange-900);
-  --color-background-accent-orange-subtlest-pressed: var(--color-orange-800);
-  --color-background-accent-orange-subtler-default: var(--color-orange-900);
-  --color-background-accent-orange-subtler-hover: var(--color-orange-800);
-  --color-background-accent-orange-subtler-pressed: var(--color-orange-700);
-  --color-background-accent-orange-subtle-default: var(--color-orange-700);
-  --color-background-accent-orange-subtle-hover: var(--color-orange-600);
-  --color-background-accent-orange-subtle-pressed: var(--color-orange-500);
-  --color-background-accent-orange-bolder-default: var(--color-orange-400);
-  --color-background-accent-orange-bolder-hover: var(--color-orange-300);
-  --color-background-accent-orange-bolder-pressed: var(--color-orange-200);
-  --color-background-accent-red-subtlest-default: var(--color-red-1000);
-  --color-background-accent-red-subtlest-hover: var(--color-red-900);
-  --color-background-accent-red-subtlest-pressed: var(--color-red-800);
-  --color-background-accent-red-subtler-default: var(--color-red-900);
-  --color-background-accent-red-subtler-hover: var(--color-red-800);
-  --color-background-accent-red-subtler-pressed: var(--color-red-700);
-  --color-background-accent-red-subtle-default: var(--color-red-700);
-  --color-background-accent-red-subtle-hover: var(--color-red-600);
-  --color-background-accent-red-subtle-pressed: var(--color-red-500);
-  --color-background-accent-red-bolder-default: var(--color-red-400);
-  --color-background-accent-red-bolder-hover: var(--color-red-300);
-  --color-background-accent-red-bolder-pressed: var(--color-red-200);
-  --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
-  --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
-  --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
-  --color-background-accent-purple-subtler-default: var(--color-purple-900);
-  --color-background-accent-purple-subtler-hover: var(--color-purple-800);
-  --color-background-accent-purple-subtler-pressed: var(--color-purple-700);
-  --color-background-accent-purple-subtle-default: var(--color-purple-700);
-  --color-background-accent-purple-subtle-hover: var(--color-purple-600);
-  --color-background-accent-purple-subtle-pressed: var(--color-purple-500);
-  --color-background-accent-purple-bolder-default: var(--color-purple-400);
-  --color-background-accent-purple-bolder-hover: var(--color-purple-300);
-  --color-background-accent-purple-bolder-pressed: var(--color-purple-200);
-  --color-background-accent-magenta-subtlest-default: var(--color-magenta-1000);
-  --color-background-accent-magenta-subtlest-hover: var(--color-magenta-900);
-  --color-background-accent-magenta-subtlest-pressed: var(--color-magenta-800);
-  --color-background-accent-magenta-subtler-default: var(--color-magenta-900);
-  --color-background-accent-magenta-subtler-hover: var(--color-magenta-800);
-  --color-background-accent-magenta-subtler-pressed: var(--color-magenta-700);
-  --color-background-accent-magenta-subtle-default: var(--color-magenta-700);
-  --color-background-accent-magenta-subtle-hover: var(--color-magenta-600);
-  --color-background-accent-magenta-subtle-pressed: var(--color-magenta-500);
-  --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
-  --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
-  --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
-  --color-background-accent-gray-default: var(--color-dark-neutral-300);
-  --color-background-accent-gray-hover: var(--color-dark-neutral-400);
-  --color-background-accent-gray-pressed: var(--color-dark-neutral-500);
-  --color-background-accent-gray-subtle-default: var(--color-dark-neutral-200);
-  --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-300);
-  --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-400);
-  --color-background-accent-gray-subtler-default: var(--color-dark-neutral-100);
-  --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-200);
-  --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-300);
-  --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-0);
-  --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-100);
-  --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-200);
-  --color-background-accent-gray-bold-default: var(--color-dark-neutral-700);
-  --color-background-accent-gray-bold-hover: var(--color-dark-neutral-600);
-  --color-background-accent-gray-bold-pressed: var(--color-dark-neutral-500);
-  --color-background-accent-gray-bolder-default: var(--color-dark-neutral-900);
-  --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-800);
-  --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-700);
-  --color-background-accent-gray-boldest-default: var(--color-dark-neutral-1100);
-  --color-background-accent-gray-boldest-hover: var(--color-dark-neutral-1000);
-  --color-background-accent-gray-boldest-pressed: var(--color-dark-neutral-900);
-  --color-skeleton-default: var(--color-dark-neutral-alpha-200-a); /** Use for skeleton loading states */
-  --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a); /** Use for the pulse or shimmer effect in skeleton loading states */
-  --color-elevation-surface-default: var(--color-dark-neutral-100);
-  --color-elevation-surface-hovered: var(--color-dark-neutral-200);
-  --color-elevation-surface-pressed: var(--color-dark-neutral-300);
-  --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
-  --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
-  --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
-  --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
-  --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
-  --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
-  --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
-  --icon-size-xs: var(--spacing-200); /** 16px */
-  --icon-size-sm: var(--spacing-250); /** 20px */
-  --icon-size-md: var(--spacing-300); /** 24px */
-  --icon-size-lg: var(--spacing-400); /** 32px */
-  --icon-size-xl: var(--spacing-600); /** 48px */
-  --heading-xs: var(--font-weight-semibold) var(--text-xs)/var(--leading-sm) var(--font-archivo);
-  --heading-sm: var(--font-weight-semibold) var(--text-sm)/var(--leading-md) var(--font-archivo);
-  --heading-md: var(--font-weight-semibold) var(--text-md)/var(--leading-lg) var(--font-archivo);
-  --heading-lg: var(--font-weight-semibold) var(--text-lg)/var(--leading-xl) var(--font-archivo);
-  --heading-xl: var(--font-weight-semibold) var(--text-xl)/var(--leading-2xl) var(--font-archivo);
-  --heading-2xl: var(--font-weight-semibold) var(--text-2xl)/var(--leading-3xl) var(--font-archivo);
-  --heading-3xl: var(--font-weight-semibold) var(--text-3xl)/var(--leading-5xl) var(--font-archivo);
-  --heading-4xl: var(--font-weight-semibold) var(--text-4xl)/var(--leading-6xl) var(--font-archivo);
-  --heading-5xl: var(--font-weight-semibold) var(--text-5xl)/var(--leading-7xl) var(--font-archivo);
-  --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-md) var(--font-archivo);
-  --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-lg) var(--font-archivo);
-  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-xl) var(--font-archivo);
-  --color-text-selected: var(--color-brand-400);
-  --color-text-brand-default: var(--color-brand-400);
-  --color-text-brand-bold: var(--color-brand-300);
-  --color-icon-selected: var(--color-brand-400);
-  --color-icon-brand-default: var(--color-brand-400);
-  --color-icon-brand-bold: var(--color-brand-300);
-  --color-border-selected: var(--color-brand-400);
-  --color-border-brand: var(--color-brand-400);
-  --color-background-selected-default: var(--color-brand-1000); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
-  --color-background-selected-hovered: var(--color-brand-900); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
-  --color-background-selected-pressed: var(--color-brand-800); /** Use for the background of elements in a selected state, such as in opened dropdown buttons. */
-  --color-background-selected-bold-default: var(--color-brand-400); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
-  --color-background-selected-bold-hovered: var(--color-brand-300); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
-  --color-background-selected-bold-pressed: var(--color-brand-200); /** Use for the backgrounds of elements in a selected state, such as checkboxes and radio buttons. */
-  --color-background-brand-subtlest-default: var(--color-brand-1000);
-  --color-background-brand-subtlest-hover: var(--color-brand-900);
-  --color-background-brand-subtlest-pressed: var(--color-brand-800);
-  --color-background-brand-subtler-default: var(--color-brand-900);
-  --color-background-brand-subtler-hover: var(--color-brand-800);
-  --color-background-brand-subtler-pressed: var(--color-brand-700);
-  --color-background-brand-subtle-default: var(--color-brand-700);
-  --color-background-brand-subtle-hover: var(--color-brand-600);
-  --color-background-brand-subtle-pressed: var(--color-brand-500);
-  --color-background-brand-bolder-default: var(--color-brand-300);
-  --color-background-brand-bolder-hover: var(--color-brand-200);
-  --color-background-brand-bolder-pressed: var(--color-brand-100);
-  --color-background-brand-boldest-default: var(--color-brand-100);
-  --color-background-brand-boldest-hover: var(--color-brand-200);
-  --color-background-brand-boldest-pressed: var(--color-brand-300);
-  --color-background-static-default: var(--color-brand-800);
-}
-
-@utility text-* {
-  color: --value(--color-text-*);
-}
-
-@utility text-heading-* {
-  font: --value(--heading-*);
-}
-
-@utility text-body-* {
-  font: --value(--body-*);
-}
-
-@utility bg-* {
-  background-color: --value(--color-background-*);
-}
-
-@utility bg-elevation-* {
-  background-color: --value(--color-elevation-*);
-}
-
-@utility border-* {
-  border-color: --value(--color-border-*);
-}
-
-@utility icon-* {
-  color: --value(--color-icon-*);
-}
-
-@utility p-spacing-0 {
-  padding: var(--spacing-0);
-}
-
-@utility px-spacing-0 {
-  padding-inline: var(--spacing-0);
-}
-
-@utility py-spacing-0 {
-  padding-block: var(--spacing-0);
-}
-
-@utility pt-spacing-0 {
-  padding-top: var(--spacing-0);
-}
-
-@utility pr-spacing-0 {
-  padding-right: var(--spacing-0);
-}
-
-@utility pb-spacing-0 {
-  padding-bottom: var(--spacing-0);
-}
-
-@utility pl-spacing-0 {
-  padding-left: var(--spacing-0);
-}
-
-@utility m-spacing-0 {
-  margin: var(--spacing-0);
-}
-
-@utility mx-spacing-0 {
-  margin-inline: var(--spacing-0);
-}
-
-@utility my-spacing-0 {
-  margin-block: var(--spacing-0);
-}
-
-@utility mt-spacing-0 {
-  margin-top: var(--spacing-0);
-}
-
-@utility mr-spacing-0 {
-  margin-right: var(--spacing-0);
-}
-
-@utility mb-spacing-0 {
-  margin-bottom: var(--spacing-0);
-}
-
-@utility ml-spacing-0 {
-  margin-left: var(--spacing-0);
-}
-
-@utility gap-spacing-0 {
-  gap: var(--spacing-0);
-}
-
-@utility gap-x-spacing-0 {
-  column-gap: var(--spacing-0);
-}
-
-@utility gap-y-spacing-0 {
-  row-gap: var(--spacing-0);
-}
-
-@utility p-spacing-25 {
-  padding: var(--spacing-25);
-}
-
-@utility px-spacing-25 {
-  padding-inline: var(--spacing-25);
-}
-
-@utility py-spacing-25 {
-  padding-block: var(--spacing-25);
-}
-
-@utility pt-spacing-25 {
-  padding-top: var(--spacing-25);
-}
-
-@utility pr-spacing-25 {
-  padding-right: var(--spacing-25);
-}
-
-@utility pb-spacing-25 {
-  padding-bottom: var(--spacing-25);
-}
-
-@utility pl-spacing-25 {
-  padding-left: var(--spacing-25);
-}
-
-@utility m-spacing-25 {
-  margin: var(--spacing-25);
-}
-
-@utility mx-spacing-25 {
-  margin-inline: var(--spacing-25);
-}
-
-@utility my-spacing-25 {
-  margin-block: var(--spacing-25);
-}
-
-@utility mt-spacing-25 {
-  margin-top: var(--spacing-25);
-}
-
-@utility mr-spacing-25 {
-  margin-right: var(--spacing-25);
-}
-
-@utility mb-spacing-25 {
-  margin-bottom: var(--spacing-25);
-}
-
-@utility ml-spacing-25 {
-  margin-left: var(--spacing-25);
-}
-
-@utility gap-spacing-25 {
-  gap: var(--spacing-25);
-}
-
-@utility gap-x-spacing-25 {
-  column-gap: var(--spacing-25);
-}
-
-@utility gap-y-spacing-25 {
-  row-gap: var(--spacing-25);
-}
-
-@utility p-spacing-50 {
-  padding: var(--spacing-50);
-}
-
-@utility px-spacing-50 {
-  padding-inline: var(--spacing-50);
-}
-
-@utility py-spacing-50 {
-  padding-block: var(--spacing-50);
-}
-
-@utility pt-spacing-50 {
-  padding-top: var(--spacing-50);
-}
-
-@utility pr-spacing-50 {
-  padding-right: var(--spacing-50);
-}
-
-@utility pb-spacing-50 {
-  padding-bottom: var(--spacing-50);
-}
-
-@utility pl-spacing-50 {
-  padding-left: var(--spacing-50);
-}
-
-@utility m-spacing-50 {
-  margin: var(--spacing-50);
-}
-
-@utility mx-spacing-50 {
-  margin-inline: var(--spacing-50);
-}
-
-@utility my-spacing-50 {
-  margin-block: var(--spacing-50);
-}
-
-@utility mt-spacing-50 {
-  margin-top: var(--spacing-50);
-}
-
-@utility mr-spacing-50 {
-  margin-right: var(--spacing-50);
-}
-
-@utility mb-spacing-50 {
-  margin-bottom: var(--spacing-50);
-}
-
-@utility ml-spacing-50 {
-  margin-left: var(--spacing-50);
-}
-
-@utility gap-spacing-50 {
-  gap: var(--spacing-50);
-}
-
-@utility gap-x-spacing-50 {
-  column-gap: var(--spacing-50);
-}
-
-@utility gap-y-spacing-50 {
-  row-gap: var(--spacing-50);
-}
-
-@utility p-spacing-75 {
-  padding: var(--spacing-75);
-}
-
-@utility px-spacing-75 {
-  padding-inline: var(--spacing-75);
-}
-
-@utility py-spacing-75 {
-  padding-block: var(--spacing-75);
-}
-
-@utility pt-spacing-75 {
-  padding-top: var(--spacing-75);
-}
-
-@utility pr-spacing-75 {
-  padding-right: var(--spacing-75);
-}
-
-@utility pb-spacing-75 {
-  padding-bottom: var(--spacing-75);
-}
-
-@utility pl-spacing-75 {
-  padding-left: var(--spacing-75);
-}
-
-@utility m-spacing-75 {
-  margin: var(--spacing-75);
-}
-
-@utility mx-spacing-75 {
-  margin-inline: var(--spacing-75);
-}
-
-@utility my-spacing-75 {
-  margin-block: var(--spacing-75);
-}
-
-@utility mt-spacing-75 {
-  margin-top: var(--spacing-75);
-}
-
-@utility mr-spacing-75 {
-  margin-right: var(--spacing-75);
-}
-
-@utility mb-spacing-75 {
-  margin-bottom: var(--spacing-75);
-}
-
-@utility ml-spacing-75 {
-  margin-left: var(--spacing-75);
-}
-
-@utility gap-spacing-75 {
-  gap: var(--spacing-75);
-}
-
-@utility gap-x-spacing-75 {
-  column-gap: var(--spacing-75);
-}
-
-@utility gap-y-spacing-75 {
-  row-gap: var(--spacing-75);
-}
-
-@utility p-spacing-100 {
-  padding: var(--spacing-100);
-}
-
-@utility px-spacing-100 {
-  padding-inline: var(--spacing-100);
-}
-
-@utility py-spacing-100 {
-  padding-block: var(--spacing-100);
-}
-
-@utility pt-spacing-100 {
-  padding-top: var(--spacing-100);
-}
-
-@utility pr-spacing-100 {
-  padding-right: var(--spacing-100);
-}
-
-@utility pb-spacing-100 {
-  padding-bottom: var(--spacing-100);
-}
-
-@utility pl-spacing-100 {
-  padding-left: var(--spacing-100);
-}
-
-@utility m-spacing-100 {
-  margin: var(--spacing-100);
-}
-
-@utility mx-spacing-100 {
-  margin-inline: var(--spacing-100);
-}
-
-@utility my-spacing-100 {
-  margin-block: var(--spacing-100);
-}
-
-@utility mt-spacing-100 {
-  margin-top: var(--spacing-100);
-}
-
-@utility mr-spacing-100 {
-  margin-right: var(--spacing-100);
-}
-
-@utility mb-spacing-100 {
-  margin-bottom: var(--spacing-100);
-}
-
-@utility ml-spacing-100 {
-  margin-left: var(--spacing-100);
-}
-
-@utility gap-spacing-100 {
-  gap: var(--spacing-100);
-}
-
-@utility gap-x-spacing-100 {
-  column-gap: var(--spacing-100);
-}
-
-@utility gap-y-spacing-100 {
-  row-gap: var(--spacing-100);
-}
-
-@utility p-spacing-150 {
-  padding: var(--spacing-150);
-}
-
-@utility px-spacing-150 {
-  padding-inline: var(--spacing-150);
-}
-
-@utility py-spacing-150 {
-  padding-block: var(--spacing-150);
-}
-
-@utility pt-spacing-150 {
-  padding-top: var(--spacing-150);
-}
-
-@utility pr-spacing-150 {
-  padding-right: var(--spacing-150);
-}
-
-@utility pb-spacing-150 {
-  padding-bottom: var(--spacing-150);
-}
-
-@utility pl-spacing-150 {
-  padding-left: var(--spacing-150);
-}
-
-@utility m-spacing-150 {
-  margin: var(--spacing-150);
-}
-
-@utility mx-spacing-150 {
-  margin-inline: var(--spacing-150);
-}
-
-@utility my-spacing-150 {
-  margin-block: var(--spacing-150);
-}
-
-@utility mt-spacing-150 {
-  margin-top: var(--spacing-150);
-}
-
-@utility mr-spacing-150 {
-  margin-right: var(--spacing-150);
-}
-
-@utility mb-spacing-150 {
-  margin-bottom: var(--spacing-150);
-}
-
-@utility ml-spacing-150 {
-  margin-left: var(--spacing-150);
-}
-
-@utility gap-spacing-150 {
-  gap: var(--spacing-150);
-}
-
-@utility gap-x-spacing-150 {
-  column-gap: var(--spacing-150);
-}
-
-@utility gap-y-spacing-150 {
-  row-gap: var(--spacing-150);
-}
-
-@utility p-spacing-200 {
-  padding: var(--spacing-200);
-}
-
-@utility px-spacing-200 {
-  padding-inline: var(--spacing-200);
-}
-
-@utility py-spacing-200 {
-  padding-block: var(--spacing-200);
-}
-
-@utility pt-spacing-200 {
-  padding-top: var(--spacing-200);
-}
-
-@utility pr-spacing-200 {
-  padding-right: var(--spacing-200);
-}
-
-@utility pb-spacing-200 {
-  padding-bottom: var(--spacing-200);
-}
-
-@utility pl-spacing-200 {
-  padding-left: var(--spacing-200);
-}
-
-@utility m-spacing-200 {
-  margin: var(--spacing-200);
-}
-
-@utility mx-spacing-200 {
-  margin-inline: var(--spacing-200);
-}
-
-@utility my-spacing-200 {
-  margin-block: var(--spacing-200);
-}
-
-@utility mt-spacing-200 {
-  margin-top: var(--spacing-200);
-}
-
-@utility mr-spacing-200 {
-  margin-right: var(--spacing-200);
-}
-
-@utility mb-spacing-200 {
-  margin-bottom: var(--spacing-200);
-}
-
-@utility ml-spacing-200 {
-  margin-left: var(--spacing-200);
-}
-
-@utility gap-spacing-200 {
-  gap: var(--spacing-200);
-}
-
-@utility gap-x-spacing-200 {
-  column-gap: var(--spacing-200);
-}
-
-@utility gap-y-spacing-200 {
-  row-gap: var(--spacing-200);
-}
-
-@utility p-spacing-250 {
-  padding: var(--spacing-250);
-}
-
-@utility px-spacing-250 {
-  padding-inline: var(--spacing-250);
-}
-
-@utility py-spacing-250 {
-  padding-block: var(--spacing-250);
-}
-
-@utility pt-spacing-250 {
-  padding-top: var(--spacing-250);
-}
-
-@utility pr-spacing-250 {
-  padding-right: var(--spacing-250);
-}
-
-@utility pb-spacing-250 {
-  padding-bottom: var(--spacing-250);
-}
-
-@utility pl-spacing-250 {
-  padding-left: var(--spacing-250);
-}
-
-@utility m-spacing-250 {
-  margin: var(--spacing-250);
-}
-
-@utility mx-spacing-250 {
-  margin-inline: var(--spacing-250);
-}
-
-@utility my-spacing-250 {
-  margin-block: var(--spacing-250);
-}
-
-@utility mt-spacing-250 {
-  margin-top: var(--spacing-250);
-}
-
-@utility mr-spacing-250 {
-  margin-right: var(--spacing-250);
-}
-
-@utility mb-spacing-250 {
-  margin-bottom: var(--spacing-250);
-}
-
-@utility ml-spacing-250 {
-  margin-left: var(--spacing-250);
-}
-
-@utility gap-spacing-250 {
-  gap: var(--spacing-250);
-}
-
-@utility gap-x-spacing-250 {
-  column-gap: var(--spacing-250);
-}
-
-@utility gap-y-spacing-250 {
-  row-gap: var(--spacing-250);
-}
-
-@utility p-spacing-300 {
-  padding: var(--spacing-300);
-}
-
-@utility px-spacing-300 {
-  padding-inline: var(--spacing-300);
-}
-
-@utility py-spacing-300 {
-  padding-block: var(--spacing-300);
-}
-
-@utility pt-spacing-300 {
-  padding-top: var(--spacing-300);
-}
-
-@utility pr-spacing-300 {
-  padding-right: var(--spacing-300);
-}
-
-@utility pb-spacing-300 {
-  padding-bottom: var(--spacing-300);
-}
-
-@utility pl-spacing-300 {
-  padding-left: var(--spacing-300);
-}
-
-@utility m-spacing-300 {
-  margin: var(--spacing-300);
-}
-
-@utility mx-spacing-300 {
-  margin-inline: var(--spacing-300);
-}
-
-@utility my-spacing-300 {
-  margin-block: var(--spacing-300);
-}
-
-@utility mt-spacing-300 {
-  margin-top: var(--spacing-300);
-}
-
-@utility mr-spacing-300 {
-  margin-right: var(--spacing-300);
-}
-
-@utility mb-spacing-300 {
-  margin-bottom: var(--spacing-300);
-}
-
-@utility ml-spacing-300 {
-  margin-left: var(--spacing-300);
-}
-
-@utility gap-spacing-300 {
-  gap: var(--spacing-300);
-}
-
-@utility gap-x-spacing-300 {
-  column-gap: var(--spacing-300);
-}
-
-@utility gap-y-spacing-300 {
-  row-gap: var(--spacing-300);
-}
-
-@utility p-spacing-400 {
-  padding: var(--spacing-400);
-}
-
-@utility px-spacing-400 {
-  padding-inline: var(--spacing-400);
-}
-
-@utility py-spacing-400 {
-  padding-block: var(--spacing-400);
-}
-
-@utility pt-spacing-400 {
-  padding-top: var(--spacing-400);
-}
-
-@utility pr-spacing-400 {
-  padding-right: var(--spacing-400);
-}
-
-@utility pb-spacing-400 {
-  padding-bottom: var(--spacing-400);
-}
-
-@utility pl-spacing-400 {
-  padding-left: var(--spacing-400);
-}
-
-@utility m-spacing-400 {
-  margin: var(--spacing-400);
-}
-
-@utility mx-spacing-400 {
-  margin-inline: var(--spacing-400);
-}
-
-@utility my-spacing-400 {
-  margin-block: var(--spacing-400);
-}
-
-@utility mt-spacing-400 {
-  margin-top: var(--spacing-400);
-}
-
-@utility mr-spacing-400 {
-  margin-right: var(--spacing-400);
-}
-
-@utility mb-spacing-400 {
-  margin-bottom: var(--spacing-400);
-}
-
-@utility ml-spacing-400 {
-  margin-left: var(--spacing-400);
-}
-
-@utility gap-spacing-400 {
-  gap: var(--spacing-400);
-}
-
-@utility gap-x-spacing-400 {
-  column-gap: var(--spacing-400);
-}
-
-@utility gap-y-spacing-400 {
-  row-gap: var(--spacing-400);
-}
-
-@utility p-spacing-500 {
-  padding: var(--spacing-500);
-}
-
-@utility px-spacing-500 {
-  padding-inline: var(--spacing-500);
-}
-
-@utility py-spacing-500 {
-  padding-block: var(--spacing-500);
-}
-
-@utility pt-spacing-500 {
-  padding-top: var(--spacing-500);
-}
-
-@utility pr-spacing-500 {
-  padding-right: var(--spacing-500);
-}
-
-@utility pb-spacing-500 {
-  padding-bottom: var(--spacing-500);
-}
-
-@utility pl-spacing-500 {
-  padding-left: var(--spacing-500);
-}
-
-@utility m-spacing-500 {
-  margin: var(--spacing-500);
-}
-
-@utility mx-spacing-500 {
-  margin-inline: var(--spacing-500);
-}
-
-@utility my-spacing-500 {
-  margin-block: var(--spacing-500);
-}
-
-@utility mt-spacing-500 {
-  margin-top: var(--spacing-500);
-}
-
-@utility mr-spacing-500 {
-  margin-right: var(--spacing-500);
-}
-
-@utility mb-spacing-500 {
-  margin-bottom: var(--spacing-500);
-}
-
-@utility ml-spacing-500 {
-  margin-left: var(--spacing-500);
-}
-
-@utility gap-spacing-500 {
-  gap: var(--spacing-500);
-}
-
-@utility gap-x-spacing-500 {
-  column-gap: var(--spacing-500);
-}
-
-@utility gap-y-spacing-500 {
-  row-gap: var(--spacing-500);
-}
-
-@utility p-spacing-600 {
-  padding: var(--spacing-600);
-}
-
-@utility px-spacing-600 {
-  padding-inline: var(--spacing-600);
-}
-
-@utility py-spacing-600 {
-  padding-block: var(--spacing-600);
-}
-
-@utility pt-spacing-600 {
-  padding-top: var(--spacing-600);
-}
-
-@utility pr-spacing-600 {
-  padding-right: var(--spacing-600);
-}
-
-@utility pb-spacing-600 {
-  padding-bottom: var(--spacing-600);
-}
-
-@utility pl-spacing-600 {
-  padding-left: var(--spacing-600);
-}
-
-@utility m-spacing-600 {
-  margin: var(--spacing-600);
-}
-
-@utility mx-spacing-600 {
-  margin-inline: var(--spacing-600);
-}
-
-@utility my-spacing-600 {
-  margin-block: var(--spacing-600);
-}
-
-@utility mt-spacing-600 {
-  margin-top: var(--spacing-600);
-}
-
-@utility mr-spacing-600 {
-  margin-right: var(--spacing-600);
-}
-
-@utility mb-spacing-600 {
-  margin-bottom: var(--spacing-600);
-}
-
-@utility ml-spacing-600 {
-  margin-left: var(--spacing-600);
-}
-
-@utility gap-spacing-600 {
-  gap: var(--spacing-600);
-}
-
-@utility gap-x-spacing-600 {
-  column-gap: var(--spacing-600);
-}
-
-@utility gap-y-spacing-600 {
-  row-gap: var(--spacing-600);
-}
-
-@utility p-spacing-800 {
-  padding: var(--spacing-800);
-}
-
-@utility px-spacing-800 {
-  padding-inline: var(--spacing-800);
-}
-
-@utility py-spacing-800 {
-  padding-block: var(--spacing-800);
-}
-
-@utility pt-spacing-800 {
-  padding-top: var(--spacing-800);
-}
-
-@utility pr-spacing-800 {
-  padding-right: var(--spacing-800);
-}
-
-@utility pb-spacing-800 {
-  padding-bottom: var(--spacing-800);
-}
-
-@utility pl-spacing-800 {
-  padding-left: var(--spacing-800);
-}
-
-@utility m-spacing-800 {
-  margin: var(--spacing-800);
-}
-
-@utility mx-spacing-800 {
-  margin-inline: var(--spacing-800);
-}
-
-@utility my-spacing-800 {
-  margin-block: var(--spacing-800);
-}
-
-@utility mt-spacing-800 {
-  margin-top: var(--spacing-800);
-}
-
-@utility mr-spacing-800 {
-  margin-right: var(--spacing-800);
-}
-
-@utility mb-spacing-800 {
-  margin-bottom: var(--spacing-800);
-}
-
-@utility ml-spacing-800 {
-  margin-left: var(--spacing-800);
-}
-
-@utility gap-spacing-800 {
-  gap: var(--spacing-800);
-}
-
-@utility gap-x-spacing-800 {
-  column-gap: var(--spacing-800);
-}
-
-@utility gap-y-spacing-800 {
-  row-gap: var(--spacing-800);
-}
-
-@utility p-spacing-1000 {
-  padding: var(--spacing-1000);
-}
-
-@utility px-spacing-1000 {
-  padding-inline: var(--spacing-1000);
-}
-
-@utility py-spacing-1000 {
-  padding-block: var(--spacing-1000);
-}
-
-@utility pt-spacing-1000 {
-  padding-top: var(--spacing-1000);
-}
-
-@utility pr-spacing-1000 {
-  padding-right: var(--spacing-1000);
-}
-
-@utility pb-spacing-1000 {
-  padding-bottom: var(--spacing-1000);
-}
-
-@utility pl-spacing-1000 {
-  padding-left: var(--spacing-1000);
-}
-
-@utility m-spacing-1000 {
-  margin: var(--spacing-1000);
-}
-
-@utility mx-spacing-1000 {
-  margin-inline: var(--spacing-1000);
-}
-
-@utility my-spacing-1000 {
-  margin-block: var(--spacing-1000);
-}
-
-@utility mt-spacing-1000 {
-  margin-top: var(--spacing-1000);
-}
-
-@utility mr-spacing-1000 {
-  margin-right: var(--spacing-1000);
-}
-
-@utility mb-spacing-1000 {
-  margin-bottom: var(--spacing-1000);
-}
-
-@utility ml-spacing-1000 {
-  margin-left: var(--spacing-1000);
-}
-
-@utility gap-spacing-1000 {
-  gap: var(--spacing-1000);
-}
-
-@utility gap-x-spacing-1000 {
-  column-gap: var(--spacing-1000);
-}
-
-@utility gap-y-spacing-1000 {
-  row-gap: var(--spacing-1000);
-}
-
-@utility -m-spacing-25 {
-  margin: var(--spacing-negative-25);
-}
-
-@utility -mx-spacing-25 {
-  margin-inline: var(--spacing-negative-25);
-}
-
-@utility -my-spacing-25 {
-  margin-block: var(--spacing-negative-25);
-}
-
-@utility -mt-spacing-25 {
-  margin-top: var(--spacing-negative-25);
-}
-
-@utility -mr-spacing-25 {
-  margin-right: var(--spacing-negative-25);
-}
-
-@utility -mb-spacing-25 {
-  margin-bottom: var(--spacing-negative-25);
-}
-
-@utility -ml-spacing-25 {
-  margin-left: var(--spacing-negative-25);
-}
-
-@utility -m-spacing-50 {
-  margin: var(--spacing-negative-50);
-}
-
-@utility -mx-spacing-50 {
-  margin-inline: var(--spacing-negative-50);
-}
-
-@utility -my-spacing-50 {
-  margin-block: var(--spacing-negative-50);
-}
-
-@utility -mt-spacing-50 {
-  margin-top: var(--spacing-negative-50);
-}
-
-@utility -mr-spacing-50 {
-  margin-right: var(--spacing-negative-50);
-}
-
-@utility -mb-spacing-50 {
-  margin-bottom: var(--spacing-negative-50);
-}
-
-@utility -ml-spacing-50 {
-  margin-left: var(--spacing-negative-50);
-}
-
-@utility -m-spacing-75 {
-  margin: var(--spacing-negative-75);
-}
-
-@utility -mx-spacing-75 {
-  margin-inline: var(--spacing-negative-75);
-}
-
-@utility -my-spacing-75 {
-  margin-block: var(--spacing-negative-75);
-}
-
-@utility -mt-spacing-75 {
-  margin-top: var(--spacing-negative-75);
-}
-
-@utility -mr-spacing-75 {
-  margin-right: var(--spacing-negative-75);
-}
-
-@utility -mb-spacing-75 {
-  margin-bottom: var(--spacing-negative-75);
-}
-
-@utility -ml-spacing-75 {
-  margin-left: var(--spacing-negative-75);
-}
-
-@utility -m-spacing-100 {
-  margin: var(--spacing-negative-100);
-}
-
-@utility -mx-spacing-100 {
-  margin-inline: var(--spacing-negative-100);
-}
-
-@utility -my-spacing-100 {
-  margin-block: var(--spacing-negative-100);
-}
-
-@utility -mt-spacing-100 {
-  margin-top: var(--spacing-negative-100);
-}
-
-@utility -mr-spacing-100 {
-  margin-right: var(--spacing-negative-100);
-}
-
-@utility -mb-spacing-100 {
-  margin-bottom: var(--spacing-negative-100);
-}
-
-@utility -ml-spacing-100 {
-  margin-left: var(--spacing-negative-100);
-}
-
-@utility -m-spacing-150 {
-  margin: var(--spacing-negative-150);
-}
-
-@utility -mx-spacing-150 {
-  margin-inline: var(--spacing-negative-150);
-}
-
-@utility -my-spacing-150 {
-  margin-block: var(--spacing-negative-150);
-}
-
-@utility -mt-spacing-150 {
-  margin-top: var(--spacing-negative-150);
-}
-
-@utility -mr-spacing-150 {
-  margin-right: var(--spacing-negative-150);
-}
-
-@utility -mb-spacing-150 {
-  margin-bottom: var(--spacing-negative-150);
-}
-
-@utility -ml-spacing-150 {
-  margin-left: var(--spacing-negative-150);
-}
-
-@utility -m-spacing-200 {
-  margin: var(--spacing-negative-200);
-}
-
-@utility -mx-spacing-200 {
-  margin-inline: var(--spacing-negative-200);
-}
-
-@utility -my-spacing-200 {
-  margin-block: var(--spacing-negative-200);
-}
-
-@utility -mt-spacing-200 {
-  margin-top: var(--spacing-negative-200);
-}
-
-@utility -mr-spacing-200 {
-  margin-right: var(--spacing-negative-200);
-}
-
-@utility -mb-spacing-200 {
-  margin-bottom: var(--spacing-negative-200);
-}
-
-@utility -ml-spacing-200 {
-  margin-left: var(--spacing-negative-200);
-}
-
-@utility -m-spacing-250 {
-  margin: var(--spacing-negative-250);
-}
-
-@utility -mx-spacing-250 {
-  margin-inline: var(--spacing-negative-250);
-}
-
-@utility -my-spacing-250 {
-  margin-block: var(--spacing-negative-250);
-}
-
-@utility -mt-spacing-250 {
-  margin-top: var(--spacing-negative-250);
-}
-
-@utility -mr-spacing-250 {
-  margin-right: var(--spacing-negative-250);
-}
-
-@utility -mb-spacing-250 {
-  margin-bottom: var(--spacing-negative-250);
-}
-
-@utility -ml-spacing-250 {
-  margin-left: var(--spacing-negative-250);
-}
-
-@utility -m-spacing-300 {
-  margin: var(--spacing-negative-300);
-}
-
-@utility -mx-spacing-300 {
-  margin-inline: var(--spacing-negative-300);
-}
-
-@utility -my-spacing-300 {
-  margin-block: var(--spacing-negative-300);
-}
-
-@utility -mt-spacing-300 {
-  margin-top: var(--spacing-negative-300);
-}
-
-@utility -mr-spacing-300 {
-  margin-right: var(--spacing-negative-300);
-}
-
-@utility -mb-spacing-300 {
-  margin-bottom: var(--spacing-negative-300);
-}
-
-@utility -ml-spacing-300 {
-  margin-left: var(--spacing-negative-300);
-}
-
-@utility -m-spacing-400 {
-  margin: var(--spacing-negative-400);
-}
-
-@utility -mx-spacing-400 {
-  margin-inline: var(--spacing-negative-400);
-}
-
-@utility -my-spacing-400 {
-  margin-block: var(--spacing-negative-400);
-}
-
-@utility -mt-spacing-400 {
-  margin-top: var(--spacing-negative-400);
-}
-
-@utility -mr-spacing-400 {
-  margin-right: var(--spacing-negative-400);
-}
-
-@utility -mb-spacing-400 {
-  margin-bottom: var(--spacing-negative-400);
-}
-
-@utility -ml-spacing-400 {
-  margin-left: var(--spacing-negative-400);
-}