@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/tokens.css

@@ -0,0 +1,1016 @@
+@layer tokens {
+  :where(:root, :host) {
+    --oks-animations-spin: spin 1s linear infinite;
+    --oks-animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    --oks-animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --oks-animations-bounce: bounce 1s infinite;
+    --oks-aspect-ratios-square: 1 / 1;
+    --oks-aspect-ratios-landscape: 4 / 3;
+    --oks-aspect-ratios-portrait: 3 / 4;
+    --oks-aspect-ratios-wide: 16 / 9;
+    --oks-aspect-ratios-ultrawide: 18 / 5;
+    --oks-aspect-ratios-golden: 1.618 / 1;
+    --oks-blurs-sm: var(--oks-sizes-4);
+    --oks-blurs-base: var(--oks-sizes-8);
+    --oks-blurs-md: var(--oks-sizes-12);
+    --oks-blurs-lg: var(--oks-sizes-16);
+    --oks-blurs-xl: var(--oks-sizes-24);
+    --oks-blurs-2xl: var(--oks-sizes-40);
+    --oks-blurs-3xl: var(--oks-sizes-64);
+    --oks-border-widths-0: var(--oks-sizes-0);
+    --oks-border-widths-1: var(--oks-sizes-1);
+    --oks-border-widths-2: var(--oks-sizes-2);
+    --oks-border-widths-4: var(--oks-sizes-4);
+    --oks-border-widths-8: var(--oks-sizes-8);
+    --oks-border-widths-16: var(--oks-sizes-16);
+    --oks-borders-default: var(--oks-border-widths-1) solid var(--oks-colors-border);
+    --oks-borders-strong: var(--oks-border-widths-2) solid var(--oks-colors-border-bold);
+    --oks-borders-input: var(--oks-border-widths-1) solid var(--oks-colors-border-input);
+    --oks-borders-focused: var(--oks-border-widths-2) solid var(--oks-colors-border-focused);
+    --oks-borders-success: var(--oks-border-widths-1) solid var(--oks-colors-border-success);
+    --oks-borders-warning: var(--oks-border-widths-1) solid var(--oks-colors-border-warning);
+    --oks-borders-danger: var(--oks-border-widths-1) solid var(--oks-colors-border-danger);
+    --oks-borders-info: var(--oks-border-widths-1) solid var(--oks-colors-border-info);
+    --oks-borders-none: none;
+    --oks-colors-transparent: transparent;
+    --oks-colors-current: currentColor;
+    --oks-colors-inherit: inherit;
+    --oks-colors-neutral-0: #FFFFFF;
+    --oks-colors-neutral-10: #F8F8F8;
+    --oks-colors-neutral-20: #F0F1F2;
+    --oks-colors-neutral-30: #DDDEE1;
+    --oks-colors-neutral-40: #B7B9BE;
+    --oks-colors-neutral-50: #8C8F97;
+    --oks-colors-neutral-60: #7D818A;
+    --oks-colors-neutral-70: #6B6E76;
+    --oks-colors-neutral-80: #505258;
+    --oks-colors-neutral-90: #3B3D42;
+    --oks-colors-neutral-100: #292A2E;
+    --oks-colors-neutral-110: #1E1F21;
+    --oks-colors-neutral-a-10: #17171708;
+    --oks-colors-neutral-a-20: #1717170F;
+    --oks-colors-neutral-a-30: #17171724;
+    --oks-colors-neutral-a-40: #1717174A;
+    --oks-colors-neutral-a-50: #17171775;
+    --oks-colors-dark-neutral-0: #18191A;
+    --oks-colors-dark-neutral-10: #1F1F21;
+    --oks-colors-dark-neutral-20: #242528;
+    --oks-colors-dark-neutral-25: #2B2C2F;
+    --oks-colors-dark-neutral-30: #303134;
+    --oks-colors-dark-neutral-35: #3D3F43;
+    --oks-colors-dark-neutral-40: #4B4D51;
+    --oks-colors-dark-neutral-50: #63666B;
+    --oks-colors-dark-neutral-60: #7E8188;
+    --oks-colors-dark-neutral-70: #96999E;
+    --oks-colors-dark-neutral-80: #A9ABAF;
+    --oks-colors-dark-neutral-90: #BFC1C4;
+    --oks-colors-dark-neutral-100: #CECFD2;
+    --oks-colors-dark-neutral-110: #E2E3E4;
+    --oks-colors-dark-neutral-a-10: #BDBDBD0A;
+    --oks-colors-dark-neutral-a-20: #CECED912;
+    --oks-colors-dark-neutral-a-25: #D9DAE71A;
+    --oks-colors-dark-neutral-a-30: #E3E4F21F;
+    --oks-colors-dark-neutral-a-35: #E8EDFD2E;
+    --oks-colors-dark-neutral-a-40: #E5E9F640;
+    --oks-colors-dark-neutral-a-50: #E9F0FB5C;
+    --oks-colors-dark-neutral-a--10: #01040475;
+    --oks-colors-gray-10: #fbfcfd;
+    --oks-colors-gray-20: #e0e1e2;
+    --oks-colors-gray-30: #c5c5c6;
+    --oks-colors-gray-40: #a9aaab;
+    --oks-colors-gray-50: #8e8f8f;
+    --oks-colors-gray-60: #737374;
+    --oks-colors-gray-70: #585858;
+    --oks-colors-gray-80: #3c3d3d;
+    --oks-colors-gray-90: #212121;
+    --oks-colors-gray-100: #060606;
+    --oks-colors-red-10: #ffeceb;
+    --oks-colors-red-20: #ffd5d2;
+    --oks-colors-red-30: #fd9891;
+    --oks-colors-red-40: #f87168;
+    --oks-colors-red-50: #f15b50;
+    --oks-colors-red-60: #e2483d;
+    --oks-colors-red-70: #c9372c;
+    --oks-colors-red-80: #ae2e24;
+    --oks-colors-red-90: #5d1f1a;
+    --oks-colors-red-100: #42221f;
+    --oks-colors-orange-10: #fff5db;
+    --oks-colors-orange-20: #fce4a6;
+    --oks-colors-orange-30: #fbc828;
+    --oks-colors-orange-40: #fca700;
+    --oks-colors-orange-50: #f68909;
+    --oks-colors-orange-60: #e06c00;
+    --oks-colors-orange-70: #bd5b00;
+    --oks-colors-orange-80: #9e4c00;
+    --oks-colors-orange-90: #693200;
+    --oks-colors-orange-100: #3a2c1f;
+    --oks-colors-yellow-10: #fefbf3;
+    --oks-colors-yellow-20: #f9ecc4;
+    --oks-colors-yellow-30: #f4dd96;
+    --oks-colors-yellow-40: #efce67;
+    --oks-colors-yellow-50: #eabf39;
+    --oks-colors-yellow-60: #e5b00a;
+    --oks-colors-yellow-70: #b68e0f;
+    --oks-colors-yellow-80: #886c14;
+    --oks-colors-yellow-90: #594918;
+    --oks-colors-yellow-100: #2a271d;
+    --oks-colors-lime-10: #efffd6;
+    --oks-colors-lime-20: #d3f1a7;
+    --oks-colors-lime-30: #b3df72;
+    --oks-colors-lime-40: #94c748;
+    --oks-colors-lime-50: #82b536;
+    --oks-colors-lime-60: #6a9a23;
+    --oks-colors-lime-70: #5b7f24;
+    --oks-colors-lime-80: #4c6b1f;
+    --oks-colors-lime-90: #37471f;
+    --oks-colors-lime-100: #28311b;
+    --oks-colors-green-10: #dcfff1;
+    --oks-colors-green-20: #baf3db;
+    --oks-colors-green-30: #7ee2b8;
+    --oks-colors-green-40: #4bce97;
+    --oks-colors-green-50: #2abb7f;
+    --oks-colors-green-60: #22a06b;
+    --oks-colors-green-70: #1f845a;
+    --oks-colors-green-80: #216e4e;
+    --oks-colors-green-90: #164b35;
+    --oks-colors-green-100: #1c3329;
+    --oks-colors-teal-10: #e7f9ff;
+    --oks-colors-teal-20: #c6edfb;
+    --oks-colors-teal-30: #9dd9ee;
+    --oks-colors-teal-40: #6cc3e0;
+    --oks-colors-teal-50: #42b2d7;
+    --oks-colors-teal-60: #2898bd;
+    --oks-colors-teal-70: #227d9b;
+    --oks-colors-teal-80: #206a83;
+    --oks-colors-teal-90: #164555;
+    --oks-colors-teal-100: #1e3137;
+    --oks-colors-blue-10: #e9f2fe;
+    --oks-colors-blue-20: #cfe1fd;
+    --oks-colors-blue-30: #8fb8f6;
+    --oks-colors-blue-40: #669df1;
+    --oks-colors-blue-50: #4688ec;
+    --oks-colors-blue-60: #357de8;
+    --oks-colors-blue-70: #1868db;
+    --oks-colors-blue-80: #1558bc;
+    --oks-colors-blue-90: #123263;
+    --oks-colors-blue-100: #1c2b42;
+    --oks-colors-indigo-10: #f1eff7;
+    --oks-colors-indigo-20: #e7e3fa;
+    --oks-colors-indigo-30: #cbc4f2;
+    --oks-colors-indigo-40: #afa5e8;
+    --oks-colors-indigo-50: #9287d8;
+    --oks-colors-indigo-60: #7665d1;
+    --oks-colors-indigo-70: #5e519e;
+    --oks-colors-indigo-80: #453c7b;
+    --oks-colors-indigo-90: #2e2c40;
+    --oks-colors-indigo-100: #18161d;
+    --oks-colors-purple-10: #f8eefe;
+    --oks-colors-purple-20: #eed7fc;
+    --oks-colors-purple-30: #d8a0f7;
+    --oks-colors-purple-40: #c97cf4;
+    --oks-colors-purple-50: #bf63f3;
+    --oks-colors-purple-60: #af59e1;
+    --oks-colors-purple-70: #964ac0;
+    --oks-colors-purple-80: #803fa5;
+    --oks-colors-purple-90: #48245d;
+    --oks-colors-purple-100: #35243f;
+    --oks-colors-magenta-10: #ffecf8;
+    --oks-colors-magenta-20: #fdd0ec;
+    --oks-colors-magenta-30: #f797d2;
+    --oks-colors-magenta-40: #e774bb;
+    --oks-colors-magenta-50: #da62ac;
+    --oks-colors-magenta-60: #cd519d;
+    --oks-colors-magenta-70: #ae4787;
+    --oks-colors-magenta-80: #943d73;
+    --oks-colors-magenta-90: #50253f;
+    --oks-colors-magenta-100: #3d2232;
+    --oks-colors-tan-10: #f5f0e6;
+    --oks-colors-tan-20: #f1e5cd;
+    --oks-colors-tan-30: #dec69a;
+    --oks-colors-tan-40: #c7a97b;
+    --oks-colors-tan-50: #ad8b65;
+    --oks-colors-tan-60: #8e704f;
+    --oks-colors-tan-70: #6b5947;
+    --oks-colors-tan-80: #4d4438;
+    --oks-colors-tan-90: #322d26;
+    --oks-colors-tan-100: #191714;
+    --oks-colors-slate-0: #FFFFFF;
+    --oks-colors-slate-1: #FAFAFA;
+    --oks-colors-slate-2: #F9F8F6;
+    --oks-colors-slate-3: #F7F5F3;
+    --oks-colors-slate-4: #F6F3EF;
+    --oks-colors-slate-5: #F4F0EB;
+    --oks-colors-slate-10: #E3E1DE;
+    --oks-colors-slate-20: #CBCAC8;
+    --oks-colors-slate-30: #AFADAB;
+    --oks-colors-slate-40: #939190;
+    --oks-colors-slate-50: #767675;
+    --oks-colors-slate-60: #5F5F5E;
+    --oks-colors-slate-70: #474747;
+    --oks-colors-slate-80: #2E2E2E;
+    --oks-colors-slate-90: #1E1E1E;
+    --oks-colors-slate-100: #000000;
+    --oks-container-size-tokens-2xs: 16rem;
+    --oks-container-size-tokens-xs: 20rem;
+    --oks-container-size-tokens-sm: 24rem;
+    --oks-container-size-tokens-md: 28rem;
+    --oks-container-size-tokens-lg: 32rem;
+    --oks-container-size-tokens-xl: 36rem;
+    --oks-container-size-tokens-2xl: 42rem;
+    --oks-container-size-tokens-3xl: 48rem;
+    --oks-container-size-tokens-4xl: 56rem;
+    --oks-container-size-tokens-5xl: 64rem;
+    --oks-container-size-tokens-6xl: 72rem;
+    --oks-container-size-tokens-7xl: 80rem;
+    --oks-container-size-tokens-8xl: 90rem;
+    --oks-durations-fastest: 50ms;
+    --oks-durations-faster: 100ms;
+    --oks-durations-fast: 150ms;
+    --oks-durations-normal: 200ms;
+    --oks-durations-slow: 300ms;
+    --oks-durations-slower: 400ms;
+    --oks-durations-slowest: 500ms;
+    --oks-easings-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --oks-easings-linear: linear;
+    --oks-easings-in: cubic-bezier(0.4, 0, 1, 1);
+    --oks-easings-out: cubic-bezier(0, 0, 0.2, 1);
+    --oks-easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --oks-font-sizes-12: var(--oks-sizes-12);
+    --oks-font-sizes-14: var(--oks-sizes-14);
+    --oks-font-sizes-16: var(--oks-sizes-16);
+    --oks-font-sizes-20: var(--oks-sizes-20);
+    --oks-font-sizes-24: var(--oks-sizes-24);
+    --oks-font-sizes-32: var(--oks-sizes-32);
+    --oks-font-sizes-40: var(--oks-sizes-40);
+    --oks-font-sizes-48: var(--oks-sizes-48);
+    --oks-font-sizes-64: var(--oks-sizes-64);
+    --oks-font-sizes-72: var(--oks-sizes-72);
+    --oks-font-sizes-80: var(--oks-sizes-80);
+    --oks-font-sizes-96: var(--oks-sizes-96);
+    --oks-font-weights-light: 300;
+    --oks-font-weights-normal: 400;
+    --oks-font-weights-medium: 500;
+    --oks-font-weights-bold: 700;
+    --oks-font-weights-black: 900;
+    --oks-fonts-heading: 'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif;
+    --oks-fonts-sans: 'IBM Plex Sans', Geneva, Tahoma, Verdana, sans-serif;
+    --oks-fonts-body: 'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif;
+    --oks-fonts-serif: 'Piazzolla Variable', 'Piazzolla', Georgia, 'Times New Roman', Times, serif;
+    --oks-fonts-mono: 'IBM Plex Mono', Andale Mono, monaco, Consolas, Lucida Console, monospace;
+    --oks-letter-spacings-tighter: -0.05em;
+    --oks-letter-spacings-tight: -0.025em;
+    --oks-letter-spacings-normal: 0em;
+    --oks-letter-spacings-wide: 0.025em;
+    --oks-letter-spacings-wider: 0.05em;
+    --oks-letter-spacings-widest: 0.1em;
+    --oks-line-heights-none: 1;
+    --oks-line-heights-tight: calc(1em + 0.25rem);
+    --oks-line-heights-default: calc(1em + 0.5rem);
+    --oks-line-heights-loose: calc(1em + 0.75rem);
+    --oks-numeric-sizes-0: 0;
+    --oks-numeric-sizes-1: 0.0625rem;
+    --oks-numeric-sizes-2: 0.125rem;
+    --oks-numeric-sizes-3: 0.1875rem;
+    --oks-numeric-sizes-4: 0.25rem;
+    --oks-numeric-sizes-5: 0.3125rem;
+    --oks-numeric-sizes-6: 0.375rem;
+    --oks-numeric-sizes-7: 0.4375rem;
+    --oks-numeric-sizes-8: 0.5rem;
+    --oks-numeric-sizes-9: 0.5625rem;
+    --oks-numeric-sizes-10: 0.625rem;
+    --oks-numeric-sizes-12: 0.75rem;
+    --oks-numeric-sizes-14: 0.875rem;
+    --oks-numeric-sizes-16: 1rem;
+    --oks-numeric-sizes-20: 1.25rem;
+    --oks-numeric-sizes-22: 1.375rem;
+    --oks-numeric-sizes-24: 1.5rem;
+    --oks-numeric-sizes-32: 2rem;
+    --oks-numeric-sizes-40: 2.5rem;
+    --oks-numeric-sizes-48: 3rem;
+    --oks-numeric-sizes-56: 3.5rem;
+    --oks-numeric-sizes-64: 4rem;
+    --oks-numeric-sizes-72: 4.5rem;
+    --oks-numeric-sizes-80: 5rem;
+    --oks-numeric-sizes-88: 5.5rem;
+    --oks-numeric-sizes-96: 6rem;
+    --oks-numeric-sizes-104: 6.5rem;
+    --oks-numeric-sizes-112: 7rem;
+    --oks-numeric-sizes-120: 7.5rem;
+    --oks-numeric-sizes-128: 8rem;
+    --oks-numeric-sizes-136: 8.5rem;
+    --oks-numeric-sizes-144: 9rem;
+    --oks-numeric-sizes-152: 9.5rem;
+    --oks-numeric-sizes-160: 10rem;
+    --oks-numeric-sizes-168: 10.5rem;
+    --oks-numeric-sizes-176: 11rem;
+    --oks-numeric-sizes-184: 11.5rem;
+    --oks-numeric-sizes-192: 12rem;
+    --oks-numeric-sizes-200: 12.5rem;
+    --oks-numeric-sizes-208: 13rem;
+    --oks-numeric-sizes-216: 13.5rem;
+    --oks-numeric-sizes-224: 14rem;
+    --oks-numeric-sizes-232: 14.5rem;
+    --oks-numeric-sizes-240: 15rem;
+    --oks-numeric-sizes-248: 15.5rem;
+    --oks-numeric-sizes-256: 16rem;
+    --oks-numeric-sizes-264: 16.5rem;
+    --oks-numeric-sizes-272: 17rem;
+    --oks-numeric-sizes-280: 17.5rem;
+    --oks-radii-0: var(--oks-sizes-0);
+    --oks-radii-1: var(--oks-sizes-1);
+    --oks-radii-2: var(--oks-sizes-2);
+    --oks-radii-3: var(--oks-sizes-3);
+    --oks-radii-4: var(--oks-sizes-4);
+    --oks-radii-8: var(--oks-sizes-8);
+    --oks-radii-16: var(--oks-sizes-16);
+    --oks-radii-100: 100%;
+    --oks-radii-999: 999px;
+    --oks-shadows-zero-shadow: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0);
+    --oks-shadows-raised-light: var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 31, 33, 0.25), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31);
+    --oks-shadows-raised-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(0, 0, 0, 0), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(1, 4, 4, 0.5), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5);
+    --oks-shadows-elevated-light: var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(30, 31, 33, 0.2), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31);
+    --oks-shadows-elevated-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(95, 95, 95, 0.06), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-7) rgba(1, 4, 4, 0.43), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5);
+    --oks-shadows-overlay-light: var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(30, 31, 33, 0.15), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.31);
+    --oks-shadows-overlay-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-0) rgba(189, 189, 189, 0.12), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-12) rgba(1, 4, 4, 0.36), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5);
+    --oks-shadows-overflow-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-8) rgba(30, 31, 33, 0.16), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(30, 31, 33, 0.12);
+    --oks-shadows-overflow-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-12) rgba(1, 4, 4, 0.56), var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-1) rgba(1, 4, 4, 0.5);
+    --oks-shadows-low-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(30, 30, 30, 0.2);
+    --oks-shadows-low-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-1) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-3) rgba(0, 0, 0, 0.4);
+    --oks-shadows-medium-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(30, 30, 30, 0.2);
+    --oks-shadows-medium-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-4) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-8) var(--oks-sizes-8) rgba(0, 0, 0, 0.4);
+    --oks-shadows-high-light: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(30, 30, 30, 0.2);
+    --oks-shadows-high-dark: var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-4) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-6) var(--oks-sizes-8) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), var(--oks-sizes-0) var(--oks-sizes-14) var(--oks-sizes-16) var(--oks-sizes-2) rgba(0, 0, 0, 0.4);
+    --oks-shadows-inset-light: inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(30, 30, 30, 0.2), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(30, 30, 30, 0.2);
+    --oks-shadows-inset-dark: inset var(--oks-sizes-0) var(--oks-sizes-0) var(--oks-sizes-2) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-2) var(--oks-sizes-1) rgba(0, 0, 0, 0.4), inset var(--oks-sizes-0) var(--oks-sizes-3) var(--oks-sizes-2) rgba(0, 0, 0, 0.4);
+    --oks-sizes-0: 0;
+    --oks-sizes-1: 0.0625rem;
+    --oks-sizes-2: 0.125rem;
+    --oks-sizes-3: 0.1875rem;
+    --oks-sizes-4: 0.25rem;
+    --oks-sizes-5: 0.3125rem;
+    --oks-sizes-6: 0.375rem;
+    --oks-sizes-7: 0.4375rem;
+    --oks-sizes-8: 0.5rem;
+    --oks-sizes-9: 0.5625rem;
+    --oks-sizes-10: 0.625rem;
+    --oks-sizes-12: 0.75rem;
+    --oks-sizes-14: 0.875rem;
+    --oks-sizes-16: 1rem;
+    --oks-sizes-20: 1.25rem;
+    --oks-sizes-22: 1.375rem;
+    --oks-sizes-24: 1.5rem;
+    --oks-sizes-32: 2rem;
+    --oks-sizes-40: 2.5rem;
+    --oks-sizes-48: 3rem;
+    --oks-sizes-56: 3.5rem;
+    --oks-sizes-64: 4rem;
+    --oks-sizes-72: 4.5rem;
+    --oks-sizes-80: 5rem;
+    --oks-sizes-88: 5.5rem;
+    --oks-sizes-96: 6rem;
+    --oks-sizes-104: 6.5rem;
+    --oks-sizes-112: 7rem;
+    --oks-sizes-120: 7.5rem;
+    --oks-sizes-128: 8rem;
+    --oks-sizes-136: 8.5rem;
+    --oks-sizes-144: 9rem;
+    --oks-sizes-152: 9.5rem;
+    --oks-sizes-160: 10rem;
+    --oks-sizes-168: 10.5rem;
+    --oks-sizes-176: 11rem;
+    --oks-sizes-184: 11.5rem;
+    --oks-sizes-192: 12rem;
+    --oks-sizes-200: 12.5rem;
+    --oks-sizes-208: 13rem;
+    --oks-sizes-216: 13.5rem;
+    --oks-sizes-224: 14rem;
+    --oks-sizes-232: 14.5rem;
+    --oks-sizes-240: 15rem;
+    --oks-sizes-248: 15.5rem;
+    --oks-sizes-256: 16rem;
+    --oks-sizes-264: 16.5rem;
+    --oks-sizes-272: 17rem;
+    --oks-sizes-280: 17.5rem;
+    --oks-sizes-full: 100%;
+    --oks-sizes-half: 50%;
+    --oks-sizes-min: min-content;
+    --oks-sizes-max: max-content;
+    --oks-sizes-fit: fit-content;
+    --oks-sizes-prose: 65ch;
+    --oks-sizes-auto: auto;
+    --oks-sizes-2xs: 16rem;
+    --oks-sizes-xs: 20rem;
+    --oks-sizes-sm: 24rem;
+    --oks-sizes-md: 28rem;
+    --oks-sizes-lg: 32rem;
+    --oks-sizes-xl: 36rem;
+    --oks-sizes-2xl: 42rem;
+    --oks-sizes-3xl: 48rem;
+    --oks-sizes-4xl: 56rem;
+    --oks-sizes-5xl: 64rem;
+    --oks-sizes-6xl: 72rem;
+    --oks-sizes-7xl: 80rem;
+    --oks-sizes-8xl: 90rem;
+    --oks-sizes-breakpoint-xs: 480px;
+    --oks-sizes-breakpoint-sm: 640px;
+    --oks-sizes-breakpoint-md: 768px;
+    --oks-sizes-breakpoint-lg: 1024px;
+    --oks-sizes-breakpoint-xl: 1280px;
+    --oks-sizes-breakpoint-2xl: 1536px;
+    --oks-spacing-0: 0;
+    --oks-spacing-1: 0.0625rem;
+    --oks-spacing-2: 0.125rem;
+    --oks-spacing-3: 0.1875rem;
+    --oks-spacing-4: 0.25rem;
+    --oks-spacing-5: 0.3125rem;
+    --oks-spacing-6: 0.375rem;
+    --oks-spacing-7: 0.4375rem;
+    --oks-spacing-8: 0.5rem;
+    --oks-spacing-9: 0.5625rem;
+    --oks-spacing-10: 0.625rem;
+    --oks-spacing-12: 0.75rem;
+    --oks-spacing-14: 0.875rem;
+    --oks-spacing-16: 1rem;
+    --oks-spacing-20: 1.25rem;
+    --oks-spacing-22: 1.375rem;
+    --oks-spacing-24: 1.5rem;
+    --oks-spacing-32: 2rem;
+    --oks-spacing-40: 2.5rem;
+    --oks-spacing-48: 3rem;
+    --oks-spacing-56: 3.5rem;
+    --oks-spacing-64: 4rem;
+    --oks-spacing-72: 4.5rem;
+    --oks-spacing-80: 5rem;
+    --oks-spacing-88: 5.5rem;
+    --oks-spacing-96: 6rem;
+    --oks-spacing-104: 6.5rem;
+    --oks-spacing-112: 7rem;
+    --oks-spacing-120: 7.5rem;
+    --oks-spacing-128: 8rem;
+    --oks-spacing-136: 8.5rem;
+    --oks-spacing-144: 9rem;
+    --oks-spacing-152: 9.5rem;
+    --oks-spacing-160: 10rem;
+    --oks-spacing-168: 10.5rem;
+    --oks-spacing-176: 11rem;
+    --oks-spacing-184: 11.5rem;
+    --oks-spacing-192: 12rem;
+    --oks-spacing-200: 12.5rem;
+    --oks-spacing-208: 13rem;
+    --oks-spacing-216: 13.5rem;
+    --oks-spacing-224: 14rem;
+    --oks-spacing-232: 14.5rem;
+    --oks-spacing-240: 15rem;
+    --oks-spacing-248: 15.5rem;
+    --oks-spacing-256: 16rem;
+    --oks-spacing-264: 16.5rem;
+    --oks-spacing-272: 17rem;
+    --oks-spacing-280: 17.5rem;
+    --oks-spacing-full: 100%;
+    --oks-spacing-half: 50%;
+    --oks-spacing-min: min-content;
+    --oks-spacing-max: max-content;
+    --oks-spacing-fit: fit-content;
+    --oks-spacing-prose: 65ch;
+    --oks-spacing-auto: auto;
+    --oks-utility-sizes-full: 100%;
+    --oks-utility-sizes-half: 50%;
+    --oks-utility-sizes-min: min-content;
+    --oks-utility-sizes-max: max-content;
+    --oks-utility-sizes-fit: fit-content;
+    --oks-utility-sizes-prose: 65ch;
+    --oks-utility-sizes-auto: auto;
+    --oks-breakpoints-xs: 480px;
+    --oks-breakpoints-sm: 640px;
+    --oks-breakpoints-md: 768px;
+    --oks-breakpoints-lg: 1024px;
+    --oks-breakpoints-xl: 1280px;
+    --oks-breakpoints-2xl: 1536px;
+    --oks-colors-brand-10: var(--oks-colors-gray-10);
+    --oks-colors-brand-20: var(--oks-colors-gray-20);
+    --oks-colors-brand-30: var(--oks-colors-gray-30);
+    --oks-colors-brand-40: var(--oks-colors-gray-40);
+    --oks-colors-brand-50: var(--oks-colors-gray-50);
+    --oks-colors-brand-60: var(--oks-colors-gray-60);
+    --oks-colors-brand-70: var(--oks-colors-gray-70);
+    --oks-colors-brand-80: var(--oks-colors-gray-80);
+    --oks-colors-brand-90: var(--oks-colors-gray-90);
+    --oks-colors-brand-100: var(--oks-colors-gray-100);
+    --oks-colors-bg-disabled: var(--oks-colors-neutral-10);
+    --oks-colors-bg-neutral: var(--oks-colors-neutral-a-20);
+    --oks-colors-bg-neutral-hovered: var(--oks-colors-neutral-a-30);
+    --oks-colors-bg-neutral-pressed: var(--oks-colors-neutral-a-40);
+    --oks-colors-bg-neutral-bold: var(--oks-colors-neutral-80);
+    --oks-colors-bg-neutral-bold-hovered: var(--oks-colors-neutral-90);
+    --oks-colors-bg-neutral-bold-pressed: var(--oks-colors-neutral-100);
+    --oks-colors-bg-neutral-boldest: var(--oks-colors-neutral-100);
+    --oks-colors-bg-neutral-subtle: #ffffff02;
+    --oks-colors-bg-neutral-subtle-hovered: var(--oks-colors-neutral-a-20);
+    --oks-colors-bg-neutral-subtle-pressed: var(--oks-colors-neutral-a-30);
+    --oks-colors-bg-neutral-inverse: var(--oks-colors-dark-neutral-0);
+    --oks-colors-bg-neutral-inverse-subtle: #00000029;
+    --oks-colors-bg-neutral-inverse-subtle-hovered: #0000003d;
+    --oks-colors-bg-selected: var(--oks-colors-blue-10);
+    --oks-colors-bg-selected-hovered: var(--oks-colors-blue-20);
+    --oks-colors-bg-selected-pressed: var(--oks-colors-blue-30);
+    --oks-colors-bg-selected-bold: var(--oks-colors-blue-70);
+    --oks-colors-bg-selected-bold-hovered: var(--oks-colors-blue-80);
+    --oks-colors-bg-selected-bold-pressed: var(--oks-colors-blue-90);
+    --oks-colors-bg-brand-bold: var(--oks-colors-brand-70);
+    --oks-colors-bg-brand-bold-hovered: var(--oks-colors-brand-80);
+    --oks-colors-bg-brand-bold-pressed: var(--oks-colors-brand-90);
+    --oks-colors-bg-brand-boldest: var(--oks-colors-brand-100);
+    --oks-colors-bg-brand-boldest-hovered: var(--oks-colors-brand-90);
+    --oks-colors-bg-brand-boldest-pressed: var(--oks-colors-brand-80);
+    --oks-colors-bg-brand-subtle: var(--oks-colors-brand-10);
+    --oks-colors-bg-brand-subtle-hovered: var(--oks-colors-brand-20);
+    --oks-colors-bg-brand-subtle-pressed: var(--oks-colors-brand-30);
+    --oks-colors-bg-success: var(--oks-colors-lime-10);
+    --oks-colors-bg-success-hovered: var(--oks-colors-lime-20);
+    --oks-colors-bg-success-pressed: var(--oks-colors-lime-30);
+    --oks-colors-bg-success-bold: var(--oks-colors-lime-70);
+    --oks-colors-bg-success-bold-hovered: var(--oks-colors-lime-80);
+    --oks-colors-bg-success-bold-pressed: var(--oks-colors-lime-90);
+    --oks-colors-bg-warning: var(--oks-colors-orange-10);
+    --oks-colors-bg-warning-hovered: var(--oks-colors-orange-20);
+    --oks-colors-bg-warning-pressed: var(--oks-colors-orange-30);
+    --oks-colors-bg-warning-bold: var(--oks-colors-orange-30);
+    --oks-colors-bg-warning-bold-hovered: var(--oks-colors-orange-40);
+    --oks-colors-bg-warning-bold-pressed: var(--oks-colors-orange-50);
+    --oks-colors-bg-danger: var(--oks-colors-red-10);
+    --oks-colors-bg-danger-hovered: var(--oks-colors-red-20);
+    --oks-colors-bg-danger-pressed: var(--oks-colors-red-30);
+    --oks-colors-bg-danger-bold: var(--oks-colors-red-70);
+    --oks-colors-bg-danger-bold-hovered: var(--oks-colors-red-80);
+    --oks-colors-bg-danger-bold-pressed: var(--oks-colors-red-90);
+    --oks-colors-bg-info: var(--oks-colors-blue-10);
+    --oks-colors-bg-info-hovered: var(--oks-colors-blue-20);
+    --oks-colors-bg-info-pressed: var(--oks-colors-blue-30);
+    --oks-colors-bg-info-bold: var(--oks-colors-blue-70);
+    --oks-colors-bg-info-bold-hovered: var(--oks-colors-blue-80);
+    --oks-colors-bg-info-bold-pressed: var(--oks-colors-blue-90);
+    --oks-colors-bg-input: var(--oks-colors-neutral-0);
+    --oks-colors-bg-input-hovered: var(--oks-colors-neutral-10);
+    --oks-colors-bg-input-pressed: var(--oks-colors-neutral-0);
+    --oks-colors-bg-accent-neutral: var(--oks-colors-neutral-50);
+    --oks-colors-bg-accent-neutral-subtle: var(--oks-colors-neutral-30);
+    --oks-colors-bg-accent-neutral-subtlest: var(--oks-colors-neutral-10);
+    --oks-colors-bg-accent-neutral-bold: var(--oks-colors-neutral-70);
+    --oks-colors-bg-accent-blue: var(--oks-colors-blue-40);
+    --oks-colors-bg-accent-blue-subtle: var(--oks-colors-blue-20);
+    --oks-colors-bg-accent-blue-subtlest: var(--oks-colors-blue-10);
+    --oks-colors-bg-accent-blue-bold: var(--oks-colors-blue-70);
+    --oks-colors-bg-accent-green: var(--oks-colors-green-40);
+    --oks-colors-bg-accent-green-subtle: var(--oks-colors-green-20);
+    --oks-colors-bg-accent-green-subtlest: var(--oks-colors-green-10);
+    --oks-colors-bg-accent-green-bold: var(--oks-colors-green-70);
+    --oks-colors-bg-accent-indigo: var(--oks-colors-indigo-40);
+    --oks-colors-bg-accent-indigo-subtle: var(--oks-colors-indigo-20);
+    --oks-colors-bg-accent-indigo-subtlest: var(--oks-colors-indigo-10);
+    --oks-colors-bg-accent-indigo-bold: var(--oks-colors-indigo-70);
+    --oks-colors-bg-accent-lime: var(--oks-colors-lime-40);
+    --oks-colors-bg-accent-lime-subtle: var(--oks-colors-lime-20);
+    --oks-colors-bg-accent-lime-subtlest: var(--oks-colors-lime-10);
+    --oks-colors-bg-accent-lime-bold: var(--oks-colors-lime-70);
+    --oks-colors-bg-accent-magenta: var(--oks-colors-magenta-40);
+    --oks-colors-bg-accent-magenta-subtle: var(--oks-colors-magenta-20);
+    --oks-colors-bg-accent-magenta-subtlest: var(--oks-colors-magenta-10);
+    --oks-colors-bg-accent-magenta-bold: var(--oks-colors-magenta-70);
+    --oks-colors-bg-accent-orange: var(--oks-colors-orange-40);
+    --oks-colors-bg-accent-orange-subtle: var(--oks-colors-orange-20);
+    --oks-colors-bg-accent-orange-subtlest: var(--oks-colors-orange-10);
+    --oks-colors-bg-accent-orange-bold: var(--oks-colors-orange-70);
+    --oks-colors-bg-accent-purple: var(--oks-colors-purple-40);
+    --oks-colors-bg-accent-purple-subtle: var(--oks-colors-purple-20);
+    --oks-colors-bg-accent-purple-subtlest: var(--oks-colors-purple-10);
+    --oks-colors-bg-accent-purple-bold: var(--oks-colors-purple-70);
+    --oks-colors-bg-accent-red: var(--oks-colors-red-40);
+    --oks-colors-bg-accent-red-subtle: var(--oks-colors-red-20);
+    --oks-colors-bg-accent-red-subtlest: var(--oks-colors-red-10);
+    --oks-colors-bg-accent-red-bold: var(--oks-colors-red-70);
+    --oks-colors-bg-accent-tan: var(--oks-colors-tan-40);
+    --oks-colors-bg-accent-tan-subtle: var(--oks-colors-tan-20);
+    --oks-colors-bg-accent-tan-subtlest: var(--oks-colors-tan-10);
+    --oks-colors-bg-accent-tan-bold: var(--oks-colors-tan-70);
+    --oks-colors-bg-accent-teal: var(--oks-colors-teal-40);
+    --oks-colors-bg-accent-teal-subtle: var(--oks-colors-teal-20);
+    --oks-colors-bg-accent-teal-subtlest: var(--oks-colors-teal-10);
+    --oks-colors-bg-accent-teal-bold: var(--oks-colors-teal-70);
+    --oks-colors-bg-accent-yellow: var(--oks-colors-yellow-30);
+    --oks-colors-bg-accent-yellow-subtle: var(--oks-colors-yellow-20);
+    --oks-colors-bg-accent-yellow-subtlest: var(--oks-colors-yellow-10);
+    --oks-colors-bg-accent-yellow-bold: var(--oks-colors-yellow-70);
+    --oks-colors-blanket: #17171775;
+    --oks-colors-blanket-danger: #ef5c4814;
+    --oks-colors-blanket-selected: #388bff14;
+    --oks-colors-border: var(--oks-colors-neutral-a-30);
+    --oks-colors-border-bold: var(--oks-colors-neutral-60);
+    --oks-colors-border-inverse: var(--oks-colors-neutral-0);
+    --oks-colors-border-disabled: var(--oks-colors-neutral-a-20);
+    --oks-colors-border-focused: var(--oks-colors-blue-50);
+    --oks-colors-border-focused-inverse: var(--oks-colors-blue-100);
+    --oks-colors-border-selected: var(--oks-colors-blue-70);
+    --oks-colors-border-input: var(--oks-colors-neutral-50);
+    --oks-colors-border-success: var(--oks-colors-lime-60);
+    --oks-colors-border-warning: var(--oks-colors-orange-60);
+    --oks-colors-border-danger: var(--oks-colors-red-60);
+    --oks-colors-border-info: var(--oks-colors-blue-60);
+    --oks-colors-icon: var(--oks-colors-neutral-100);
+    --oks-colors-icon-subtle: var(--oks-colors-neutral-80);
+    --oks-colors-icon-subtlest: var(--oks-colors-neutral-70);
+    --oks-colors-icon-inverse: var(--oks-colors-neutral-0);
+    --oks-colors-icon-selected: var(--oks-colors-blue-70);
+    --oks-colors-icon-disabled: var(--oks-colors-neutral-a-40);
+    --oks-colors-icon-decorative: var(--oks-colors-neutral-50);
+    --oks-colors-icon-decorative-hovered: var(--oks-colors-neutral-100);
+    --oks-colors-icon-decorative-inverse: var(--oks-colors-neutral-30);
+    --oks-colors-icon-decorative-inverse-hovered: var(--oks-colors-neutral-0);
+    --oks-colors-icon-success: var(--oks-colors-lime-60);
+    --oks-colors-icon-warning: var(--oks-colors-orange-60);
+    --oks-colors-icon-warning-inverse: var(--oks-colors-neutral-100);
+    --oks-colors-icon-danger: var(--oks-colors-red-70);
+    --oks-colors-icon-info: var(--oks-colors-blue-60);
+    --oks-colors-link: var(--oks-colors-blue-70);
+    --oks-colors-link-pressed: var(--oks-colors-blue-80);
+    --oks-colors-surface: var(--oks-colors-neutral-0);
+    --oks-colors-surface-hovered: var(--oks-colors-neutral-20);
+    --oks-colors-surface-pressed: var(--oks-colors-neutral-30);
+    --oks-colors-surface-sunken: var(--oks-colors-neutral-10);
+    --oks-colors-surface-overlay: var(--oks-colors-neutral-0);
+    --oks-colors-surface-overlay-hovered: var(--oks-colors-neutral-20);
+    --oks-colors-surface-overlay-pressed: var(--oks-colors-neutral-30);
+    --oks-colors-surface-raised: var(--oks-colors-neutral-0);
+    --oks-colors-surface-raised-hovered: var(--oks-colors-neutral-20);
+    --oks-colors-surface-raised-pressed: var(--oks-colors-neutral-30);
+    --oks-colors-text: var(--oks-colors-neutral-100);
+    --oks-colors-text-subtle: var(--oks-colors-neutral-80);
+    --oks-colors-text-subtlest: var(--oks-colors-neutral-70);
+    --oks-colors-text-placeholder: var(--oks-colors-neutral-50);
+    --oks-colors-text-bold: var(--oks-colors-neutral-100);
+    --oks-colors-text-inverse: var(--oks-colors-neutral-0);
+    --oks-colors-text-selected: var(--oks-colors-blue-70);
+    --oks-colors-text-disabled: var(--oks-colors-neutral-a-40);
+    --oks-colors-text-success: var(--oks-colors-lime-80);
+    --oks-colors-text-warning: var(--oks-colors-orange-80);
+    --oks-colors-text-warning-inverse: var(--oks-colors-neutral-100);
+    --oks-colors-text-danger: var(--oks-colors-red-80);
+    --oks-colors-text-info: var(--oks-colors-blue-80);
+    --oks-colors-text-accent-neutral: var(--oks-colors-neutral-80);
+    --oks-colors-text-accent-neutral-bold: var(--oks-colors-neutral-100);
+    --oks-colors-text-accent-red: var(--oks-colors-red-80);
+    --oks-colors-text-accent-red-bold: var(--oks-colors-red-90);
+    --oks-colors-text-accent-orange: var(--oks-colors-orange-80);
+    --oks-colors-text-accent-orange-bold: var(--oks-colors-orange-90);
+    --oks-colors-text-accent-yellow: var(--oks-colors-yellow-80);
+    --oks-colors-text-accent-yellow-bold: var(--oks-colors-yellow-90);
+    --oks-colors-text-accent-lime: var(--oks-colors-lime-80);
+    --oks-colors-text-accent-lime-bold: var(--oks-colors-lime-90);
+    --oks-colors-text-accent-green: var(--oks-colors-green-80);
+    --oks-colors-text-accent-green-bold: var(--oks-colors-green-90);
+    --oks-colors-text-accent-teal: var(--oks-colors-teal-80);
+    --oks-colors-text-accent-teal-bold: var(--oks-colors-teal-90);
+    --oks-colors-text-accent-blue: var(--oks-colors-blue-80);
+    --oks-colors-text-accent-blue-bold: var(--oks-colors-blue-90);
+    --oks-colors-text-accent-indigo: var(--oks-colors-indigo-80);
+    --oks-colors-text-accent-indigo-bold: var(--oks-colors-indigo-90);
+    --oks-colors-text-accent-purple: var(--oks-colors-purple-80);
+    --oks-colors-text-accent-purple-bold: var(--oks-colors-purple-90);
+    --oks-colors-text-accent-magenta: var(--oks-colors-magenta-80);
+    --oks-colors-text-accent-magenta-bold: var(--oks-colors-magenta-90);
+    --oks-colors-text-accent-tan: var(--oks-colors-tan-80);
+    --oks-colors-text-accent-tan-bold: var(--oks-colors-tan-90);
+    --oks-colors-utility-shadow-color: color-mix(in srgb, var(--oks-colors-slate-90) 20%, transparent);
+    --oks-shadows-zero: var(--oks-shadows-zero-shadow);
+    --oks-shadows-raised: var(--oks-shadows-raised-light);
+    --oks-shadows-elevated: var(--oks-shadows-elevated-light);
+    --oks-shadows-overlay: var(--oks-shadows-overlay-light);
+    --oks-shadows-overflow: var(--oks-shadows-overflow-light);
+    --oks-shadows-low: var(--oks-shadows-low-light);
+    --oks-shadows-medium: var(--oks-shadows-medium-light);
+    --oks-shadows-high: var(--oks-shadows-high-light);
+    --oks-shadows-inset: var(--oks-shadows-inset-light);
+}
+
+  :where(.dark, [data-color-mode=dark]) {
+    --oks-colors-bg-disabled: var(--oks-colors-dark-neutral-10);
+    --oks-colors-bg-neutral: var(--oks-colors-dark-neutral-a-20);
+    --oks-colors-bg-neutral-hovered: var(--oks-colors-dark-neutral-a-30);
+    --oks-colors-bg-neutral-pressed: var(--oks-colors-dark-neutral-a-40);
+    --oks-colors-bg-neutral-bold: var(--oks-colors-dark-neutral-80);
+    --oks-colors-bg-neutral-bold-hovered: var(--oks-colors-dark-neutral-90);
+    --oks-colors-bg-neutral-bold-pressed: var(--oks-colors-dark-neutral-100);
+    --oks-colors-bg-neutral-boldest: var(--oks-colors-dark-neutral-110);
+    --oks-colors-bg-neutral-subtle: #ffffff02;
+    --oks-colors-bg-neutral-subtle-hovered: var(--oks-colors-dark-neutral-a-20);
+    --oks-colors-bg-neutral-subtle-pressed: var(--oks-colors-dark-neutral-a-30);
+    --oks-colors-bg-neutral-inverse: var(--oks-colors-neutral-0);
+    --oks-colors-bg-neutral-inverse-subtle: #ffffff29;
+    --oks-colors-bg-neutral-inverse-subtle-hovered: #ffffff3d;
+    --oks-colors-bg-selected: var(--oks-colors-blue-100);
+    --oks-colors-bg-selected-hovered: var(--oks-colors-blue-90);
+    --oks-colors-bg-selected-pressed: var(--oks-colors-blue-80);
+    --oks-colors-bg-selected-bold: var(--oks-colors-blue-40);
+    --oks-colors-bg-selected-bold-hovered: var(--oks-colors-blue-30);
+    --oks-colors-bg-selected-bold-pressed: var(--oks-colors-blue-20);
+    --oks-colors-bg-brand-bold: var(--oks-colors-brand-40);
+    --oks-colors-bg-brand-bold-hovered: var(--oks-colors-brand-30);
+    --oks-colors-bg-brand-bold-pressed: var(--oks-colors-brand-20);
+    --oks-colors-bg-brand-boldest: var(--oks-colors-brand-20);
+    --oks-colors-bg-brand-boldest-hovered: var(--oks-colors-brand-30);
+    --oks-colors-bg-brand-boldest-pressed: var(--oks-colors-brand-40);
+    --oks-colors-bg-brand-subtle: var(--oks-colors-brand-100);
+    --oks-colors-bg-brand-subtle-hovered: var(--oks-colors-brand-90);
+    --oks-colors-bg-brand-subtle-pressed: var(--oks-colors-brand-80);
+    --oks-colors-bg-success: var(--oks-colors-lime-100);
+    --oks-colors-bg-success-hovered: var(--oks-colors-lime-90);
+    --oks-colors-bg-success-pressed: var(--oks-colors-lime-80);
+    --oks-colors-bg-success-bold: var(--oks-colors-lime-40);
+    --oks-colors-bg-success-bold-hovered: var(--oks-colors-lime-30);
+    --oks-colors-bg-success-bold-pressed: var(--oks-colors-lime-20);
+    --oks-colors-bg-warning: var(--oks-colors-orange-100);
+    --oks-colors-bg-warning-hovered: var(--oks-colors-orange-90);
+    --oks-colors-bg-warning-pressed: var(--oks-colors-orange-80);
+    --oks-colors-bg-warning-bold: var(--oks-colors-orange-30);
+    --oks-colors-bg-warning-bold-hovered: var(--oks-colors-orange-40);
+    --oks-colors-bg-warning-bold-pressed: var(--oks-colors-orange-50);
+    --oks-colors-bg-danger: var(--oks-colors-red-100);
+    --oks-colors-bg-danger-hovered: var(--oks-colors-red-90);
+    --oks-colors-bg-danger-pressed: var(--oks-colors-red-80);
+    --oks-colors-bg-danger-bold: var(--oks-colors-red-40);
+    --oks-colors-bg-danger-bold-hovered: var(--oks-colors-red-30);
+    --oks-colors-bg-danger-bold-pressed: var(--oks-colors-red-20);
+    --oks-colors-bg-info: var(--oks-colors-blue-100);
+    --oks-colors-bg-info-hovered: var(--oks-colors-blue-90);
+    --oks-colors-bg-info-pressed: var(--oks-colors-blue-80);
+    --oks-colors-bg-info-bold: var(--oks-colors-blue-40);
+    --oks-colors-bg-info-bold-hovered: var(--oks-colors-blue-30);
+    --oks-colors-bg-info-bold-pressed: var(--oks-colors-blue-20);
+    --oks-colors-bg-input: var(--oks-colors-dark-neutral-20);
+    --oks-colors-bg-input-hovered: var(--oks-colors-dark-neutral-25);
+    --oks-colors-bg-input-pressed: var(--oks-colors-dark-neutral-20);
+    --oks-colors-bg-accent-neutral: var(--oks-colors-dark-neutral-50);
+    --oks-colors-bg-accent-neutral-subtle: var(--oks-colors-dark-neutral-40);
+    --oks-colors-bg-accent-neutral-subtlest: var(--oks-colors-dark-neutral-10);
+    --oks-colors-bg-accent-neutral-bold: var(--oks-colors-dark-neutral-70);
+    --oks-colors-bg-accent-blue: var(--oks-colors-blue-80);
+    --oks-colors-bg-accent-blue-subtle: var(--oks-colors-blue-90);
+    --oks-colors-bg-accent-blue-subtlest: var(--oks-colors-blue-100);
+    --oks-colors-bg-accent-blue-bold: var(--oks-colors-blue-40);
+    --oks-colors-bg-accent-green: var(--oks-colors-green-80);
+    --oks-colors-bg-accent-green-subtle: var(--oks-colors-green-90);
+    --oks-colors-bg-accent-green-subtlest: var(--oks-colors-green-90);
+    --oks-colors-bg-accent-green-bold: var(--oks-colors-green-40);
+    --oks-colors-bg-accent-indigo: var(--oks-colors-indigo-80);
+    --oks-colors-bg-accent-indigo-subtle: var(--oks-colors-indigo-90);
+    --oks-colors-bg-accent-indigo-subtlest: var(--oks-colors-indigo-90);
+    --oks-colors-bg-accent-indigo-bold: var(--oks-colors-indigo-40);
+    --oks-colors-bg-accent-lime: var(--oks-colors-lime-80);
+    --oks-colors-bg-accent-lime-subtle: var(--oks-colors-lime-90);
+    --oks-colors-bg-accent-lime-subtlest: var(--oks-colors-lime-90);
+    --oks-colors-bg-accent-lime-bold: var(--oks-colors-lime-40);
+    --oks-colors-bg-accent-magenta: var(--oks-colors-magenta-80);
+    --oks-colors-bg-accent-magenta-subtle: var(--oks-colors-magenta-90);
+    --oks-colors-bg-accent-magenta-subtlest: var(--oks-colors-magenta-90);
+    --oks-colors-bg-accent-magenta-bold: var(--oks-colors-magenta-40);
+    --oks-colors-bg-accent-orange: var(--oks-colors-orange-80);
+    --oks-colors-bg-accent-orange-subtle: var(--oks-colors-orange-90);
+    --oks-colors-bg-accent-orange-subtlest: var(--oks-colors-orange-90);
+    --oks-colors-bg-accent-orange-bold: var(--oks-colors-orange-40);
+    --oks-colors-bg-accent-purple: var(--oks-colors-purple-80);
+    --oks-colors-bg-accent-purple-subtle: var(--oks-colors-purple-90);
+    --oks-colors-bg-accent-purple-subtlest: var(--oks-colors-purple-90);
+    --oks-colors-bg-accent-purple-bold: var(--oks-colors-purple-40);
+    --oks-colors-bg-accent-red: var(--oks-colors-red-80);
+    --oks-colors-bg-accent-red-subtle: var(--oks-colors-red-90);
+    --oks-colors-bg-accent-red-subtlest: var(--oks-colors-red-100);
+    --oks-colors-bg-accent-red-bold: var(--oks-colors-red-40);
+    --oks-colors-bg-accent-tan: var(--oks-colors-tan-80);
+    --oks-colors-bg-accent-tan-subtle: var(--oks-colors-tan-90);
+    --oks-colors-bg-accent-tan-subtlest: var(--oks-colors-tan-90);
+    --oks-colors-bg-accent-tan-bold: var(--oks-colors-tan-40);
+    --oks-colors-bg-accent-teal: var(--oks-colors-teal-80);
+    --oks-colors-bg-accent-teal-subtle: var(--oks-colors-teal-90);
+    --oks-colors-bg-accent-teal-subtlest: var(--oks-colors-teal-90);
+    --oks-colors-bg-accent-teal-bold: var(--oks-colors-teal-40);
+    --oks-colors-bg-accent-yellow: var(--oks-colors-yellow-70);
+    --oks-colors-bg-accent-yellow-subtle: var(--oks-colors-yellow-80);
+    --oks-colors-bg-accent-yellow-subtlest: var(--oks-colors-yellow-90);
+    --oks-colors-bg-accent-yellow-bold: var(--oks-colors-yellow-40);
+    --oks-colors-blanket: #10121499;
+    --oks-colors-blanket-danger: #e3493514;
+    --oks-colors-blanket-selected: #1d7afc14;
+    --oks-colors-border: var(--oks-colors-dark-neutral-a-30);
+    --oks-colors-border-bold: var(--oks-colors-dark-neutral-60);
+    --oks-colors-border-inverse: var(--oks-colors-dark-neutral-0);
+    --oks-colors-border-disabled: var(--oks-colors-dark-neutral-a-20);
+    --oks-colors-border-focused: var(--oks-colors-blue-30);
+    --oks-colors-border-focused-inverse: var(--oks-colors-blue-10);
+    --oks-colors-border-selected: var(--oks-colors-blue-40);
+    --oks-colors-border-input: var(--oks-colors-dark-neutral-60);
+    --oks-colors-border-success: var(--oks-colors-lime-50);
+    --oks-colors-border-warning: var(--oks-colors-orange-50);
+    --oks-colors-border-danger: var(--oks-colors-red-50);
+    --oks-colors-border-info: var(--oks-colors-blue-50);
+    --oks-colors-icon: var(--oks-colors-dark-neutral-110);
+    --oks-colors-icon-subtle: var(--oks-colors-dark-neutral-80);
+    --oks-colors-icon-subtlest: var(--oks-colors-dark-neutral-70);
+    --oks-colors-icon-inverse: var(--oks-colors-dark-neutral-10);
+    --oks-colors-icon-selected: var(--oks-colors-blue-40);
+    --oks-colors-icon-disabled: var(--oks-colors-dark-neutral-a-40);
+    --oks-colors-icon-decorative: var(--oks-colors-dark-neutral-60);
+    --oks-colors-icon-decorative-hovered: var(--oks-colors-neutral-0);
+    --oks-colors-icon-decorative-inverse: var(--oks-colors-dark-neutral-30);
+    --oks-colors-icon-decorative-inverse-hovered: var(--oks-colors-dark-neutral-10);
+    --oks-colors-icon-success: var(--oks-colors-lime-50);
+    --oks-colors-icon-warning: var(--oks-colors-orange-30);
+    --oks-colors-icon-warning-inverse: var(--oks-colors-dark-neutral-10);
+    --oks-colors-icon-danger: var(--oks-colors-red-50);
+    --oks-colors-icon-info: var(--oks-colors-blue-50);
+    --oks-colors-link: var(--oks-colors-blue-40);
+    --oks-colors-link-pressed: var(--oks-colors-blue-30);
+    --oks-colors-surface: var(--oks-colors-dark-neutral-10);
+    --oks-colors-surface-hovered: var(--oks-colors-dark-neutral-20);
+    --oks-colors-surface-pressed: var(--oks-colors-dark-neutral-30);
+    --oks-colors-surface-sunken: var(--oks-colors-dark-neutral-0);
+    --oks-colors-surface-overlay: var(--oks-colors-dark-neutral-25);
+    --oks-colors-surface-overlay-hovered: var(--oks-colors-dark-neutral-30);
+    --oks-colors-surface-overlay-pressed: var(--oks-colors-dark-neutral-35);
+    --oks-colors-surface-raised: var(--oks-colors-dark-neutral-0);
+    --oks-colors-surface-raised-hovered: var(--oks-colors-dark-neutral-25);
+    --oks-colors-surface-raised-pressed: var(--oks-colors-dark-neutral-30);
+    --oks-colors-text: var(--oks-colors-dark-neutral-100);
+    --oks-colors-text-subtle: var(--oks-colors-dark-neutral-80);
+    --oks-colors-text-subtlest: var(--oks-colors-dark-neutral-70);
+    --oks-colors-text-placeholder: var(--oks-colors-dark-neutral-60);
+    --oks-colors-text-bold: var(--oks-colors-dark-neutral-110);
+    --oks-colors-text-inverse: var(--oks-colors-dark-neutral-10);
+    --oks-colors-text-selected: var(--oks-colors-blue-40);
+    --oks-colors-text-disabled: var(--oks-colors-dark-neutral-a-40);
+    --oks-colors-text-success: var(--oks-colors-lime-30);
+    --oks-colors-text-warning: var(--oks-colors-orange-30);
+    --oks-colors-text-warning-inverse: var(--oks-colors-dark-neutral-10);
+    --oks-colors-text-danger: var(--oks-colors-red-30);
+    --oks-colors-text-info: var(--oks-colors-blue-30);
+    --oks-colors-text-accent-neutral: var(--oks-colors-dark-neutral-80);
+    --oks-colors-text-accent-neutral-bold: var(--oks-colors-dark-neutral-100);
+    --oks-colors-text-accent-red: var(--oks-colors-red-30);
+    --oks-colors-text-accent-red-bold: var(--oks-colors-red-20);
+    --oks-colors-text-accent-orange: var(--oks-colors-orange-30);
+    --oks-colors-text-accent-orange-bold: var(--oks-colors-orange-20);
+    --oks-colors-text-accent-yellow: var(--oks-colors-yellow-30);
+    --oks-colors-text-accent-yellow-bold: var(--oks-colors-yellow-20);
+    --oks-colors-text-accent-lime: var(--oks-colors-lime-30);
+    --oks-colors-text-accent-lime-bold: var(--oks-colors-lime-20);
+    --oks-colors-text-accent-green: var(--oks-colors-green-30);
+    --oks-colors-text-accent-green-bold: var(--oks-colors-green-20);
+    --oks-colors-text-accent-teal: var(--oks-colors-teal-30);
+    --oks-colors-text-accent-teal-bold: var(--oks-colors-teal-20);
+    --oks-colors-text-accent-blue: var(--oks-colors-blue-30);
+    --oks-colors-text-accent-blue-bold: var(--oks-colors-blue-20);
+    --oks-colors-text-accent-indigo: var(--oks-colors-indigo-30);
+    --oks-colors-text-accent-indigo-bold: var(--oks-colors-indigo-20);
+    --oks-colors-text-accent-purple: var(--oks-colors-purple-30);
+    --oks-colors-text-accent-purple-bold: var(--oks-colors-purple-20);
+    --oks-colors-text-accent-magenta: var(--oks-colors-magenta-30);
+    --oks-colors-text-accent-magenta-bold: var(--oks-colors-magenta-20);
+    --oks-colors-text-accent-tan: var(--oks-colors-tan-30);
+    --oks-colors-text-accent-tan-bold: var(--oks-colors-tan-20);
+    --oks-colors-utility-shadow-color: color-mix(in srgb, var(--oks-colors-slate-100) 40%, transparent);
+    --oks-shadows-zero: var(--oks-shadows-zero-shadow);
+    --oks-shadows-raised: var(--oks-shadows-raised-dark);
+    --oks-shadows-elevated: var(--oks-shadows-elevated-dark);
+    --oks-shadows-overlay: var(--oks-shadows-overlay-dark);
+    --oks-shadows-overflow: var(--oks-shadows-overflow-dark);
+    --oks-shadows-low: var(--oks-shadows-low-dark);
+    --oks-shadows-medium: var(--oks-shadows-medium-dark);
+    --oks-shadows-high: var(--oks-shadows-high-dark);
+    --oks-shadows-inset: var(--oks-shadows-inset-dark)
+}
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+}
+}
+
+  @keyframes ping {
+    75%,100% {
+      transform: scale(2);
+      opacity: 0;
+}
+}
+
+  @keyframes pulse {
+    50% {
+      opacity: 0.5;
+}
+}
+
+  @keyframes bounce {
+    0%,100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8,0,1,1);
+}
+
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0,0,0.2,1);
+}
+}
+
+  @keyframes badgePop {
+    0% {
+      transform: translate(50%, -50%) scale(1);
+}
+
+    50% {
+      transform: translate(50%, -50%) scale(1.2);
+}
+
+    100% {
+      transform: translate(50%, -50%) scale(1);
+}
+}
+
+  @keyframes badgePopStandalone {
+    0% {
+      transform: scale(1);
+}
+
+    50% {
+      transform: scale(1.2);
+}
+
+    100% {
+      transform: scale(1);
+}
+}
+
+  @keyframes slideLeft {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+}
+
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+}
+}
+
+  @keyframes slideRight {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+}
+
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+}
+}
+
+  @keyframes modalFadeIn {
+    0% {
+      opacity: 0;
+}
+
+    100% {
+      opacity: 1;
+}
+}
+
+  @keyframes modalFadeOut {
+    0% {
+      opacity: 1;
+}
+
+    100% {
+      opacity: 0;
+}
+}
+
+  @keyframes modalScaleIn {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+}
+
+    100% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1) translateY(0);
+}
+}
+
+  @keyframes modalScaleOut {
+    0% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1) translateY(0);
+}
+
+    100% {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95) translateY(-10px);
+}
+}
+}