aha-components 1.8.1 → 1.8.2

package/dist/index.esm.css

@@ -3846,4 +3846,965 @@
   --backdrop-blur-xl: var(--backdrop-blur-xl);
 }
 
-.aha-toast-container{pointer-events:none;position:fixed;z-index:9999}.aha-toast-item{background:#fff;border-radius:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);max-width:380px;opacity:0;overflow:hidden;pointer-events:auto;position:relative;scale:.95;transform:translateY(8px);transition:all .3s ease-out}.aha-toast-item.visible{opacity:1;scale:1;transform:translateY(0)}.aha-toast-item.exiting{opacity:0;scale:.95;transform:translateY(8px)}.aha-toast-content{align-items:flex-start;color:#fff;display:flex;padding:16px}.aha-toast-icon{align-items:center;border-radius:50%;display:flex;flex-shrink:0;height:24px;justify-content:center;margin-right:8px;width:24px}.aha-toast-message{flex:1;min-width:0;padding-right:20px}.aha-toast-text{color:#f0fdf4;font-family:DM Sans,sans-serif;font-size:14px;font-weight:500;justify-content:flex-start;line-height:24px;width:100%}.aha-toast-action{margin-top:12px}.aha-toast-close{align-items:center;background:transparent;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:20px;justify-content:center;position:absolute;right:16px;top:14px;transition:all .2s;width:20px}.aha-toast-close:hover{background:hsla(0,0%,100%,.1)}.aha-toast-success{background-color:#096}.aha-toast-error{background-color:#e7000b}.aha-toast-info{background-color:#1447e6}.aha-toast-question{background-color:#1c1917}.aha-toast-top-left{left:16px;top:16px}.aha-toast-top-right{right:16px;top:16px}.aha-toast-bottom-left{bottom:16px;left:16px}.aha-toast-bottom-right{bottom:16px;right:16px}@media (max-width:640px){.aha-toast-item{margin:0 16px;max-width:calc(100vw - 32px)}.aha-toast-top-left,.aha-toast-top-right{top:8px}.aha-toast-bottom-left,.aha-toast-bottom-right{bottom:8px}}
+/* ==========================================================================
+   Design Tokens — extracted from Untitled UI (Tokens Studio export)
+   Brand: Orange (brand-500 = #fb6011)  |  Font: DM Sans  |  Mode: Light only
+   
+   Layer 1: Primitives (raw color scales)        -> :root
+   Layer 2: Semantic tokens (text/bg/border/fg)  -> :root
+   Layer 3: Spacing / Radius / Typography / Shadow
+   
+   Tailwind v4: the :root block at the bottom exposes these as utility classes.
+   Usage: bg-brand-500, text-primary, rounded-md, p-lg, etc.
+   ========================================================================== */
+
+:root {
+  /* ---------- Primitives: Color scales ---------- */
+  --color-base-white: #ffffff;
+  --color-base-black: #000000;
+
+  /* brand */
+  --color-brand-25: #fff9f2;
+  --color-brand-50: #fff6ed;
+  --color-brand-100: #ffead5;
+  --color-brand-200: #ffd1a9;
+  --color-brand-300: #feb073;
+  --color-brand-400: #fd843a;
+  --color-brand-500: #fb6011;
+  --color-brand-600: #ec470a;
+  --color-brand-700: #c4330a;
+  --color-brand-800: #9b2911;
+  --color-brand-900: #7d2511;
+  --color-brand-950: #441006;
+
+  /* error */
+  --color-error-25: #fffbfa;
+  --color-error-50: #fef3f2;
+  --color-error-100: #fee4e2;
+  --color-error-200: #fecdca;
+  --color-error-300: #fda29b;
+  --color-error-400: #f97066;
+  --color-error-500: #f04438;
+  --color-error-600: #d92d20;
+  --color-error-700: #b42318;
+  --color-error-800: #912018;
+  --color-error-900: #7a271a;
+  --color-error-950: #55160c;
+
+  /* warning */
+  --color-warning-25: #fffcf5;
+  --color-warning-50: #fffaeb;
+  --color-warning-100: #fef0c7;
+  --color-warning-200: #fedf89;
+  --color-warning-300: #fec84b;
+  --color-warning-400: #fdb022;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+  --color-warning-700: #b54708;
+  --color-warning-800: #93370d;
+  --color-warning-900: #7a2e0e;
+  --color-warning-950: #4e1d09;
+
+  /* success */
+  --color-success-25: #f6fef9;
+  --color-success-50: #ecfdf3;
+  --color-success-100: #dcfae6;
+  --color-success-200: #abefc6;
+  --color-success-300: #75e0a7;
+  --color-success-400: #47cd89;
+  --color-success-500: #17b26a;
+  --color-success-600: #079455;
+  --color-success-700: #067647;
+  --color-success-800: #085d3a;
+  --color-success-900: #074d31;
+  --color-success-950: #053321;
+
+  /* gray */
+  --color-gray-25: #fdfdfc;
+  --color-gray-50: #fafaf9;
+  --color-gray-100: #f5f5f4;
+  --color-gray-200: #e7e5e4;
+  --color-gray-300: #d7d3d0;
+  --color-gray-400: #a9a29d;
+  --color-gray-500: #79716b;
+  --color-gray-600: #57534e;
+  --color-gray-700: #44403c;
+  --color-gray-800: #292524;
+  --color-gray-900: #1c1917;
+  --color-gray-950: #171412;
+
+  /* gray-blue */
+  --color-gray-blue-25: #fcfcfd;
+  --color-gray-blue-50: #f8f9fc;
+  --color-gray-blue-100: #eaecf5;
+  --color-gray-blue-200: #d5d9eb;
+  --color-gray-blue-300: #b3b8db;
+  --color-gray-blue-400: #717bbc;
+  --color-gray-blue-500: #4e5ba6;
+  --color-gray-blue-600: #3e4784;
+  --color-gray-blue-700: #363f72;
+  --color-gray-blue-800: #293056;
+  --color-gray-blue-900: #101323;
+  --color-gray-blue-950: #0d0f1c;
+
+  /* moss */
+  --color-moss-25: #fafdf7;
+  --color-moss-50: #f5fbee;
+  --color-moss-100: #e6f4d7;
+  --color-moss-200: #ceeab0;
+  --color-moss-300: #acdc79;
+  --color-moss-400: #86cb3c;
+  --color-moss-500: #669f2a;
+  --color-moss-600: #4f7a21;
+  --color-moss-700: #3f621a;
+  --color-moss-800: #335015;
+  --color-moss-900: #2b4212;
+  --color-moss-950: #1a280b;
+
+  /* green-light */
+  --color-green-light-25: #fafef5;
+  --color-green-light-50: #f3fee7;
+  --color-green-light-100: #e3fbcc;
+  --color-green-light-200: #d0f8ab;
+  --color-green-light-300: #a6ef67;
+  --color-green-light-400: #85e13a;
+  --color-green-light-500: #66c61c;
+  --color-green-light-600: #4ca30d;
+  --color-green-light-700: #3b7c0f;
+  --color-green-light-800: #326212;
+  --color-green-light-900: #2b5314;
+  --color-green-light-950: #15290a;
+
+  /* green */
+  --color-green-25: #f6fef9;
+  --color-green-50: #edfcf2;
+  --color-green-100: #d3f8df;
+  --color-green-200: #aaf0c4;
+  --color-green-300: #73e2a3;
+  --color-green-400: #3ccb7f;
+  --color-green-500: #16b364;
+  --color-green-600: #099250;
+  --color-green-700: #087443;
+  --color-green-800: #095c37;
+  --color-green-900: #084c2e;
+  --color-green-950: #052e1c;
+
+  /* teal */
+  --color-teal-25: #f6fefc;
+  --color-teal-50: #f0fdf9;
+  --color-teal-100: #ccfbef;
+  --color-teal-200: #99f6e0;
+  --color-teal-300: #5fe9d0;
+  --color-teal-400: #2ed3b7;
+  --color-teal-500: #15b79e;
+  --color-teal-600: #0e9384;
+  --color-teal-700: #107569;
+  --color-teal-800: #125d56;
+  --color-teal-900: #134e48;
+  --color-teal-950: #0a2926;
+
+  /* cyan */
+  --color-cyan-25: #f5feff;
+  --color-cyan-50: #ecfdff;
+  --color-cyan-100: #cff9fe;
+  --color-cyan-200: #a5f0fc;
+  --color-cyan-300: #67e3f9;
+  --color-cyan-400: #22ccee;
+  --color-cyan-500: #06aed4;
+  --color-cyan-600: #088ab2;
+  --color-cyan-700: #0e7090;
+  --color-cyan-800: #155b75;
+  --color-cyan-900: #164c63;
+  --color-cyan-950: #0d2d3a;
+
+  /* blue-light */
+  --color-blue-light-25: #f5fbff;
+  --color-blue-light-50: #f0f9ff;
+  --color-blue-light-100: #e0f2fe;
+  --color-blue-light-200: #b9e6fe;
+  --color-blue-light-300: #7cd4fd;
+  --color-blue-light-400: #36bffa;
+  --color-blue-light-500: #0ba5ec;
+  --color-blue-light-600: #0086c9;
+  --color-blue-light-700: #026aa2;
+  --color-blue-light-800: #065986;
+  --color-blue-light-900: #0b4a6f;
+  --color-blue-light-950: #062c41;
+
+  /* blue */
+  --color-blue-25: #f5faff;
+  --color-blue-50: #eff8ff;
+  --color-blue-100: #d1e9ff;
+  --color-blue-200: #b2ddff;
+  --color-blue-300: #84caff;
+  --color-blue-400: #53b1fd;
+  --color-blue-500: #2e90fa;
+  --color-blue-600: #1570ef;
+  --color-blue-700: #175cd3;
+  --color-blue-800: #1849a9;
+  --color-blue-900: #194185;
+  --color-blue-950: #102a56;
+
+  /* blue-dark */
+  --color-blue-dark-25: #f5f8ff;
+  --color-blue-dark-50: #eff4ff;
+  --color-blue-dark-100: #d1e0ff;
+  --color-blue-dark-200: #b2ccff;
+  --color-blue-dark-300: #84adff;
+  --color-blue-dark-400: #528bff;
+  --color-blue-dark-500: #2970ff;
+  --color-blue-dark-600: #155eef;
+  --color-blue-dark-700: #004eeb;
+  --color-blue-dark-800: #0040c1;
+  --color-blue-dark-900: #00359e;
+  --color-blue-dark-950: #002266;
+
+  /* indigo */
+  --color-indigo-25: #f5f8ff;
+  --color-indigo-50: #eef4ff;
+  --color-indigo-100: #e0eaff;
+  --color-indigo-200: #c7d7fe;
+  --color-indigo-300: #a4bcfd;
+  --color-indigo-400: #8098f9;
+  --color-indigo-500: #6172f3;
+  --color-indigo-600: #444ce7;
+  --color-indigo-700: #3538cd;
+  --color-indigo-800: #2d31a6;
+  --color-indigo-900: #2d3282;
+  --color-indigo-950: #1f235b;
+
+  /* violet */
+  --color-violet-25: #fbfaff;
+  --color-violet-50: #f5f3ff;
+  --color-violet-100: #ece9fe;
+  --color-violet-200: #ddd6fe;
+  --color-violet-300: #c3b5fd;
+  --color-violet-400: #a48afb;
+  --color-violet-500: #875bf7;
+  --color-violet-600: #7839ee;
+  --color-violet-700: #6927da;
+  --color-violet-800: #5720b7;
+  --color-violet-900: #491c96;
+  --color-violet-950: #2e125e;
+
+  /* purple */
+  --color-purple-25: #fafaff;
+  --color-purple-50: #f4f3ff;
+  --color-purple-100: #ebe9fe;
+  --color-purple-200: #d9d6fe;
+  --color-purple-300: #bdb4fe;
+  --color-purple-400: #9b8afb;
+  --color-purple-500: #7a5af8;
+  --color-purple-600: #6938ef;
+  --color-purple-700: #5925dc;
+  --color-purple-800: #4a1fb8;
+  --color-purple-900: #3e1c96;
+  --color-purple-950: #27115f;
+
+  /* fuchsia */
+  --color-fuchsia-25: #fefaff;
+  --color-fuchsia-50: #fdf4ff;
+  --color-fuchsia-100: #fbe8ff;
+  --color-fuchsia-200: #f6d0fe;
+  --color-fuchsia-300: #eeaafd;
+  --color-fuchsia-400: #e478fa;
+  --color-fuchsia-500: #d444f1;
+  --color-fuchsia-600: #ba24d5;
+  --color-fuchsia-700: #9f1ab1;
+  --color-fuchsia-800: #821890;
+  --color-fuchsia-900: #6f1877;
+  --color-fuchsia-950: #47104c;
+
+  /* pink */
+  --color-pink-25: #fef6fb;
+  --color-pink-50: #fdf2fa;
+  --color-pink-100: #fce7f6;
+  --color-pink-200: #fcceee;
+  --color-pink-300: #faa7e0;
+  --color-pink-400: #f670c7;
+  --color-pink-500: #ee46bc;
+  --color-pink-600: #dd2590;
+  --color-pink-700: #c11574;
+  --color-pink-800: #9e165f;
+  --color-pink-900: #851651;
+  --color-pink-950: #4e0d30;
+
+  /* rose */
+  --color-rose-25: #fff5f6;
+  --color-rose-50: #fff1f3;
+  --color-rose-100: #ffe4e8;
+  --color-rose-200: #fecdd6;
+  --color-rose-300: #fea3b4;
+  --color-rose-400: #fd6f8e;
+  --color-rose-500: #f63d68;
+  --color-rose-600: #e31b54;
+  --color-rose-700: #c01048;
+  --color-rose-800: #a11043;
+  --color-rose-900: #89123e;
+  --color-rose-950: #510b24;
+
+  /* orange-dark */
+  --color-orange-dark-25: #fff9f5;
+  --color-orange-dark-50: #fff4ed;
+  --color-orange-dark-100: #ffe6d5;
+  --color-orange-dark-200: #ffd6ae;
+  --color-orange-dark-300: #ff9c66;
+  --color-orange-dark-400: #ff692e;
+  --color-orange-dark-500: #ff4405;
+  --color-orange-dark-600: #e62e05;
+  --color-orange-dark-700: #bc1b06;
+  --color-orange-dark-800: #97180c;
+  --color-orange-dark-900: #771a0d;
+  --color-orange-dark-950: #57130a;
+
+  /* orange */
+  --color-orange-25: #fefaf5;
+  --color-orange-50: #fef6ee;
+  --color-orange-100: #fdead7;
+  --color-orange-200: #f9dbaf;
+  --color-orange-300: #f7b27a;
+  --color-orange-400: #f38744;
+  --color-orange-500: #ef6820;
+  --color-orange-600: #e04f16;
+  --color-orange-700: #b93815;
+  --color-orange-800: #932f19;
+  --color-orange-900: #772917;
+  --color-orange-950: #511c10;
+
+  /* yellow */
+  --color-yellow-25: #fefdf0;
+  --color-yellow-50: #fefbe8;
+  --color-yellow-100: #fef7c3;
+  --color-yellow-200: #feee95;
+  --color-yellow-300: #fde272;
+  --color-yellow-400: #fac515;
+  --color-yellow-500: #eaaa08;
+  --color-yellow-600: #ca8504;
+  --color-yellow-700: #a15c07;
+  --color-yellow-800: #854a0e;
+  --color-yellow-900: #713b12;
+  --color-yellow-950: #542c0d;
+
+  /* ---------- Spacing ---------- */
+  --spacing-none: 0px;
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 6px;
+  --spacing-md: 8px;
+  --spacing-lg: 12px;
+  --spacing-xl: 16px;
+  --spacing-2xl: 20px;
+  --spacing-3xl: 24px;
+  --spacing-4xl: 32px;
+  --spacing-5xl: 40px;
+  --spacing-6xl: 48px;
+  --spacing-7xl: 64px;
+  --spacing-8xl: 80px;
+  --spacing-9xl: 96px;
+  --spacing-10xl: 128px;
+  --spacing-11xl: 160px;
+
+  /* ---------- Radius ---------- */
+  --radius-none: 0px;
+  --radius-xxs: 2px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+
+  /* ---------- Typography ---------- */
+  --font-family-display: "DM Sans", system-ui, -apple-system, sans-serif;
+  --font-family-body: "DM Sans", system-ui, -apple-system, sans-serif;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --font-size-text-xs: 12px;
+  --font-size-text-sm: 14px;
+  --font-size-text-md: 16px;
+  --font-size-text-lg: 18px;
+  --font-size-text-xl: 20px;
+  --font-size-display-xs: 24px;
+  --font-size-display-sm: 30px;
+  --font-size-display-md: 36px;
+  --font-size-display-lg: 48px;
+  --font-size-display-xl: 60px;
+  --font-size-display-2xl: 72px;
+
+  --line-height-text-xs: 18px;
+  --line-height-text-sm: 20px;
+  --line-height-text-md: 24px;
+  --line-height-text-lg: 28px;
+  --line-height-text-xl: 30px;
+  --line-height-display-xs: 32px;
+  --line-height-display-sm: 38px;
+  --line-height-display-md: 44px;
+  --line-height-display-lg: 60px;
+  --line-height-display-xl: 72px;
+  --line-height-display-2xl: 90px;
+
+  /* ---------- Shadows ---------- */
+  --shadow-xs: 0px 1px 2px 0px #0a0d120d;
+  --shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d;
+  --shadow-sm: 0px 1px 3px 0px #0a0d121a, 0px 1px 2px -1px #0a0d121a;
+  --shadow-md: 0px 4px 6px -1px #0a0d121a, 0px 2px 4px -2px #0a0d120f;
+  --shadow-lg: 0px 12px 16px -4px #0a0d1214, 0px 4px 6px -2px #0a0d1208, 0px 2px 2px -1px #0a0d120a;
+  --shadow-xl: 0px 20px 24px -4px #0a0d1214, 0px 8px 8px -4px #0a0d1208, 0px 3px 3px -1.5px #0a0d120a;
+  --shadow-2xl: 0px 24px 48px -12px #0a0d122e, 0px 4px 4px -2px #0a0d120a;
+  --shadow-3xl: 0px 32px 64px -12px #0a0d1224, 0px 5px 5px -2.5px #0a0d120a;
+
+  /* ---------- Focus rings ---------- */
+  --focus-ring: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-brand-500);
+  --focus-ring-shadow-xs: 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-brand-500);
+  --focus-ring-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-brand-500);
+  --focus-ring-shadow-sm: 0px 1px 3px 0px #0a0d121a, 0px 1px 2px 0px #0a0d121a, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-brand-500);
+  --focus-ring-error: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-error-500);
+  --focus-ring-error-shadow-xs: 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-error-500);
+  --focus-ring-error-shadow-xs-skeuomorphic: inset 0px 0px 0px 1px #0a0d122e, inset 0px -2px 0px 0px #0a0d120d, 0px 1px 2px 0px #0a0d120d, 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--color-error-500);
+
+  /* ---------- Backdrop blurs ---------- */
+  --backdrop-blur-sm: blur(8px);
+  --backdrop-blur-md: blur(16px);
+  --backdrop-blur-lg: blur(24px);
+  --backdrop-blur-xl: blur(40px);
+}
+
+/* ==========================================================================
+   SEMANTIC TOKENS — Light mode
+   ========================================================================== */
+:root {
+  /* ---------- TEXT ---------- */
+  --color-text-primary: #1c1917;
+  --color-text-tertiary: #57534e;
+  --color-text-error-primary: #d92d20;
+  --color-text-warning-primary: #dc6803;
+  --color-text-success-primary: #079455;
+  --color-text-white: #ffffff;
+  --color-text-secondary: #44403c;
+  --color-text-disabled: #79716b;
+  --color-text-secondary_hover: #292524;
+  --color-text-tertiary_hover: #44403c;
+  --color-text-brand-secondary: #ec470a;
+  --color-text-placeholder: #79716b;
+  --color-text-placeholder_subtle: #d7d3d0;
+  --color-text-brand-tertiary: #fb6011;
+  --color-text-quaternary: #79716b;
+  --color-text-brand-primary: #7d2511;
+  --color-text-primary_on-brand: #ffffff;
+  --color-text-secondary_on-brand: #ffd1a9;
+  --color-text-tertiary_on-brand: #ffd1a9;
+  --color-text-quaternary_on-brand: #feb073;
+  --color-text-brand-tertiary_alt: #fb6011;
+  --color-text-brand-secondary_hover: #c4330a;
+  --color-text-error-primary_hover: #b42318;
+
+  /* ---------- BORDER ---------- */
+  --color-border-secondary: #e7e5e4;
+  --color-border-error_subtle: #fda29b;
+  --color-border-primary: #d7d3d0;
+  --color-border-brand: #fb6011;
+  --color-border-disabled: #d7d3d0;
+  --color-border-error: #f04438;
+  --color-border-disabled_subtle: #e7e5e4;
+  --color-border-tertiary: #f5f5f4;
+  --color-border-brand_alt: #fb6011;
+  --color-border-secondary_alt: #00000014;
+
+  /* ---------- BG ---------- */
+  --color-bg-primary: #ffffff;
+  --color-bg-tertiary: #f5f5f4;
+  --color-bg-brand-primary: #fff6ed;
+  --color-bg-error-secondary: #fee4e2;
+  --color-bg-warning-primary: #fffaeb;
+  --color-bg-warning-secondary: #fef0c7;
+  --color-bg-success-primary: #ecfdf3;
+  --color-bg-success-secondary: #dcfae6;
+  --color-bg-brand-solid: #fb6011;
+  --color-bg-secondary-solid: #57534e;
+  --color-bg-error-solid: #d92d20;
+  --color-bg-warning-solid: #dc6803;
+  --color-bg-success-solid: #079455;
+  --color-bg-secondary_hover: #f5f5f4;
+  --color-bg-primary_hover: #fafaf9;
+  --color-bg-disabled: #f5f5f4;
+  --color-bg-active: #fafaf9;
+  --color-bg-brand-solid_hover: #ec470a;
+  --color-bg-error-primary: #fef3f2;
+  --color-bg-brand-secondary: #ffead5;
+  --color-bg-secondary: #fafaf9;
+  --color-bg-disabled_subtle: #fafaf9;
+  --color-bg-quaternary: #e7e5e4;
+  --color-bg-primary_alt: #ffffff;
+  --color-bg-brand-primary_alt: #fff6ed;
+  --color-bg-secondary_alt: #fafaf9;
+  --color-bg-overlay: #171412;
+  --color-bg-secondary_subtle: #fdfdfc;
+  --color-bg-brand-section: #c4330a;
+  --color-bg-brand-section_subtle: #ec470a;
+  --color-bg-primary-solid: #171412;
+
+  /* ---------- FG ---------- */
+  --color-fg-secondary: #44403c;
+  --color-fg-warning-primary: #dc6803;
+  --color-fg-success-primary: #079455;
+  --color-fg-white: #ffffff;
+  --color-fg-success-secondary: #17b26a;
+  --color-fg-secondary_hover: #292524;
+  --color-fg-primary: #1c1917;
+  --color-fg-disabled: #a9a29d;
+  --color-fg-brand-secondary: #fb6011;
+  --color-fg-brand-primary: #fb6011;
+  --color-fg-quaternary: #a9a29d;
+  --color-fg-quaternary_hover: #79716b;
+  --color-fg-error-primary: #d92d20;
+  --color-fg-disabled_subtle: #d7d3d0;
+  --color-fg-warning-secondary: #f79009;
+  --color-fg-error-secondary: #f04438;
+  --color-fg-tertiary: #57534e;
+  --color-fg-tertiary_hover: #44403c;
+  --color-fg-brand-primary_alt: #fb6011;
+  --color-fg-brand-secondary_alt: #fb6011;
+  --color-fg-brand-secondary_hover: #fb6011;
+
+}
+
+/* ==========================================================================
+   TAILWIND v4 — exposes tokens as utility classes
+   ========================================================================== */
+:root {
+  /* Colors — primitives */
+  --color-white: var(--color-base-white);
+  --color-black: var(--color-base-black);
+  --color-brand-25: var(--color-brand-25);
+  --color-brand-50: var(--color-brand-50);
+  --color-brand-100: var(--color-brand-100);
+  --color-brand-200: var(--color-brand-200);
+  --color-brand-300: var(--color-brand-300);
+  --color-brand-400: var(--color-brand-400);
+  --color-brand-500: var(--color-brand-500);
+  --color-brand-600: var(--color-brand-600);
+  --color-brand-700: var(--color-brand-700);
+  --color-brand-800: var(--color-brand-800);
+  --color-brand-900: var(--color-brand-900);
+  --color-brand-950: var(--color-brand-950);
+  --color-error-25: var(--color-error-25);
+  --color-error-50: var(--color-error-50);
+  --color-error-100: var(--color-error-100);
+  --color-error-200: var(--color-error-200);
+  --color-error-300: var(--color-error-300);
+  --color-error-400: var(--color-error-400);
+  --color-error-500: var(--color-error-500);
+  --color-error-600: var(--color-error-600);
+  --color-error-700: var(--color-error-700);
+  --color-error-800: var(--color-error-800);
+  --color-error-900: var(--color-error-900);
+  --color-error-950: var(--color-error-950);
+  --color-warning-25: var(--color-warning-25);
+  --color-warning-50: var(--color-warning-50);
+  --color-warning-100: var(--color-warning-100);
+  --color-warning-200: var(--color-warning-200);
+  --color-warning-300: var(--color-warning-300);
+  --color-warning-400: var(--color-warning-400);
+  --color-warning-500: var(--color-warning-500);
+  --color-warning-600: var(--color-warning-600);
+  --color-warning-700: var(--color-warning-700);
+  --color-warning-800: var(--color-warning-800);
+  --color-warning-900: var(--color-warning-900);
+  --color-warning-950: var(--color-warning-950);
+  --color-success-25: var(--color-success-25);
+  --color-success-50: var(--color-success-50);
+  --color-success-100: var(--color-success-100);
+  --color-success-200: var(--color-success-200);
+  --color-success-300: var(--color-success-300);
+  --color-success-400: var(--color-success-400);
+  --color-success-500: var(--color-success-500);
+  --color-success-600: var(--color-success-600);
+  --color-success-700: var(--color-success-700);
+  --color-success-800: var(--color-success-800);
+  --color-success-900: var(--color-success-900);
+  --color-success-950: var(--color-success-950);
+  --color-gray-25: var(--color-gray-25);
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
+  --color-gray-blue-25: var(--color-gray-blue-25);
+  --color-gray-blue-50: var(--color-gray-blue-50);
+  --color-gray-blue-100: var(--color-gray-blue-100);
+  --color-gray-blue-200: var(--color-gray-blue-200);
+  --color-gray-blue-300: var(--color-gray-blue-300);
+  --color-gray-blue-400: var(--color-gray-blue-400);
+  --color-gray-blue-500: var(--color-gray-blue-500);
+  --color-gray-blue-600: var(--color-gray-blue-600);
+  --color-gray-blue-700: var(--color-gray-blue-700);
+  --color-gray-blue-800: var(--color-gray-blue-800);
+  --color-gray-blue-900: var(--color-gray-blue-900);
+  --color-gray-blue-950: var(--color-gray-blue-950);
+  --color-moss-25: var(--color-moss-25);
+  --color-moss-50: var(--color-moss-50);
+  --color-moss-100: var(--color-moss-100);
+  --color-moss-200: var(--color-moss-200);
+  --color-moss-300: var(--color-moss-300);
+  --color-moss-400: var(--color-moss-400);
+  --color-moss-500: var(--color-moss-500);
+  --color-moss-600: var(--color-moss-600);
+  --color-moss-700: var(--color-moss-700);
+  --color-moss-800: var(--color-moss-800);
+  --color-moss-900: var(--color-moss-900);
+  --color-moss-950: var(--color-moss-950);
+  --color-green-light-25: var(--color-green-light-25);
+  --color-green-light-50: var(--color-green-light-50);
+  --color-green-light-100: var(--color-green-light-100);
+  --color-green-light-200: var(--color-green-light-200);
+  --color-green-light-300: var(--color-green-light-300);
+  --color-green-light-400: var(--color-green-light-400);
+  --color-green-light-500: var(--color-green-light-500);
+  --color-green-light-600: var(--color-green-light-600);
+  --color-green-light-700: var(--color-green-light-700);
+  --color-green-light-800: var(--color-green-light-800);
+  --color-green-light-900: var(--color-green-light-900);
+  --color-green-light-950: var(--color-green-light-950);
+  --color-green-25: var(--color-green-25);
+  --color-green-50: var(--color-green-50);
+  --color-green-100: var(--color-green-100);
+  --color-green-200: var(--color-green-200);
+  --color-green-300: var(--color-green-300);
+  --color-green-400: var(--color-green-400);
+  --color-green-500: var(--color-green-500);
+  --color-green-600: var(--color-green-600);
+  --color-green-700: var(--color-green-700);
+  --color-green-800: var(--color-green-800);
+  --color-green-900: var(--color-green-900);
+  --color-green-950: var(--color-green-950);
+  --color-teal-25: var(--color-teal-25);
+  --color-teal-50: var(--color-teal-50);
+  --color-teal-100: var(--color-teal-100);
+  --color-teal-200: var(--color-teal-200);
+  --color-teal-300: var(--color-teal-300);
+  --color-teal-400: var(--color-teal-400);
+  --color-teal-500: var(--color-teal-500);
+  --color-teal-600: var(--color-teal-600);
+  --color-teal-700: var(--color-teal-700);
+  --color-teal-800: var(--color-teal-800);
+  --color-teal-900: var(--color-teal-900);
+  --color-teal-950: var(--color-teal-950);
+  --color-cyan-25: var(--color-cyan-25);
+  --color-cyan-50: var(--color-cyan-50);
+  --color-cyan-100: var(--color-cyan-100);
+  --color-cyan-200: var(--color-cyan-200);
+  --color-cyan-300: var(--color-cyan-300);
+  --color-cyan-400: var(--color-cyan-400);
+  --color-cyan-500: var(--color-cyan-500);
+  --color-cyan-600: var(--color-cyan-600);
+  --color-cyan-700: var(--color-cyan-700);
+  --color-cyan-800: var(--color-cyan-800);
+  --color-cyan-900: var(--color-cyan-900);
+  --color-cyan-950: var(--color-cyan-950);
+  --color-blue-light-25: var(--color-blue-light-25);
+  --color-blue-light-50: var(--color-blue-light-50);
+  --color-blue-light-100: var(--color-blue-light-100);
+  --color-blue-light-200: var(--color-blue-light-200);
+  --color-blue-light-300: var(--color-blue-light-300);
+  --color-blue-light-400: var(--color-blue-light-400);
+  --color-blue-light-500: var(--color-blue-light-500);
+  --color-blue-light-600: var(--color-blue-light-600);
+  --color-blue-light-700: var(--color-blue-light-700);
+  --color-blue-light-800: var(--color-blue-light-800);
+  --color-blue-light-900: var(--color-blue-light-900);
+  --color-blue-light-950: var(--color-blue-light-950);
+  --color-blue-25: var(--color-blue-25);
+  --color-blue-50: var(--color-blue-50);
+  --color-blue-100: var(--color-blue-100);
+  --color-blue-200: var(--color-blue-200);
+  --color-blue-300: var(--color-blue-300);
+  --color-blue-400: var(--color-blue-400);
+  --color-blue-500: var(--color-blue-500);
+  --color-blue-600: var(--color-blue-600);
+  --color-blue-700: var(--color-blue-700);
+  --color-blue-800: var(--color-blue-800);
+  --color-blue-900: var(--color-blue-900);
+  --color-blue-950: var(--color-blue-950);
+  --color-blue-dark-25: var(--color-blue-dark-25);
+  --color-blue-dark-50: var(--color-blue-dark-50);
+  --color-blue-dark-100: var(--color-blue-dark-100);
+  --color-blue-dark-200: var(--color-blue-dark-200);
+  --color-blue-dark-300: var(--color-blue-dark-300);
+  --color-blue-dark-400: var(--color-blue-dark-400);
+  --color-blue-dark-500: var(--color-blue-dark-500);
+  --color-blue-dark-600: var(--color-blue-dark-600);
+  --color-blue-dark-700: var(--color-blue-dark-700);
+  --color-blue-dark-800: var(--color-blue-dark-800);
+  --color-blue-dark-900: var(--color-blue-dark-900);
+  --color-blue-dark-950: var(--color-blue-dark-950);
+  --color-indigo-25: var(--color-indigo-25);
+  --color-indigo-50: var(--color-indigo-50);
+  --color-indigo-100: var(--color-indigo-100);
+  --color-indigo-200: var(--color-indigo-200);
+  --color-indigo-300: var(--color-indigo-300);
+  --color-indigo-400: var(--color-indigo-400);
+  --color-indigo-500: var(--color-indigo-500);
+  --color-indigo-600: var(--color-indigo-600);
+  --color-indigo-700: var(--color-indigo-700);
+  --color-indigo-800: var(--color-indigo-800);
+  --color-indigo-900: var(--color-indigo-900);
+  --color-indigo-950: var(--color-indigo-950);
+  --color-violet-25: var(--color-violet-25);
+  --color-violet-50: var(--color-violet-50);
+  --color-violet-100: var(--color-violet-100);
+  --color-violet-200: var(--color-violet-200);
+  --color-violet-300: var(--color-violet-300);
+  --color-violet-400: var(--color-violet-400);
+  --color-violet-500: var(--color-violet-500);
+  --color-violet-600: var(--color-violet-600);
+  --color-violet-700: var(--color-violet-700);
+  --color-violet-800: var(--color-violet-800);
+  --color-violet-900: var(--color-violet-900);
+  --color-violet-950: var(--color-violet-950);
+  --color-purple-25: var(--color-purple-25);
+  --color-purple-50: var(--color-purple-50);
+  --color-purple-100: var(--color-purple-100);
+  --color-purple-200: var(--color-purple-200);
+  --color-purple-300: var(--color-purple-300);
+  --color-purple-400: var(--color-purple-400);
+  --color-purple-500: var(--color-purple-500);
+  --color-purple-600: var(--color-purple-600);
+  --color-purple-700: var(--color-purple-700);
+  --color-purple-800: var(--color-purple-800);
+  --color-purple-900: var(--color-purple-900);
+  --color-purple-950: var(--color-purple-950);
+  --color-fuchsia-25: var(--color-fuchsia-25);
+  --color-fuchsia-50: var(--color-fuchsia-50);
+  --color-fuchsia-100: var(--color-fuchsia-100);
+  --color-fuchsia-200: var(--color-fuchsia-200);
+  --color-fuchsia-300: var(--color-fuchsia-300);
+  --color-fuchsia-400: var(--color-fuchsia-400);
+  --color-fuchsia-500: var(--color-fuchsia-500);
+  --color-fuchsia-600: var(--color-fuchsia-600);
+  --color-fuchsia-700: var(--color-fuchsia-700);
+  --color-fuchsia-800: var(--color-fuchsia-800);
+  --color-fuchsia-900: var(--color-fuchsia-900);
+  --color-fuchsia-950: var(--color-fuchsia-950);
+  --color-pink-25: var(--color-pink-25);
+  --color-pink-50: var(--color-pink-50);
+  --color-pink-100: var(--color-pink-100);
+  --color-pink-200: var(--color-pink-200);
+  --color-pink-300: var(--color-pink-300);
+  --color-pink-400: var(--color-pink-400);
+  --color-pink-500: var(--color-pink-500);
+  --color-pink-600: var(--color-pink-600);
+  --color-pink-700: var(--color-pink-700);
+  --color-pink-800: var(--color-pink-800);
+  --color-pink-900: var(--color-pink-900);
+  --color-pink-950: var(--color-pink-950);
+  --color-rose-25: var(--color-rose-25);
+  --color-rose-50: var(--color-rose-50);
+  --color-rose-100: var(--color-rose-100);
+  --color-rose-200: var(--color-rose-200);
+  --color-rose-300: var(--color-rose-300);
+  --color-rose-400: var(--color-rose-400);
+  --color-rose-500: var(--color-rose-500);
+  --color-rose-600: var(--color-rose-600);
+  --color-rose-700: var(--color-rose-700);
+  --color-rose-800: var(--color-rose-800);
+  --color-rose-900: var(--color-rose-900);
+  --color-rose-950: var(--color-rose-950);
+  --color-orange-dark-25: var(--color-orange-dark-25);
+  --color-orange-dark-50: var(--color-orange-dark-50);
+  --color-orange-dark-100: var(--color-orange-dark-100);
+  --color-orange-dark-200: var(--color-orange-dark-200);
+  --color-orange-dark-300: var(--color-orange-dark-300);
+  --color-orange-dark-400: var(--color-orange-dark-400);
+  --color-orange-dark-500: var(--color-orange-dark-500);
+  --color-orange-dark-600: var(--color-orange-dark-600);
+  --color-orange-dark-700: var(--color-orange-dark-700);
+  --color-orange-dark-800: var(--color-orange-dark-800);
+  --color-orange-dark-900: var(--color-orange-dark-900);
+  --color-orange-dark-950: var(--color-orange-dark-950);
+  --color-orange-25: var(--color-orange-25);
+  --color-orange-50: var(--color-orange-50);
+  --color-orange-100: var(--color-orange-100);
+  --color-orange-200: var(--color-orange-200);
+  --color-orange-300: var(--color-orange-300);
+  --color-orange-400: var(--color-orange-400);
+  --color-orange-500: var(--color-orange-500);
+  --color-orange-600: var(--color-orange-600);
+  --color-orange-700: var(--color-orange-700);
+  --color-orange-800: var(--color-orange-800);
+  --color-orange-900: var(--color-orange-900);
+  --color-orange-950: var(--color-orange-950);
+  --color-yellow-25: var(--color-yellow-25);
+  --color-yellow-50: var(--color-yellow-50);
+  --color-yellow-100: var(--color-yellow-100);
+  --color-yellow-200: var(--color-yellow-200);
+  --color-yellow-300: var(--color-yellow-300);
+  --color-yellow-400: var(--color-yellow-400);
+  --color-yellow-500: var(--color-yellow-500);
+  --color-yellow-600: var(--color-yellow-600);
+  --color-yellow-700: var(--color-yellow-700);
+  --color-yellow-800: var(--color-yellow-800);
+  --color-yellow-900: var(--color-yellow-900);
+  --color-yellow-950: var(--color-yellow-950);
+
+  /* Colors — semantic */
+  --color-text-primary: var(--color-text-primary);
+  --color-text-tertiary: var(--color-text-tertiary);
+  --color-text-error-primary: var(--color-text-error-primary);
+  --color-text-warning-primary: var(--color-text-warning-primary);
+  --color-text-success-primary: var(--color-text-success-primary);
+  --color-text-white: var(--color-text-white);
+  --color-text-secondary: var(--color-text-secondary);
+  --color-text-disabled: var(--color-text-disabled);
+  --color-text-secondary_hover: var(--color-text-secondary_hover);
+  --color-text-tertiary_hover: var(--color-text-tertiary_hover);
+  --color-text-brand-secondary: var(--color-text-brand-secondary);
+  --color-text-placeholder: var(--color-text-placeholder);
+  --color-text-placeholder_subtle: var(--color-text-placeholder_subtle);
+  --color-text-brand-tertiary: var(--color-text-brand-tertiary);
+  --color-text-quaternary: var(--color-text-quaternary);
+  --color-text-brand-primary: var(--color-text-brand-primary);
+  --color-text-primary_on-brand: var(--color-text-primary_on-brand);
+  --color-text-secondary_on-brand: var(--color-text-secondary_on-brand);
+  --color-text-tertiary_on-brand: var(--color-text-tertiary_on-brand);
+  --color-text-quaternary_on-brand: var(--color-text-quaternary_on-brand);
+  --color-text-brand-tertiary_alt: var(--color-text-brand-tertiary_alt);
+  --color-text-brand-secondary_hover: var(--color-text-brand-secondary_hover);
+  --color-text-error-primary_hover: var(--color-text-error-primary_hover);
+  --color-border-secondary: var(--color-border-secondary);
+  --color-border-error_subtle: var(--color-border-error_subtle);
+  --color-border-primary: var(--color-border-primary);
+  --color-border-brand: var(--color-border-brand);
+  --color-border-disabled: var(--color-border-disabled);
+  --color-border-error: var(--color-border-error);
+  --color-border-disabled_subtle: var(--color-border-disabled_subtle);
+  --color-border-tertiary: var(--color-border-tertiary);
+  --color-border-brand_alt: var(--color-border-brand_alt);
+  --color-border-secondary_alt: var(--color-border-secondary_alt);
+  --color-bg-primary: var(--color-bg-primary);
+  --color-bg-tertiary: var(--color-bg-tertiary);
+  --color-bg-brand-primary: var(--color-bg-brand-primary);
+  --color-bg-error-secondary: var(--color-bg-error-secondary);
+  --color-bg-warning-primary: var(--color-bg-warning-primary);
+  --color-bg-warning-secondary: var(--color-bg-warning-secondary);
+  --color-bg-success-primary: var(--color-bg-success-primary);
+  --color-bg-success-secondary: var(--color-bg-success-secondary);
+  --color-bg-brand-solid: var(--color-bg-brand-solid);
+  --color-bg-secondary-solid: var(--color-bg-secondary-solid);
+  --color-bg-error-solid: var(--color-bg-error-solid);
+  --color-bg-warning-solid: var(--color-bg-warning-solid);
+  --color-bg-success-solid: var(--color-bg-success-solid);
+  --color-bg-secondary_hover: var(--color-bg-secondary_hover);
+  --color-bg-primary_hover: var(--color-bg-primary_hover);
+  --color-bg-disabled: var(--color-bg-disabled);
+  --color-bg-active: var(--color-bg-active);
+  --color-bg-brand-solid_hover: var(--color-bg-brand-solid_hover);
+  --color-bg-error-primary: var(--color-bg-error-primary);
+  --color-bg-brand-secondary: var(--color-bg-brand-secondary);
+  --color-bg-secondary: var(--color-bg-secondary);
+  --color-bg-disabled_subtle: var(--color-bg-disabled_subtle);
+  --color-bg-quaternary: var(--color-bg-quaternary);
+  --color-bg-primary_alt: var(--color-bg-primary_alt);
+  --color-bg-brand-primary_alt: var(--color-bg-brand-primary_alt);
+  --color-bg-secondary_alt: var(--color-bg-secondary_alt);
+  --color-bg-overlay: var(--color-bg-overlay);
+  --color-bg-secondary_subtle: var(--color-bg-secondary_subtle);
+  --color-bg-brand-section: var(--color-bg-brand-section);
+  --color-bg-brand-section_subtle: var(--color-bg-brand-section_subtle);
+  --color-bg-primary-solid: var(--color-bg-primary-solid);
+  --color-fg-secondary: var(--color-fg-secondary);
+  --color-fg-warning-primary: var(--color-fg-warning-primary);
+  --color-fg-success-primary: var(--color-fg-success-primary);
+  --color-fg-white: var(--color-fg-white);
+  --color-fg-success-secondary: var(--color-fg-success-secondary);
+  --color-fg-secondary_hover: var(--color-fg-secondary_hover);
+  --color-fg-primary: var(--color-fg-primary);
+  --color-fg-disabled: var(--color-fg-disabled);
+  --color-fg-brand-secondary: var(--color-fg-brand-secondary);
+  --color-fg-brand-primary: var(--color-fg-brand-primary);
+  --color-fg-quaternary: var(--color-fg-quaternary);
+  --color-fg-quaternary_hover: var(--color-fg-quaternary_hover);
+  --color-fg-error-primary: var(--color-fg-error-primary);
+  --color-fg-disabled_subtle: var(--color-fg-disabled_subtle);
+  --color-fg-warning-secondary: var(--color-fg-warning-secondary);
+  --color-fg-error-secondary: var(--color-fg-error-secondary);
+  --color-fg-tertiary: var(--color-fg-tertiary);
+  --color-fg-tertiary_hover: var(--color-fg-tertiary_hover);
+  --color-fg-brand-primary_alt: var(--color-fg-brand-primary_alt);
+  --color-fg-brand-secondary_alt: var(--color-fg-brand-secondary_alt);
+  --color-fg-brand-secondary_hover: var(--color-fg-brand-secondary_hover);
+
+  /* Spacing */
+  --spacing-none: var(--spacing-none);
+  --spacing-xxs: var(--spacing-xxs);
+  --spacing-xs: var(--spacing-xs);
+  --spacing-sm: var(--spacing-sm);
+  --spacing-md: var(--spacing-md);
+  --spacing-lg: var(--spacing-lg);
+  --spacing-xl: var(--spacing-xl);
+  --spacing-2xl: var(--spacing-2xl);
+  --spacing-3xl: var(--spacing-3xl);
+  --spacing-4xl: var(--spacing-4xl);
+  --spacing-5xl: var(--spacing-5xl);
+  --spacing-6xl: var(--spacing-6xl);
+  --spacing-7xl: var(--spacing-7xl);
+  --spacing-8xl: var(--spacing-8xl);
+  --spacing-9xl: var(--spacing-9xl);
+  --spacing-10xl: var(--spacing-10xl);
+  --spacing-11xl: var(--spacing-11xl);
+
+  /* Radius */
+  --radius-none: var(--radius-none);
+  --radius-xxs: var(--radius-xxs);
+  --radius-xs: var(--radius-xs);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-4xl: var(--radius-4xl);
+  --radius-full: var(--radius-full);
+
+  /* Typography */
+  --font-family-display: var(--font-family-display);
+  --font-family-body: var(--font-family-body);
+
+  /* Shadows */
+  --shadow-xs: var(--shadow-xs);
+  --shadow-xs-skeuomorphic: var(--shadow-xs-skeuomorphic);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+  --shadow-3xl: var(--shadow-3xl);
+
+  /* Focus rings */
+  --focus-ring: var(--focus-ring);
+  --focus-ring-shadow-xs: var(--focus-ring-shadow-xs);
+  --focus-ring-shadow-xs-skeuomorphic: var(--focus-ring-shadow-xs-skeuomorphic);
+  --focus-ring-shadow-sm: var(--focus-ring-shadow-sm);
+  --focus-ring-error: var(--focus-ring-error);
+  --focus-ring-error-shadow-xs: var(--focus-ring-error-shadow-xs);
+  --focus-ring-error-shadow-xs-skeuomorphic: var(--focus-ring-error-shadow-xs-skeuomorphic);
+
+  /* Backdrop blurs */
+  --backdrop-blur-sm: var(--backdrop-blur-sm);
+  --backdrop-blur-md: var(--backdrop-blur-md);
+  --backdrop-blur-lg: var(--backdrop-blur-lg);
+  --backdrop-blur-xl: var(--backdrop-blur-xl);
+}
+