@vaneui/md 0.3.1-alpha.20251227133834.f24acb3 → 0.3.1-alpha.20260104125946.4a6b7b2

package/dist/styles/index.css

@@ -121,8 +121,8 @@
     /* Border Colors */
     --color-border-primary: var(--color-gray-200);
     --color-border-brand: var(--color-blue-300);
-    --color-border-secondary: var(--color-gray-300);
-    --color-border-tertiary: var(--color-gray-400);
+    --color-border-secondary: var(--color-gray-200);
+    --color-border-tertiary: var(--color-gray-200);
     --color-border-accent: var(--color-rose-300);
     --color-border-success: var(--color-emerald-300);
     --color-border-danger: var(--color-red-300);
@@ -132,7 +132,7 @@
     /* Filled Button Border Colors */
     --color-border-filled-primary: var(--color-gray-600);
     --color-border-filled-brand: var(--color-blue-600);
-    --color-border-filled-secondary: var(--color-gray-700);
+    --color-border-filled-secondary: var(--color-gray-600);
     --color-border-filled-tertiary: var(--color-gray-600);
     --color-border-filled-accent: var(--color-rose-600);
     --color-border-filled-success: var(--color-emerald-600);
@@ -140,15 +140,11 @@
     --color-border-filled-warning: var(--color-amber-600);
     --color-border-filled-info: var(--color-cyan-600);
 
-    --layout-spacing: var(--spacing);
-    --ui-spacing: var(--spacing);
     --br-base: var(--spacing);
-    --ui-br-base: calc(var(--spacing) * 0.5);
     --fs-base: calc(var(--spacing) * 0.5);
 
-    --breakpoint-mobile: 40rem;
-    --breakpoint-tablet: 48rem;
-    --breakpoint-laptop: 64rem;
+    --breakpoint-mobile: 48rem;
+        --breakpoint-tablet: 64rem;
     --breakpoint-desktop: 80rem;
 
     --lh: 1;
@@ -158,23 +154,462 @@
     --py-unit: 1;
     --br-unit: 1;
     --size-unit: 1;
+    --bw: 1px; /* Border width */
+    --rw: 1px; /* Ring width */
 }
 @layer base {
-    :where(*) {
-        --gap: calc(var(--gap-unit) * var(--layout-spacing));
-        --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
+    [data-size] {
+        --gap: calc(var(--gap-unit) * var(--spacing));
+        --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
+        --py: calc(var(--py-unit) * var(--spacing));
+        --size: calc(var(--size-unit) * var(--spacing));
+        --br: calc(var(--br-unit) * var(--br-base));
+        --fs: calc(var(--fs-unit) * var(--fs-base));
+        --pl: calc(var(--py-unit) * var(--spacing));
+    }
+}
+@layer components {
+    /* NON-RESPONSIVE COMPONENTS */
 
-        --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
-        --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
-        --py: calc(var(--py-unit) * var(--layout-spacing));
-        --ui-py: calc(var(--py-unit) * var(--ui-spacing));
-        --ui-size: calc(var(--size-unit) * var(--ui-spacing));
+    /* Button */
+    .vane-button { --lh: 1.3; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
+    .vane-button[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
+    .vane-button[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
+    .vane-button[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
+    .vane-button[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
+    .vane-button[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
 
-        --br: calc(var(--br-unit) * var(--br-base));
-        --ui-br: calc(var(--br-unit) * var(--ui-br-base));
+    /* Badge */
+    .vane-badge { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; --gap-unit: 2; }
+    .vane-badge[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; --gap-unit: 1; }
+    .vane-badge[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; --gap-unit: 1.5; }
+    .vane-badge[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; --gap-unit: 2; }
+    .vane-badge[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; --gap-unit: 2.5; }
+    .vane-badge[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; --gap-unit: 3; }
 
-        --fs: calc(var(--fs-unit) * var(--fs-base));
+    /* Chip */
+    .vane-chip { --lh: 1.2; --br-unit: 2; --py-unit: 1.5; --aspect-ratio: 2; --gap-unit: 2; }
+    .vane-chip[data-size="xs"] { --fs-unit: 6; --py-unit: 0.5; --br-unit: 1; --gap-unit: 1; }
+    .vane-chip[data-size="sm"] { --fs-unit: 7; --py-unit: 1; --br-unit: 1.5; --gap-unit: 1.5; }
+    .vane-chip[data-size="md"] { --fs-unit: 8; --py-unit: 1.5; --br-unit: 2; --gap-unit: 2; }
+    .vane-chip[data-size="lg"] { --fs-unit: 9; --py-unit: 2; --br-unit: 2.5; --gap-unit: 2.5; }
+    .vane-chip[data-size="xl"] { --fs-unit: 10; --py-unit: 2.5; --br-unit: 3; --gap-unit: 3; }
+
+    /* Code */
+    .vane-code { --lh: 1; --br-unit: 1.5; --py-unit: 0.8; --aspect-ratio: 1.8; }
+    .vane-code[data-size="xs"] { --fs-unit: 5; --py-unit: 0.4; --br-unit: 0.5; }
+    .vane-code[data-size="sm"] { --fs-unit: 6; --py-unit: 0.6; --br-unit: 1; }
+    .vane-code[data-size="md"] { --fs-unit: 7; --py-unit: 0.8; --br-unit: 1.5; }
+    .vane-code[data-size="lg"] { --fs-unit: 8; --py-unit: 1; --br-unit: 2; }
+    .vane-code[data-size="xl"] { --fs-unit: 9; --py-unit: 1.2; --br-unit: 2.5; }
+
+    /* Input */
+    .vane-input { --lh: 1.6; --br-unit: 2; --py-unit: 2; --aspect-ratio: 2; }
+    .vane-input[data-size="xs"] { --fs-unit: 6; --py-unit: 1; --br-unit: 1; }
+    .vane-input[data-size="sm"] { --fs-unit: 7; --py-unit: 1.5; --br-unit: 1.5; }
+    .vane-input[data-size="md"] { --fs-unit: 8; --py-unit: 2; --br-unit: 2; }
+    .vane-input[data-size="lg"] { --fs-unit: 9; --py-unit: 2.5; --br-unit: 2.5; }
+    .vane-input[data-size="xl"] { --fs-unit: 10; --py-unit: 3; --br-unit: 3; }
+
+    /* Checkbox */
+    .vane-checkbox { --br-unit: 1; }
+    .vane-checkbox[data-size="xs"] { --size-unit: 3; --br-unit: 0.5; }
+    .vane-checkbox[data-size="sm"] { --size-unit: 3.5; --br-unit: 0.5; }
+    .vane-checkbox[data-size="md"] { --size-unit: 4; --br-unit: 1; }
+    .vane-checkbox[data-size="lg"] { --size-unit: 4.5; --br-unit: 1; }
+    .vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
+
+    /* Label */
+    .vane-label { --lh: 1.6; --gap-unit: 2; }
+    .vane-label[data-size="xs"] { --fs-unit: 6; --gap-unit: 1; }
+    .vane-label[data-size="sm"] { --fs-unit: 7; --gap-unit: 1.5; }
+    .vane-label[data-size="md"] { --fs-unit: 8; --gap-unit: 2; }
+    .vane-label[data-size="lg"] { --fs-unit: 9; --gap-unit: 2.5; }
+    .vane-label[data-size="xl"] { --fs-unit: 10; --gap-unit: 3; }
+
+    /* Card */
+    .vane-card { --br-unit: 5; --py-unit: 6; --aspect-ratio: 1; --gap-unit: 4; }
+    .vane-card[data-size="xs"] { --py-unit: 2; --gap-unit: 2; --br-unit: 3; }
+    .vane-card[data-size="sm"] { --py-unit: 4; --gap-unit: 3; --br-unit: 4; }
+    .vane-card[data-size="md"] { --py-unit: 6; --gap-unit: 4; --br-unit: 5; }
+    .vane-card[data-size="lg"] { --py-unit: 8; --gap-unit: 5; --br-unit: 6; }
+    .vane-card[data-size="xl"] { --py-unit: 10; --gap-unit: 6; --br-unit: 7; }
+
+    /* Stack */
+    .vane-stack { --gap-unit: 4; --py-unit: 4; --aspect-ratio: 1; --br-unit: 5; }
+    .vane-stack[data-size="xs"] { --gap-unit: 2; --py-unit: 2; --br-unit: 3; }
+    .vane-stack[data-size="sm"] { --gap-unit: 3; --py-unit: 3; --br-unit: 4; }
+    .vane-stack[data-size="md"] { --gap-unit: 4; --py-unit: 4; --br-unit: 5; }
+    .vane-stack[data-size="lg"] { --gap-unit: 5; --py-unit: 5; --br-unit: 6; }
+    .vane-stack[data-size="xl"] { --gap-unit: 6; --py-unit: 6; --br-unit: 7; }
+
+    /* Row */
+    .vane-row { --gap-unit: 4; --br-unit: 5; }
+    .vane-row[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
+    .vane-row[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
+    .vane-row[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
+    .vane-row[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
+    .vane-row[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
+
+    /* Col */
+    .vane-col { --gap-unit: 4; --br-unit: 5; }
+    .vane-col[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
+    .vane-col[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
+    .vane-col[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
+    .vane-col[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
+    .vane-col[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
+
+    /* Container */
+    .vane-container { --py-unit: 8; --aspect-ratio: 2; --br-unit: 5; --gap-unit: 4; }
+    .vane-container[data-size="xs"] { --py-unit: 4; --br-unit: 3; --gap-unit: 2; }
+    .vane-container[data-size="sm"] { --py-unit: 6; --br-unit: 4; --gap-unit: 3; }
+    .vane-container[data-size="md"] { --py-unit: 8; --br-unit: 5; --gap-unit: 4; }
+    .vane-container[data-size="lg"] { --py-unit: 10; --br-unit: 6; --gap-unit: 5; }
+    .vane-container[data-size="xl"] { --py-unit: 12; --br-unit: 7; --gap-unit: 6; }
+
+    /* Grid */
+    .vane-grid { --gap-unit: 4; --br-unit: 5; }
+    .vane-grid[data-size="xs"] { --gap-unit: 2; --br-unit: 3; }
+    .vane-grid[data-size="sm"] { --gap-unit: 3; --br-unit: 4; }
+    .vane-grid[data-size="md"] { --gap-unit: 4; --br-unit: 5; }
+    .vane-grid[data-size="lg"] { --gap-unit: 5; --br-unit: 6; }
+    .vane-grid[data-size="xl"] { --gap-unit: 6; --br-unit: 7; }
+
+    /* Divider */
+    .vane-divider { --py-unit: 4; }
+    .vane-divider[data-size="xs"] { --py-unit: 2; }
+    .vane-divider[data-size="sm"] { --py-unit: 3; }
+    .vane-divider[data-size="md"] { --py-unit: 4; }
+    .vane-divider[data-size="lg"] { --py-unit: 5; }
+    .vane-divider[data-size="xl"] { --py-unit: 6; }
+
+    /* Img */
+    .vane-img { --br-unit: 5; }
+    .vane-img[data-size="xs"] { --br-unit: 3; }
+    .vane-img[data-size="sm"] { --br-unit: 4; }
+    .vane-img[data-size="md"] { --br-unit: 5; }
+    .vane-img[data-size="lg"] { --br-unit: 6; }
+    .vane-img[data-size="xl"] { --br-unit: 7; }
+
+    /* List */
+    .vane-list { --lh: 1.6; --py-unit: 3; }
+    .vane-list[data-size="xs"] { --fs-unit: 6; --py-unit: 1; }
+    .vane-list[data-size="sm"] { --fs-unit: 7; --py-unit: 2; }
+    .vane-list[data-size="md"] { --fs-unit: 8; --py-unit: 3; }
+    .vane-list[data-size="lg"] { --fs-unit: 9; --py-unit: 4; }
+    .vane-list[data-size="xl"] { --fs-unit: 10; --py-unit: 5; }
+
+    /* Text */
+    .vane-text { --lh: 1.6; }
+    .vane-text[data-size="xs"] { --fs-unit: 6; }
+    .vane-text[data-size="sm"] { --fs-unit: 7; }
+    .vane-text[data-size="md"] { --fs-unit: 8; }
+    .vane-text[data-size="lg"] { --fs-unit: 9; }
+    .vane-text[data-size="xl"] { --fs-unit: 10; }
+
+    /* Link */
+    .vane-link { --lh: 1.6; }
+    .vane-link[data-size="xs"] { --fs-unit: 6; }
+    .vane-link[data-size="sm"] { --fs-unit: 7; }
+    .vane-link[data-size="md"] { --fs-unit: 8; }
+    .vane-link[data-size="lg"] { --fs-unit: 9; }
+    .vane-link[data-size="xl"] { --fs-unit: 10; }
+
+    /* ListItem */
+    .vane-list-item { --lh: 1.6; }
+    .vane-list-item[data-size="xs"] { --fs-unit: 6; }
+    .vane-list-item[data-size="sm"] { --fs-unit: 7; }
+    .vane-list-item[data-size="md"] { --fs-unit: 8; }
+    .vane-list-item[data-size="lg"] { --fs-unit: 9; }
+    .vane-list-item[data-size="xl"] { --fs-unit: 10; }
+
+    /* RESPONSIVE COMPONENTS */
+
+    /* Section */
+    .vane-section {
+        --lh: 1.6;
+        --py-unit-desktop: 8;
+        --py-unit-tablet: 6;
+        --py-unit-mobile: 4;
+        --gap-unit-desktop: 8;
+        --gap-unit-tablet: 6;
+        --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="xs"] {
+        --py-unit-desktop: 4; --py-unit-tablet: 3; --py-unit-mobile: 2;
+        --gap-unit-desktop: 4; --gap-unit-tablet: 3; --gap-unit-mobile: 2;
+    }
+    .vane-section[data-size="sm"] {
+        --py-unit-desktop: 8; --py-unit-tablet: 4; --py-unit-mobile: 2;
+        --gap-unit-desktop: 6; --gap-unit-tablet: 5; --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="md"] {
+        --py-unit-desktop: 12; --py-unit-tablet: 6; --py-unit-mobile: 2;
+        --gap-unit-desktop: 8; --gap-unit-tablet: 6; --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="lg"] {
+        --py-unit-desktop: 16; --py-unit-tablet: 8; --py-unit-mobile: 2;
+        --gap-unit-desktop: 10; --gap-unit-tablet: 8; --gap-unit-mobile: 6;
+    }
+    .vane-section[data-size="xl"] {
+        --py-unit-desktop: 20; --py-unit-tablet: 10; --py-unit-mobile: 4;
+        --gap-unit-desktop: 12; --gap-unit-tablet: 10; --gap-unit-mobile: 8;
+    }
+
+    /* Title */
+    .vane-title {
+        --lh: 1.3;
+        --fs-unit-desktop: 12; --fs-unit-tablet: 11; --fs-unit-mobile: 10;
+    }
+    .vane-title[data-size="xs"] { --fs-unit-desktop: 9; --fs-unit-tablet: 8; --fs-unit-mobile: 7; --lh: 1.556; }
+    .vane-title[data-size="sm"] { --fs-unit-desktop: 10; --fs-unit-tablet: 9; --fs-unit-mobile: 8; --lh: 1.4; }
+    .vane-title[data-size="md"] { --fs-unit-desktop: 12; --fs-unit-tablet: 11; --fs-unit-mobile: 10; --lh: 1.333; }
+    .vane-title[data-size="lg"] { --fs-unit-desktop: 15; --fs-unit-tablet: 14; --fs-unit-mobile: 13; --lh: 1.2; }
+    .vane-title[data-size="xl"] { --fs-unit-desktop: 18; --fs-unit-tablet: 17; --fs-unit-mobile: 16; --lh: 1.111; }
+
+    /* SectionTitle */
+    .vane-section-title {
+        --lh: 1.2;
+        --fs-unit-desktop: 18; --fs-unit-tablet: 16; --fs-unit-mobile: 14;
+    }
+    .vane-section-title[data-size="xs"] { --fs-unit-desktop: 12; --fs-unit-tablet: 10; --fs-unit-mobile: 8; --lh: 1.333; }
+    .vane-section-title[data-size="sm"] { --fs-unit-desktop: 15; --fs-unit-tablet: 13; --fs-unit-mobile: 11; --lh: 1.2; }
+    .vane-section-title[data-size="md"] { --fs-unit-desktop: 18; --fs-unit-tablet: 16; --fs-unit-mobile: 14; --lh: 1.111; }
+    .vane-section-title[data-size="lg"] { --fs-unit-desktop: 24; --fs-unit-tablet: 22; --fs-unit-mobile: 20; --lh: 1; }
+    .vane-section-title[data-size="xl"] { --fs-unit-desktop: 30; --fs-unit-tablet: 28; --fs-unit-mobile: 26; --lh: 1; }
+
+    /* PageTitle */
+    .vane-page-title {
+        --lh: 1.1;
+        --fs-unit-desktop: 24; --fs-unit-tablet: 21; --fs-unit-mobile: 18;
+    }
+    .vane-page-title[data-size="xs"] { --fs-unit-desktop: 15; --fs-unit-tablet: 12; --fs-unit-mobile: 9; --lh: 1.2; }
+    .vane-page-title[data-size="sm"] { --fs-unit-desktop: 18; --fs-unit-tablet: 15; --fs-unit-mobile: 12; --lh: 1.111; }
+    .vane-page-title[data-size="md"] { --fs-unit-desktop: 24; --fs-unit-tablet: 21; --fs-unit-mobile: 18; --lh: 1; }
+    .vane-page-title[data-size="lg"] { --fs-unit-desktop: 30; --fs-unit-tablet: 27; --fs-unit-mobile: 24; --lh: 1; }
+    .vane-page-title[data-size="xl"] { --fs-unit-desktop: 36; --fs-unit-tablet: 33; --fs-unit-mobile: 30; --lh: 1; }
+
+    /* ========================================
+       APPEARANCE & VARIANT RULES
+       Sets component-level color variables based on
+       data-appearance and data-variant attributes.
+
+       These rules apply to ANY element with the
+       data-variant and data-appearance attributes.
+       Components only consume the variables they need.
+       ======================================== */
+
+    /* -----------------------------------------
+       OUTLINE VARIANT
+       ----------------------------------------- */
+    [data-variant="outline"][data-appearance="primary"] {
+        --text-color: var(--color-text-primary);
+        --bg-color: var(--color-bg-primary);
+        --bg-hover-color: var(--color-bg-hover-primary);
+        --bg-active-color: var(--color-bg-active-primary);
+        --border-color: var(--color-border-primary);
+        --ring-color: var(--color-border-primary);
+        --accent-color: var(--color-bg-primary);
+        --checked-bg-color: var(--color-bg-primary);
+    }
+    [data-variant="outline"][data-appearance="brand"] {
+        --text-color: var(--color-text-brand);
+        --bg-color: var(--color-bg-brand);
+        --bg-hover-color: var(--color-bg-hover-brand);
+        --bg-active-color: var(--color-bg-active-brand);
+        --border-color: var(--color-border-brand);
+        --ring-color: var(--color-border-brand);
+        --accent-color: var(--color-bg-brand);
+        --checked-bg-color: var(--color-bg-brand);
+    }
+    [data-variant="outline"][data-appearance="secondary"] {
+        --text-color: var(--color-text-secondary);
+        --bg-color: var(--color-bg-secondary);
+        --bg-hover-color: var(--color-bg-hover-secondary);
+        --bg-active-color: var(--color-bg-active-secondary);
+        --border-color: var(--color-border-secondary);
+        --ring-color: var(--color-border-secondary);
+        --accent-color: var(--color-bg-secondary);
+        --checked-bg-color: var(--color-bg-secondary);
+    }
+    [data-variant="outline"][data-appearance="tertiary"] {
+        --text-color: var(--color-text-tertiary);
+        --bg-color: var(--color-bg-tertiary);
+        --bg-hover-color: var(--color-bg-hover-tertiary);
+        --bg-active-color: var(--color-bg-active-tertiary);
+        --border-color: var(--color-border-tertiary);
+        --ring-color: var(--color-border-tertiary);
+        --accent-color: var(--color-bg-tertiary);
+        --checked-bg-color: var(--color-bg-tertiary);
+    }
+    [data-variant="outline"][data-appearance="accent"] {
+        --text-color: var(--color-text-accent);
+        --bg-color: var(--color-bg-accent);
+        --bg-hover-color: var(--color-bg-hover-accent);
+        --bg-active-color: var(--color-bg-active-accent);
+        --border-color: var(--color-border-accent);
+        --ring-color: var(--color-border-accent);
+        --accent-color: var(--color-bg-accent);
+        --checked-bg-color: var(--color-bg-accent);
+    }
+    [data-variant="outline"][data-appearance="success"] {
+        --text-color: var(--color-text-success);
+        --bg-color: var(--color-bg-success);
+        --bg-hover-color: var(--color-bg-hover-success);
+        --bg-active-color: var(--color-bg-active-success);
+        --border-color: var(--color-border-success);
+        --ring-color: var(--color-border-success);
+        --accent-color: var(--color-bg-success);
+        --checked-bg-color: var(--color-bg-success);
+    }
+    [data-variant="outline"][data-appearance="danger"] {
+        --text-color: var(--color-text-danger);
+        --bg-color: var(--color-bg-danger);
+        --bg-hover-color: var(--color-bg-hover-danger);
+        --bg-active-color: var(--color-bg-active-danger);
+        --border-color: var(--color-border-danger);
+        --ring-color: var(--color-border-danger);
+        --accent-color: var(--color-bg-danger);
+        --checked-bg-color: var(--color-bg-danger);
+    }
+    [data-variant="outline"][data-appearance="warning"] {
+        --text-color: var(--color-text-warning);
+        --bg-color: var(--color-bg-warning);
+        --bg-hover-color: var(--color-bg-hover-warning);
+        --bg-active-color: var(--color-bg-active-warning);
+        --border-color: var(--color-border-warning);
+        --ring-color: var(--color-border-warning);
+        --accent-color: var(--color-bg-warning);
+        --checked-bg-color: var(--color-bg-warning);
+    }
+    [data-variant="outline"][data-appearance="info"] {
+        --text-color: var(--color-text-info);
+        --bg-color: var(--color-bg-info);
+        --bg-hover-color: var(--color-bg-hover-info);
+        --bg-active-color: var(--color-bg-active-info);
+        --border-color: var(--color-border-info);
+        --ring-color: var(--color-border-info);
+        --accent-color: var(--color-bg-info);
+        --checked-bg-color: var(--color-bg-info);
+    }
+
+    /* -----------------------------------------
+       FILLED VARIANT
+       ----------------------------------------- */
+    [data-variant="filled"][data-appearance="primary"] {
+        --text-color: var(--color-text-filled-primary);
+        --bg-color: var(--color-bg-filled-primary);
+        --bg-hover-color: var(--color-bg-filled-hover-primary);
+        --bg-active-color: var(--color-bg-filled-active-primary);
+        --border-color: var(--color-border-filled-primary);
+        --ring-color: var(--color-border-filled-primary);
+        --accent-color: var(--color-bg-filled-primary);
+        --checked-bg-color: var(--color-bg-filled-primary);
+    }
+    [data-variant="filled"][data-appearance="brand"] {
+        --text-color: var(--color-text-filled-brand);
+        --bg-color: var(--color-bg-filled-brand);
+        --bg-hover-color: var(--color-bg-filled-hover-brand);
+        --bg-active-color: var(--color-bg-filled-active-brand);
+        --border-color: var(--color-border-filled-brand);
+        --ring-color: var(--color-border-filled-brand);
+        --accent-color: var(--color-bg-filled-brand);
+        --checked-bg-color: var(--color-bg-filled-brand);
+    }
+    [data-variant="filled"][data-appearance="secondary"] {
+        --text-color: var(--color-text-filled-secondary);
+        --bg-color: var(--color-bg-filled-secondary);
+        --bg-hover-color: var(--color-bg-filled-hover-secondary);
+        --bg-active-color: var(--color-bg-filled-active-secondary);
+        --border-color: var(--color-border-filled-secondary);
+        --ring-color: var(--color-border-filled-secondary);
+        --accent-color: var(--color-bg-filled-secondary);
+        --checked-bg-color: var(--color-bg-filled-secondary);
+    }
+    [data-variant="filled"][data-appearance="tertiary"] {
+        --text-color: var(--color-text-filled-tertiary);
+        --bg-color: var(--color-bg-filled-tertiary);
+        --bg-hover-color: var(--color-bg-filled-hover-tertiary);
+        --bg-active-color: var(--color-bg-filled-active-tertiary);
+        --border-color: var(--color-border-filled-tertiary);
+        --ring-color: var(--color-border-filled-tertiary);
+        --accent-color: var(--color-bg-filled-tertiary);
+        --checked-bg-color: var(--color-bg-filled-tertiary);
+    }
+    [data-variant="filled"][data-appearance="accent"] {
+        --text-color: var(--color-text-filled-accent);
+        --bg-color: var(--color-bg-filled-accent);
+        --bg-hover-color: var(--color-bg-filled-hover-accent);
+        --bg-active-color: var(--color-bg-filled-active-accent);
+        --border-color: var(--color-border-filled-accent);
+        --ring-color: var(--color-border-filled-accent);
+        --accent-color: var(--color-bg-filled-accent);
+        --checked-bg-color: var(--color-bg-filled-accent);
+    }
+    [data-variant="filled"][data-appearance="success"] {
+        --text-color: var(--color-text-filled-success);
+        --bg-color: var(--color-bg-filled-success);
+        --bg-hover-color: var(--color-bg-filled-hover-success);
+        --bg-active-color: var(--color-bg-filled-active-success);
+        --border-color: var(--color-border-filled-success);
+        --ring-color: var(--color-border-filled-success);
+        --accent-color: var(--color-bg-filled-success);
+        --checked-bg-color: var(--color-bg-filled-success);
+    }
+    [data-variant="filled"][data-appearance="danger"] {
+        --text-color: var(--color-text-filled-danger);
+        --bg-color: var(--color-bg-filled-danger);
+        --bg-hover-color: var(--color-bg-filled-hover-danger);
+        --bg-active-color: var(--color-bg-filled-active-danger);
+        --border-color: var(--color-border-filled-danger);
+        --ring-color: var(--color-border-filled-danger);
+        --accent-color: var(--color-bg-filled-danger);
+        --checked-bg-color: var(--color-bg-filled-danger);
+    }
+    [data-variant="filled"][data-appearance="warning"] {
+        --text-color: var(--color-text-filled-warning);
+        --bg-color: var(--color-bg-filled-warning);
+        --bg-hover-color: var(--color-bg-filled-hover-warning);
+        --bg-active-color: var(--color-bg-filled-active-warning);
+        --border-color: var(--color-border-filled-warning);
+        --ring-color: var(--color-border-filled-warning);
+        --accent-color: var(--color-bg-filled-warning);
+        --checked-bg-color: var(--color-bg-filled-warning);
+    }
+    [data-variant="filled"][data-appearance="info"] {
+        --text-color: var(--color-text-filled-info);
+        --bg-color: var(--color-bg-filled-info);
+        --bg-hover-color: var(--color-bg-filled-hover-info);
+        --bg-active-color: var(--color-bg-filled-active-info);
+        --border-color: var(--color-border-filled-info);
+        --ring-color: var(--color-border-filled-info);
+        --accent-color: var(--color-bg-filled-info);
+        --checked-bg-color: var(--color-bg-filled-info);
+    }
+
+    /* -----------------------------------------
+       TRANSPARENT STATE
+       Overrides colors when data-transparent is set
+       ----------------------------------------- */
+    [data-transparent="true"] {
+        --bg-color: transparent;
+        --bg-hover-color: transparent;
+        --bg-active-color: transparent;
+        --accent-color: transparent;
+        --checked-bg-color: transparent;
+    }
+
+    /* Typography components: transparent affects text color */
+    .vane-text[data-transparent="true"],
+    .vane-link[data-transparent="true"],
+    .vane-title[data-transparent="true"],
+    .vane-section-title[data-transparent="true"],
+    .vane-page-title[data-transparent="true"],
+    .vane-label[data-transparent="true"],
+    .vane-list-item[data-transparent="true"] {
+        --text-color: transparent;
     }
+
 }
 /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
 @layer theme {
@@ -203,6 +638,7 @@
     --color-yellow-50: oklch(98.7% 0.026 102.212);
     --color-yellow-100: oklch(97.3% 0.071 103.193);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
+    --color-lime-400: oklch(84.1% 0.238 128.85);
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -211,10 +647,14 @@
     --color-emerald-100: oklch(95% 0.052 163.051);
     --color-emerald-200: oklch(90.5% 0.093 164.15);
     --color-emerald-300: oklch(84.5% 0.143 164.978);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
     --color-emerald-500: oklch(69.6% 0.17 162.48);
     --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-emerald-700: oklch(50.8% 0.118 165.612);
     --color-emerald-800: oklch(43.2% 0.095 166.913);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-teal-600: oklch(60% 0.118 184.704);
+    --color-teal-700: oklch(51.1% 0.096 186.391);
     --color-cyan-50: oklch(98.4% 0.019 200.873);
     --color-cyan-100: oklch(95.6% 0.045 203.388);
     --color-cyan-200: oklch(91.7% 0.08 205.041);
@@ -222,6 +662,7 @@
     --color-cyan-600: oklch(60.9% 0.126 221.723);
     --color-cyan-700: oklch(52% 0.105 223.128);
     --color-cyan-800: oklch(45% 0.085 224.283);
+    --color-sky-400: oklch(74.6% 0.16 232.661);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-200: oklch(88.2% 0.059 254.128);
@@ -233,33 +674,43 @@
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-indigo-50: oklch(96.2% 0.018 272.314);
     --color-indigo-100: oklch(93% 0.034 272.788);
+    --color-indigo-300: oklch(78.5% 0.115 274.713);
     --color-indigo-400: oklch(67.3% 0.182 276.935);
     --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-indigo-700: oklch(45.7% 0.24 277.023);
     --color-violet-400: oklch(70.2% 0.183 293.541);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-violet-700: oklch(49.1% 0.27 292.581);
     --color-purple-100: oklch(94.6% 0.033 307.174);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
     --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
     --color-pink-600: oklch(59.2% 0.249 0.584);
+    --color-pink-700: oklch(52.5% 0.223 3.958);
     --color-rose-50: oklch(96.9% 0.015 12.422);
     --color-rose-100: oklch(94.1% 0.03 12.58);
     --color-rose-200: oklch(89.2% 0.058 10.001);
     --color-rose-300: oklch(81% 0.117 11.638);
+    --color-rose-500: oklch(64.5% 0.246 16.439);
     --color-rose-600: oklch(58.6% 0.253 17.585);
     --color-rose-700: oklch(51.4% 0.222 16.935);
     --color-rose-800: oklch(45.5% 0.188 13.697);
+    --color-slate-800: oklch(27.9% 0.041 260.031);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-gray-950: oklch(13% 0.028 261.692);
+    --color-stone-100: oklch(97% 0.001 106.424);
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-sm: 24rem;
@@ -276,22 +727,10 @@
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
-    --text-lg: 1.125rem;
-    --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
-    --text-3xl: 1.875rem;
-    --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-5xl--line-height: 1;
-    --text-6xl: 3.75rem;
-    --text-6xl--line-height: 1;
-    --text-7xl: 4.5rem;
-    --text-7xl--line-height: 1;
     --font-weight-thin: 100;
     --font-weight-extralight: 200;
     --font-weight-light: 300;
@@ -304,6 +743,9 @@
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --leading-relaxed: 1.625;
+    --leading-loose: 2;
+    --radius-lg: 0.5rem;
+    --radius-2xl: 1rem;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
@@ -314,7 +756,6 @@
     --color-text-brand: var(--color-blue-600);
     --color-text-secondary: var(--color-gray-600);
     --color-text-tertiary: var(--color-gray-500);
-    --color-text-link: var(--color-blue-600);
     --color-text-accent: var(--color-rose-700);
     --color-text-success: var(--color-emerald-600);
     --color-text-danger: var(--color-red-600);
@@ -324,7 +765,6 @@
     --color-text-filled-brand: var(--color-blue-100);
     --color-text-filled-secondary: var(--color-gray-200);
     --color-text-filled-tertiary: var(--color-gray-300);
-    --color-text-filled-link: var(--color-blue-100);
     --color-text-filled-accent: var(--color-rose-100);
     --color-text-filled-success: var(--color-emerald-100);
     --color-text-filled-danger: var(--color-red-100);
@@ -384,28 +824,10 @@
     --color-bg-filled-active-danger: var(--color-red-800);
     --color-bg-filled-active-warning: var(--color-amber-800);
     --color-bg-filled-active-info: var(--color-cyan-800);
-    --color-bg-layout-primary: var(--color-white);
-    --color-bg-layout-brand: var(--color-blue-50);
-    --color-bg-layout-secondary: var(--color-gray-50);
-    --color-bg-layout-tertiary: var(--color-gray-100);
-    --color-bg-layout-accent: var(--color-indigo-50);
-    --color-bg-layout-success: var(--color-green-50);
-    --color-bg-layout-danger: var(--color-red-50);
-    --color-bg-layout-warning: var(--color-yellow-50);
-    --color-bg-layout-info: var(--color-blue-50);
-    --color-bg-filled-layout-primary: var(--color-gray-700);
-    --color-bg-filled-layout-brand: var(--color-blue-800);
-    --color-bg-filled-layout-secondary: var(--color-gray-800);
-    --color-bg-filled-layout-tertiary: var(--color-gray-900);
-    --color-bg-filled-layout-accent: var(--color-indigo-700);
-    --color-bg-filled-layout-success: var(--color-green-700);
-    --color-bg-filled-layout-danger: var(--color-red-700);
-    --color-bg-filled-layout-warning: var(--color-yellow-800);
-    --color-bg-filled-layout-info: var(--color-blue-700);
     --color-border-primary: var(--color-gray-200);
     --color-border-brand: var(--color-blue-300);
-    --color-border-secondary: var(--color-gray-300);
-    --color-border-tertiary: var(--color-gray-400);
+    --color-border-secondary: var(--color-gray-200);
+    --color-border-tertiary: var(--color-gray-200);
     --color-border-accent: var(--color-rose-300);
     --color-border-success: var(--color-emerald-300);
     --color-border-danger: var(--color-red-300);
@@ -413,21 +835,17 @@
     --color-border-info: var(--color-cyan-300);
     --color-border-filled-primary: var(--color-gray-600);
     --color-border-filled-brand: var(--color-blue-600);
-    --color-border-filled-secondary: var(--color-gray-700);
+    --color-border-filled-secondary: var(--color-gray-600);
     --color-border-filled-tertiary: var(--color-gray-600);
     --color-border-filled-accent: var(--color-rose-600);
     --color-border-filled-success: var(--color-emerald-600);
     --color-border-filled-danger: var(--color-red-600);
     --color-border-filled-warning: var(--color-amber-600);
     --color-border-filled-info: var(--color-cyan-600);
-    --layout-spacing: var(--spacing);
-    --ui-spacing: var(--spacing);
     --br-base: var(--spacing);
-    --ui-br-base: calc(var(--spacing) * 0.5);
     --fs-base: calc(var(--spacing) * 0.5);
-    --breakpoint-mobile: 40rem;
-    --breakpoint-tablet: 48rem;
-    --breakpoint-laptop: 64rem;
+    --breakpoint-mobile: 48rem;
+    --breakpoint-tablet: 64rem;
     --breakpoint-desktop: 80rem;
     --lh: 1;
     --fs-unit: 8;
@@ -436,6 +854,8 @@
     --py-unit: 1;
     --br-unit: 1;
     --size-unit: 1;
+    --bw: 1px;
+    --rw: 1px;
   }
 }
 @layer base {
@@ -619,9 +1039,6 @@
     @media (width >= 40rem) {
       max-width: 40rem;
     }
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
     @media (width >= 48rem) {
       max-width: 48rem;
     }
@@ -695,9 +1112,16 @@
   .aspect-ratio {
     aspect-ratio: var(--aspect-ratio);
   }
-  .size-\(--ui-size\) {
-    width: var(--ui-size);
-    height: var(--ui-size);
+  .size-\(--size\) {
+    width: var(--size);
+    height: var(--size);
+  }
+  .size-unit {
+    width: var(--size-unit);
+    height: var(--size-unit);
+  }
+  .h-\(--bw\) {
+    height: var(--bw);
   }
   .h-10 {
     height: calc(var(--spacing) * 10);
@@ -711,9 +1135,6 @@
   .h-fit {
     height: fit-content;
   }
-  .h-px {
-    height: 1px;
-  }
   .h-screen {
     height: 100vh;
   }
@@ -852,15 +1273,18 @@
   .gap-\(--gap\) {
     gap: var(--gap);
   }
-  .gap-\(--ui-gap\) {
-    gap: var(--ui-gap);
-  }
   .gap-0 {
     gap: calc(var(--spacing) * 0);
   }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .gap-12 {
+    gap: calc(var(--spacing) * 12);
+  }
   .gap-unit {
     gap: var(--gap-unit);
   }
@@ -934,12 +1358,15 @@
   .rounded-\(--br\) {
     border-radius: var(--br);
   }
-  .rounded-\(--ui-br\) {
-    border-radius: var(--ui-br);
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
   }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-none {
     border-radius: 0;
   }
@@ -951,91 +1378,68 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[length\:var\(--bw\)\] {
+    border-style: var(--tw-border-style);
+    border-width: var(--bw);
+  }
   .border-x {
     border-inline-style: var(--tw-border-style);
     border-inline-width: 1px;
   }
+  .border-x-\[length\:var\(--bw\)\] {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: var(--bw);
+  }
   .border-y {
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
   }
+  .border-y-\[length\:var\(--bw\)\] {
+    border-block-style: var(--tw-border-style);
+    border-block-width: var(--bw);
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
   }
+  .border-t-\[length\:var\(--bw\)\] {
+    border-top-style: var(--tw-border-style);
+    border-top-width: var(--bw);
+  }
   .border-r {
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
+  .border-r-\[length\:var\(--bw\)\] {
+    border-right-style: var(--tw-border-style);
+    border-right-width: var(--bw);
+  }
   .border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-b-\[length\:var\(--bw\)\] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--bw);
+  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-\[length\:var\(--bw\)\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: var(--bw);
+  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\(--color-border-accent\) {
-    border-color: var(--color-border-accent);
-  }
-  .border-\(--color-border-brand\) {
-    border-color: var(--color-border-brand);
-  }
-  .border-\(--color-border-danger\) {
-    border-color: var(--color-border-danger);
+  .border-\(--border-color\) {
+    border-color: var(--border-color);
   }
   .border-\(--color-border-default\) {
     border-color: var(--color-border-default);
   }
-  .border-\(--color-border-filled-accent\) {
-    border-color: var(--color-border-filled-accent);
-  }
-  .border-\(--color-border-filled-brand\) {
-    border-color: var(--color-border-filled-brand);
-  }
-  .border-\(--color-border-filled-danger\) {
-    border-color: var(--color-border-filled-danger);
-  }
-  .border-\(--color-border-filled-info\) {
-    border-color: var(--color-border-filled-info);
-  }
-  .border-\(--color-border-filled-primary\) {
-    border-color: var(--color-border-filled-primary);
-  }
-  .border-\(--color-border-filled-secondary\) {
-    border-color: var(--color-border-filled-secondary);
-  }
-  .border-\(--color-border-filled-success\) {
-    border-color: var(--color-border-filled-success);
-  }
-  .border-\(--color-border-filled-tertiary\) {
-    border-color: var(--color-border-filled-tertiary);
-  }
-  .border-\(--color-border-filled-warning\) {
-    border-color: var(--color-border-filled-warning);
-  }
-  .border-\(--color-border-info\) {
-    border-color: var(--color-border-info);
-  }
-  .border-\(--color-border-primary\) {
-    border-color: var(--color-border-primary);
-  }
-  .border-\(--color-border-secondary\) {
-    border-color: var(--color-border-secondary);
-  }
-  .border-\(--color-border-success\) {
-    border-color: var(--color-border-success);
-  }
-  .border-\(--color-border-tertiary\) {
-    border-color: var(--color-border-tertiary);
-  }
-  .border-\(--color-border-warning\) {
-    border-color: var(--color-border-warning);
-  }
   .border-gray-600 {
     border-color: var(--color-gray-600);
   }
@@ -1045,9 +1449,21 @@
   .border-indigo-400 {
     border-color: var(--color-indigo-400);
   }
+  .border-indigo-500 {
+    border-color: var(--color-indigo-500);
+  }
+  .border-lime-400 {
+    border-color: var(--color-lime-400);
+  }
+  .border-purple-500 {
+    border-color: var(--color-purple-500);
+  }
   .border-red-600 {
     border-color: var(--color-red-600);
   }
+  .border-sky-400 {
+    border-color: var(--color-sky-400);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1069,18 +1485,42 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
+  .bg-indigo-600 {
+    background-color: var(--color-indigo-600);
+  }
+  .bg-orange-500 {
+    background-color: var(--color-orange-500);
+  }
   .bg-purple-600 {
     background-color: var(--color-purple-600);
   }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+  .bg-stone-100 {
+    background-color: var(--color-stone-100);
+  }
+  .bg-teal-500 {
+    background-color: var(--color-teal-500);
+  }
   .bg-violet-600 {
     background-color: var(--color-violet-600);
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
   .bg-gradient-to-r {
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -1089,10 +1529,18 @@
     --tw-gradient-from: var(--color-indigo-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .from-pink-500 {
+    --tw-gradient-from: var(--color-pink-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .to-purple-600 {
     --tw-gradient-to: var(--color-purple-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .to-violet-500 {
+    --tw-gradient-to: var(--color-violet-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -1105,21 +1553,21 @@
   .px-\(--px\) {
     padding-inline: var(--px);
   }
-  .px-\(--ui-px\) {
-    padding-inline: var(--ui-px);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
   .py-\(--py\) {
     padding-block: var(--py);
   }
-  .py-\(--ui-py\) {
-    padding-block: var(--ui-py);
-  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1135,11 +1583,8 @@
   .py-10 {
     padding-block: calc(var(--spacing) * 10);
   }
-  .pl-2 {
-    padding-left: calc(var(--spacing) * 2);
-  }
-  .pl-4 {
-    padding-left: calc(var(--spacing) * 4);
+  .pl-\(--pl\) {
+    padding-left: var(--pl);
   }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
@@ -1147,9 +1592,6 @@
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
   .text-center {
     text-align: center;
   }
@@ -1175,34 +1617,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
-  .text-3xl {
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
-  }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
-  .text-5xl {
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-  }
-  .text-6xl {
-    font-size: var(--text-6xl);
-    line-height: var(--tw-leading, var(--text-6xl--line-height));
-  }
-  .text-7xl {
-    font-size: var(--text-7xl);
-    line-height: var(--tw-leading, var(--text-7xl--line-height));
-  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
-  .text-lg {
-    font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1225,6 +1643,10 @@
     --tw-leading: var(--lh);
     line-height: var(--lh);
   }
+  .leading-loose {
+    --tw-leading: var(--leading-loose);
+    line-height: var(--leading-loose);
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1279,65 +1701,17 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\(--color-text-accent\) {
-    color: var(--color-text-accent);
-  }
-  .text-\(--color-text-brand\) {
-    color: var(--color-text-brand);
-  }
-  .text-\(--color-text-danger\) {
-    color: var(--color-text-danger);
-  }
-  .text-\(--color-text-filled-accent\) {
-    color: var(--color-text-filled-accent);
-  }
-  .text-\(--color-text-filled-brand\) {
-    color: var(--color-text-filled-brand);
-  }
-  .text-\(--color-text-filled-danger\) {
-    color: var(--color-text-filled-danger);
-  }
-  .text-\(--color-text-filled-info\) {
-    color: var(--color-text-filled-info);
-  }
-  .text-\(--color-text-filled-link\) {
-    color: var(--color-text-filled-link);
-  }
   .text-\(--color-text-filled-primary\) {
     color: var(--color-text-filled-primary);
   }
-  .text-\(--color-text-filled-secondary\) {
-    color: var(--color-text-filled-secondary);
-  }
-  .text-\(--color-text-filled-success\) {
-    color: var(--color-text-filled-success);
-  }
-  .text-\(--color-text-filled-tertiary\) {
-    color: var(--color-text-filled-tertiary);
-  }
-  .text-\(--color-text-filled-warning\) {
-    color: var(--color-text-filled-warning);
-  }
-  .text-\(--color-text-info\) {
-    color: var(--color-text-info);
-  }
-  .text-\(--color-text-link\) {
-    color: var(--color-text-link);
-  }
   .text-\(--color-text-primary\) {
     color: var(--color-text-primary);
   }
-  .text-\(--color-text-secondary\) {
-    color: var(--color-text-secondary);
-  }
-  .text-\(--color-text-success\) {
-    color: var(--color-text-success);
-  }
-  .text-\(--color-text-tertiary\) {
-    color: var(--color-text-tertiary);
+  .text-\(--text-color\) {
+    color: var(--text-color);
   }
-  .text-\(--color-text-warning\) {
-    color: var(--color-text-warning);
+  .text-amber-600 {
+    color: var(--color-amber-600);
   }
   .text-blue-200 {
     color: var(--color-blue-200);
@@ -1345,6 +1719,9 @@
   .text-blue-500 {
     color: var(--color-blue-500);
   }
+  .text-cyan-700 {
+    color: var(--color-cyan-700);
+  }
   .text-gray-500 {
     color: var(--color-gray-500);
   }
@@ -1372,6 +1749,12 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-rose-500 {
+    color: var(--color-rose-500);
+  }
+  .text-slate-800 {
+    color: var(--color-slate-800);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -1414,62 +1797,8 @@
   .underline {
     text-decoration-line: underline;
   }
-  .accent-\(--color-bg-accent\) {
-    accent-color: var(--color-bg-accent);
-  }
-  .accent-\(--color-bg-brand\) {
-    accent-color: var(--color-bg-brand);
-  }
-  .accent-\(--color-bg-danger\) {
-    accent-color: var(--color-bg-danger);
-  }
-  .accent-\(--color-bg-filled-accent\) {
-    accent-color: var(--color-bg-filled-accent);
-  }
-  .accent-\(--color-bg-filled-brand\) {
-    accent-color: var(--color-bg-filled-brand);
-  }
-  .accent-\(--color-bg-filled-danger\) {
-    accent-color: var(--color-bg-filled-danger);
-  }
-  .accent-\(--color-bg-filled-info\) {
-    accent-color: var(--color-bg-filled-info);
-  }
-  .accent-\(--color-bg-filled-primary\) {
-    accent-color: var(--color-bg-filled-primary);
-  }
-  .accent-\(--color-bg-filled-secondary\) {
-    accent-color: var(--color-bg-filled-secondary);
-  }
-  .accent-\(--color-bg-filled-success\) {
-    accent-color: var(--color-bg-filled-success);
-  }
-  .accent-\(--color-bg-filled-tertiary\) {
-    accent-color: var(--color-bg-filled-tertiary);
-  }
-  .accent-\(--color-bg-filled-warning\) {
-    accent-color: var(--color-bg-filled-warning);
-  }
-  .accent-\(--color-bg-info\) {
-    accent-color: var(--color-bg-info);
-  }
-  .accent-\(--color-bg-primary\) {
-    accent-color: var(--color-bg-primary);
-  }
-  .accent-\(--color-bg-secondary\) {
-    accent-color: var(--color-bg-secondary);
-  }
-  .accent-\(--color-bg-success\) {
-    accent-color: var(--color-bg-success);
-  }
-  .accent-\(--color-bg-tertiary\) {
-    accent-color: var(--color-bg-tertiary);
-  }
-  .accent-\(--color-bg-warning\) {
-    accent-color: var(--color-bg-warning);
-  }
-  .accent-transparent {
-    accent-color: transparent;
+  .accent-\(--accent-color\) {
+    accent-color: var(--accent-color);
   }
   .opacity-50 {
     opacity: 50%;
@@ -1513,6 +1842,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-\[length\:var\(--rw\)\] {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(var(--rw) + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-orange-500\/50 {
     --tw-shadow-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1525,59 +1858,23 @@
       --tw-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-shadow-alpha), transparent);
     }
   }
-  .ring-\(--color-border-accent\) {
-    --tw-ring-color: var(--color-border-accent);
-  }
-  .ring-\(--color-border-brand\) {
-    --tw-ring-color: var(--color-border-brand);
-  }
-  .ring-\(--color-border-danger\) {
-    --tw-ring-color: var(--color-border-danger);
-  }
-  .ring-\(--color-border-filled-accent\) {
-    --tw-ring-color: var(--color-border-filled-accent);
-  }
-  .ring-\(--color-border-filled-brand\) {
-    --tw-ring-color: var(--color-border-filled-brand);
-  }
-  .ring-\(--color-border-filled-danger\) {
-    --tw-ring-color: var(--color-border-filled-danger);
-  }
-  .ring-\(--color-border-filled-info\) {
-    --tw-ring-color: var(--color-border-filled-info);
-  }
   .ring-\(--color-border-filled-primary\) {
     --tw-ring-color: var(--color-border-filled-primary);
   }
-  .ring-\(--color-border-filled-secondary\) {
-    --tw-ring-color: var(--color-border-filled-secondary);
-  }
-  .ring-\(--color-border-filled-success\) {
-    --tw-ring-color: var(--color-border-filled-success);
-  }
-  .ring-\(--color-border-filled-tertiary\) {
-    --tw-ring-color: var(--color-border-filled-tertiary);
-  }
-  .ring-\(--color-border-filled-warning\) {
-    --tw-ring-color: var(--color-border-filled-warning);
-  }
-  .ring-\(--color-border-info\) {
-    --tw-ring-color: var(--color-border-info);
-  }
   .ring-\(--color-border-primary\) {
     --tw-ring-color: var(--color-border-primary);
   }
-  .ring-\(--color-border-secondary\) {
-    --tw-ring-color: var(--color-border-secondary);
+  .ring-\(--ring-color\) {
+    --tw-ring-color: var(--ring-color);
   }
-  .ring-\(--color-border-success\) {
-    --tw-ring-color: var(--color-border-success);
+  .ring-emerald-400 {
+    --tw-ring-color: var(--color-emerald-400);
   }
-  .ring-\(--color-border-tertiary\) {
-    --tw-ring-color: var(--color-border-tertiary);
+  .ring-fuchsia-500 {
+    --tw-ring-color: var(--color-fuchsia-500);
   }
-  .ring-\(--color-border-warning\) {
-    --tw-ring-color: var(--color-border-warning);
+  .ring-indigo-300 {
+    --tw-ring-color: var(--color-indigo-300);
   }
   .ring-orange-500 {
     --tw-ring-color: var(--color-orange-500);
@@ -1611,63 +1908,12 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .\[--aspect-ratio\:1\.5\] {
-    --aspect-ratio: 1.5;
-  }
-  .\[--aspect-ratio\:1\.6\] {
-    --aspect-ratio: 1.6;
-  }
-  .\[--aspect-ratio\:1\.8\] {
-    --aspect-ratio: 1.8;
-  }
-  .\[--aspect-ratio\:1\.75\] {
-    --aspect-ratio: 1.75;
-  }
-  .\[--aspect-ratio\:1\] {
-    --aspect-ratio: 1;
-  }
-  .\[--aspect-ratio\:2\.5\] {
-    --aspect-ratio: 2.5;
-  }
   .\[--aspect-ratio\:2\] {
     --aspect-ratio: 2;
   }
-  .\[--aspect-ratio\:3\] {
-    --aspect-ratio: 3;
-  }
-  .\[--aspect-ratio\:4\] {
-    --aspect-ratio: 4;
-  }
-  .\[--br-unit\:1\.5\] {
-    --br-unit: 1.5;
-  }
-  .\[--br-unit\:1\] {
-    --br-unit: 1;
-  }
-  .\[--br-unit\:2\.5\] {
-    --br-unit: 2.5;
-  }
-  .\[--br-unit\:2\] {
-    --br-unit: 2;
-  }
-  .\[--br-unit\:3\] {
-    --br-unit: 3;
-  }
   .\[--br-unit\:4\] {
     --br-unit: 4;
   }
-  .\[--br-unit\:5\] {
-    --br-unit: 5;
-  }
-  .\[--br-unit\:6\] {
-    --br-unit: 6;
-  }
-  .\[--br-unit\:7\] {
-    --br-unit: 7;
-  }
-  .\[--fs-unit\:5\] {
-    --fs-unit: 5;
-  }
   .\[--fs-unit\:6\] {
     --fs-unit: 6;
   }
@@ -1683,96 +1929,24 @@
   .\[--fs-unit\:10\] {
     --fs-unit: 10;
   }
-  .\[--fs-unit\:12\] {
-    --fs-unit: 12;
-  }
   .\[--fs-unit\:15\] {
     --fs-unit: 15;
   }
-  .\[--fs-unit\:18\] {
-    --fs-unit: 18;
-  }
-  .\[--fs-unit\:24\] {
-    --fs-unit: 24;
-  }
-  .\[--fs-unit\:30\] {
-    --fs-unit: 30;
-  }
-  .\[--fs-unit\:36\] {
-    --fs-unit: 36;
-  }
-  .\[--gap-unit\:1\.5\] {
-    --gap-unit: 1.5;
-  }
-  .\[--gap-unit\:1\] {
-    --gap-unit: 1;
-  }
-  .\[--gap-unit\:2\.5\] {
-    --gap-unit: 2.5;
+  .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
+    --fs-unit: var(--fs-unit-desktop);
   }
   .\[--gap-unit\:2\] {
     --gap-unit: 2;
   }
-  .\[--gap-unit\:3\] {
-    --gap-unit: 3;
-  }
-  .\[--gap-unit\:4\] {
-    --gap-unit: 4;
-  }
-  .\[--gap-unit\:5\] {
-    --gap-unit: 5;
-  }
-  .\[--gap-unit\:6\] {
-    --gap-unit: 6;
-  }
-  .\[--gap-unit\:8\] {
-    --gap-unit: 8;
-  }
-  .\[--gap-unit\:10\] {
-    --gap-unit: 10;
-  }
-  .\[--gap-unit\:12\] {
-    --gap-unit: 12;
-  }
-  .\[--lh\:1\.2\] {
-    --lh: 1.2;
+  .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
+    --gap-unit: var(--gap-unit-desktop);
   }
   .\[--lh\:1\.3\] {
     --lh: 1.3;
   }
-  .\[--lh\:1\.4\] {
-    --lh: 1.4;
-  }
   .\[--lh\:1\.6\] {
     --lh: 1.6;
   }
-  .\[--lh\:1\.111\] {
-    --lh: 1.111;
-  }
-  .\[--lh\:1\.333\] {
-    --lh: 1.333;
-  }
-  .\[--lh\:1\.556\] {
-    --lh: 1.556;
-  }
-  .\[--lh\:1\] {
-    --lh: 1;
-  }
-  .\[--py-unit\:0\.4\] {
-    --py-unit: 0.4;
-  }
-  .\[--py-unit\:0\.5\] {
-    --py-unit: 0.5;
-  }
-  .\[--py-unit\:0\.6\] {
-    --py-unit: 0.6;
-  }
-  .\[--py-unit\:0\.8\] {
-    --py-unit: 0.8;
-  }
-  .\[--py-unit\:1\.2\] {
-    --py-unit: 1.2;
-  }
   .\[--py-unit\:1\.5\] {
     --py-unit: 1.5;
   }
@@ -1788,314 +1962,89 @@
   .\[--py-unit\:3\] {
     --py-unit: 3;
   }
-  .\[--py-unit\:4\] {
-    --py-unit: 4;
-  }
-  .\[--py-unit\:5\] {
-    --py-unit: 5;
-  }
-  .\[--py-unit\:6\] {
-    --py-unit: 6;
-  }
-  .\[--py-unit\:8\] {
-    --py-unit: 8;
-  }
-  .\[--py-unit\:10\] {
-    --py-unit: 10;
-  }
-  .\[--py-unit\:12\] {
-    --py-unit: 12;
-  }
-  .\[--py-unit\:16\] {
-    --py-unit: 16;
-  }
-  .\[--py-unit\:20\] {
-    --py-unit: 20;
-  }
-  .\[--size-unit\:3\.5\] {
-    --size-unit: 3.5;
-  }
-  .\[--size-unit\:3\] {
-    --size-unit: 3;
-  }
-  .\[--size-unit\:4\.5\] {
-    --size-unit: 4.5;
+  .\[--py-unit\:var\(--py-unit-desktop\)\] {
+    --py-unit: var(--py-unit-desktop);
   }
   .\[--size-unit\:4\] {
     --size-unit: 4;
   }
-  .\[--size-unit\:5\] {
-    --size-unit: 5;
-  }
-  .\[background\:transparent\] {
-    background: transparent;
-  }
-  .\[background\:var\(--color-bg-accent\)\] {
-    background: var(--color-bg-accent);
+  .\[background\:var\(--bg-color\)\] {
+    background: var(--bg-color);
   }
-  .\[background\:var\(--color-bg-brand\)\] {
-    background: var(--color-bg-brand);
+  .\[background\:var\(--border-color\)\] {
+    background: var(--border-color);
   }
-  .\[background\:var\(--color-bg-danger\)\] {
-    background: var(--color-bg-danger);
-  }
-  .\[background\:var\(--color-bg-filled-accent\)\] {
-    background: var(--color-bg-filled-accent);
-  }
-  .\[background\:var\(--color-bg-filled-brand\)\] {
-    background: var(--color-bg-filled-brand);
-  }
-  .\[background\:var\(--color-bg-filled-danger\)\] {
-    background: var(--color-bg-filled-danger);
+  .ring-inset {
+    --tw-ring-inset: inset;
   }
-  .\[background\:var\(--color-bg-filled-info\)\] {
-    background: var(--color-bg-filled-info);
+  .peer-checked\:visible {
+    &:is(:where(.peer):checked ~ *) {
+      visibility: visible;
+    }
   }
-  .\[background\:var\(--color-bg-filled-layout-accent\)\] {
-    background: var(--color-bg-filled-layout-accent);
+  .checked\:\[background\:var\(--checked-bg-color\)\] {
+    &:checked {
+      background: var(--checked-bg-color);
+    }
   }
-  .\[background\:var\(--color-bg-filled-layout-brand\)\] {
-    background: var(--color-bg-filled-layout-brand);
+  .hover\:scale-105 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
   }
-  .\[background\:var\(--color-bg-filled-layout-danger\)\] {
-    background: var(--color-bg-filled-layout-danger);
-  }
-  .\[background\:var\(--color-bg-filled-layout-info\)\] {
-    background: var(--color-bg-filled-layout-info);
-  }
-  .\[background\:var\(--color-bg-filled-layout-primary\)\] {
-    background: var(--color-bg-filled-layout-primary);
-  }
-  .\[background\:var\(--color-bg-filled-layout-secondary\)\] {
-    background: var(--color-bg-filled-layout-secondary);
-  }
-  .\[background\:var\(--color-bg-filled-layout-success\)\] {
-    background: var(--color-bg-filled-layout-success);
-  }
-  .\[background\:var\(--color-bg-filled-layout-tertiary\)\] {
-    background: var(--color-bg-filled-layout-tertiary);
-  }
-  .\[background\:var\(--color-bg-filled-layout-warning\)\] {
-    background: var(--color-bg-filled-layout-warning);
-  }
-  .\[background\:var\(--color-bg-filled-primary\)\] {
-    background: var(--color-bg-filled-primary);
-  }
-  .\[background\:var\(--color-bg-filled-secondary\)\] {
-    background: var(--color-bg-filled-secondary);
-  }
-  .\[background\:var\(--color-bg-filled-success\)\] {
-    background: var(--color-bg-filled-success);
-  }
-  .\[background\:var\(--color-bg-filled-tertiary\)\] {
-    background: var(--color-bg-filled-tertiary);
-  }
-  .\[background\:var\(--color-bg-filled-warning\)\] {
-    background: var(--color-bg-filled-warning);
-  }
-  .\[background\:var\(--color-bg-info\)\] {
-    background: var(--color-bg-info);
-  }
-  .\[background\:var\(--color-bg-layout-accent\)\] {
-    background: var(--color-bg-layout-accent);
-  }
-  .\[background\:var\(--color-bg-layout-brand\)\] {
-    background: var(--color-bg-layout-brand);
-  }
-  .\[background\:var\(--color-bg-layout-danger\)\] {
-    background: var(--color-bg-layout-danger);
-  }
-  .\[background\:var\(--color-bg-layout-info\)\] {
-    background: var(--color-bg-layout-info);
-  }
-  .\[background\:var\(--color-bg-layout-primary\)\] {
-    background: var(--color-bg-layout-primary);
-  }
-  .\[background\:var\(--color-bg-layout-secondary\)\] {
-    background: var(--color-bg-layout-secondary);
-  }
-  .\[background\:var\(--color-bg-layout-success\)\] {
-    background: var(--color-bg-layout-success);
-  }
-  .\[background\:var\(--color-bg-layout-tertiary\)\] {
-    background: var(--color-bg-layout-tertiary);
-  }
-  .\[background\:var\(--color-bg-layout-warning\)\] {
-    background: var(--color-bg-layout-warning);
-  }
-  .\[background\:var\(--color-bg-primary\)\] {
-    background: var(--color-bg-primary);
-  }
-  .\[background\:var\(--color-bg-secondary\)\] {
-    background: var(--color-bg-secondary);
-  }
-  .\[background\:var\(--color-bg-success\)\] {
-    background: var(--color-bg-success);
-  }
-  .\[background\:var\(--color-bg-tertiary\)\] {
-    background: var(--color-bg-tertiary);
-  }
-  .\[background\:var\(--color-bg-warning\)\] {
-    background: var(--color-bg-warning);
-  }
-  .\[background\:var\(--color-border-accent\)\] {
-    background: var(--color-border-accent);
-  }
-  .\[background\:var\(--color-border-brand\)\] {
-    background: var(--color-border-brand);
-  }
-  .\[background\:var\(--color-border-danger\)\] {
-    background: var(--color-border-danger);
-  }
-  .\[background\:var\(--color-border-info\)\] {
-    background: var(--color-border-info);
-  }
-  .\[background\:var\(--color-border-primary\)\] {
-    background: var(--color-border-primary);
-  }
-  .\[background\:var\(--color-border-secondary\)\] {
-    background: var(--color-border-secondary);
-  }
-  .\[background\:var\(--color-border-success\)\] {
-    background: var(--color-border-success);
-  }
-  .\[background\:var\(--color-border-tertiary\)\] {
-    background: var(--color-border-tertiary);
-  }
-  .\[background\:var\(--color-border-warning\)\] {
-    background: var(--color-border-warning);
-  }
-  .ring-inset {
-    --tw-ring-inset: inset;
-  }
-  .peer-checked\:visible {
-    &:is(:where(.peer):checked ~ *) {
-      visibility: visible;
-    }
-  }
-  .checked\:\[background\:transparent\] {
-    &:checked {
-      background: transparent;
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-accent\)\] {
-    &:checked {
-      background: var(--color-bg-accent);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-brand\)\] {
-    &:checked {
-      background: var(--color-bg-brand);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-danger\)\] {
-    &:checked {
-      background: var(--color-bg-danger);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-accent\)\] {
-    &:checked {
-      background: var(--color-bg-filled-accent);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-brand\)\] {
-    &:checked {
-      background: var(--color-bg-filled-brand);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-danger\)\] {
-    &:checked {
-      background: var(--color-bg-filled-danger);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-info\)\] {
-    &:checked {
-      background: var(--color-bg-filled-info);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-primary\)\] {
-    &:checked {
-      background: var(--color-bg-filled-primary);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-secondary\)\] {
-    &:checked {
-      background: var(--color-bg-filled-secondary);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-success\)\] {
-    &:checked {
-      background: var(--color-bg-filled-success);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-tertiary\)\] {
-    &:checked {
-      background: var(--color-bg-filled-tertiary);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-filled-warning\)\] {
-    &:checked {
-      background: var(--color-bg-filled-warning);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-info\)\] {
-    &:checked {
-      background: var(--color-bg-info);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-primary\)\] {
-    &:checked {
-      background: var(--color-bg-primary);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-secondary\)\] {
-    &:checked {
-      background: var(--color-bg-secondary);
-    }
-  }
-  .checked\:\[background\:var\(--color-bg-success\)\] {
-    &:checked {
-      background: var(--color-bg-success);
+  .hover\:border-green-600 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-green-600);
+      }
     }
   }
-  .checked\:\[background\:var\(--color-bg-tertiary\)\] {
-    &:checked {
-      background: var(--color-bg-tertiary);
+  .hover\:bg-indigo-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-700);
+      }
     }
   }
-  .checked\:\[background\:var\(--color-bg-warning\)\] {
-    &:checked {
-      background: var(--color-bg-warning);
+  .hover\:bg-purple-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-purple-700);
+      }
     }
   }
-  .hover\:scale-105 {
+  .hover\:bg-red-200 {
     &:hover {
       @media (hover: hover) {
-        --tw-scale-x: 105%;
-        --tw-scale-y: 105%;
-        --tw-scale-z: 105%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
+        background-color: var(--color-red-200);
       }
     }
   }
-  .hover\:border-green-600 {
+  .hover\:bg-teal-600 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-green-600);
+        background-color: var(--color-teal-600);
       }
     }
   }
-  .hover\:bg-purple-700 {
+  .hover\:from-pink-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-purple-700);
+        --tw-gradient-from: var(--color-pink-600);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
       }
     }
   }
-  .hover\:bg-red-200 {
+  .hover\:to-violet-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-200);
+        --tw-gradient-to: var(--color-violet-600);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
       }
     }
   }
@@ -2175,692 +2124,1048 @@
       }
     }
   }
-  .hover\:\[background\:transparent\] {
+  .hover\:\[background\:var\(--bg-hover-color\)\] {
     &:hover {
       @media (hover: hover) {
-        background: transparent;
+        background: var(--bg-hover-color);
       }
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-accent\)\] {
+  .hover\:ring-inset {
     &:hover {
       @media (hover: hover) {
-        background: var(--color-bg-filled-hover-accent);
+        --tw-ring-inset: inset;
       }
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-brand\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-brand);
-      }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-danger\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-danger);
-      }
+  .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-info\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-info);
-      }
+  .focus-visible\:outline-\(--ring-color\) {
+    &:focus-visible {
+      outline-color: var(--ring-color);
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-primary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-primary);
-      }
+  .active\:border-green-700 {
+    &:active {
+      border-color: var(--color-green-700);
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-secondary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-secondary);
-      }
+  .active\:bg-red-300 {
+    &:active {
+      background-color: var(--color-red-300);
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-success\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-success);
-      }
+  .active\:bg-teal-700 {
+    &:active {
+      background-color: var(--color-teal-700);
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-tertiary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-tertiary);
-      }
+  .active\:from-pink-700 {
+    &:active {
+      --tw-gradient-from: var(--color-pink-700);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
-  .hover\:\[background\:var\(--color-bg-filled-hover-warning\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-filled-hover-warning);
-      }
+  .active\:to-violet-700 {
+    &:active {
+      --tw-gradient-to: var(--color-violet-700);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-accent\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-accent);
-      }
+  .active\:text-blue-900 {
+    &:active {
+      color: var(--color-blue-900);
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-brand\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-brand);
-      }
+  .active\:ring {
+    &:active {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-danger\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-danger);
-      }
+  .active\:\[background\:var\(--bg-active-color\)\] {
+    &:active {
+      background: var(--bg-active-color);
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-info\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-info);
-      }
+  .active\:ring-inset {
+    &:active {
+      --tw-ring-inset: inset;
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-primary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-primary);
-      }
+  .has-\[input\]\:cursor-pointer {
+    &:has(*:is(input)) {
+      cursor: pointer;
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-secondary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-secondary);
-      }
+  .max-desktop\:hidden {
+    @media (width < 80rem) {
+      display: none;
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-success\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-success);
-      }
+  .max-desktop\:flex-col {
+    @media (width < 80rem) {
+      flex-direction: column;
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-tertiary\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-tertiary);
-      }
+  .max-tablet\:hidden {
+    @media (width < 64rem) {
+      display: none;
     }
   }
-  .hover\:\[background\:var\(--color-bg-hover-warning\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background: var(--color-bg-hover-warning);
-      }
+  .max-tablet\:flex-col {
+    @media (width < 64rem) {
+      flex-direction: column;
     }
   }
-  .hover\:ring-inset {
-    &:hover {
-      @media (hover: hover) {
-        --tw-ring-inset: inset;
-      }
+  .max-tablet\:\[--fs-unit\:9\] {
+    @media (width < 64rem) {
+      --fs-unit: 9;
     }
   }
-  .focus-visible\:outline-2 {
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
+  .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
+    @media (width < 64rem) {
+      --fs-unit: var(--fs-unit-tablet);
     }
   }
-  .focus-visible\:outline-offset-2 {
-    &:focus-visible {
-      outline-offset: 2px;
+  .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
+    @media (width < 64rem) {
+      --gap-unit: var(--gap-unit-tablet);
     }
   }
-  .focus-visible\:outline-\(--color-border-accent\) {
-    &:focus-visible {
-      outline-color: var(--color-border-accent);
+  .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
+    @media (width < 64rem) {
+      --py-unit: var(--py-unit-tablet);
     }
   }
-  .focus-visible\:outline-\(--color-border-brand\) {
-    &:focus-visible {
-      outline-color: var(--color-border-brand);
+  .max-mobile\:hidden {
+    @media (width < 48rem) {
+      display: none;
     }
   }
-  .focus-visible\:outline-\(--color-border-danger\) {
-    &:focus-visible {
-      outline-color: var(--color-border-danger);
+  .max-mobile\:flex-col {
+    @media (width < 48rem) {
+      flex-direction: column;
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-accent\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-accent);
+  .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
+    @media (width < 48rem) {
+      --fs-unit: var(--fs-unit-mobile);
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-brand\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-brand);
+  .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
+    @media (width < 48rem) {
+      --gap-unit: var(--gap-unit-mobile);
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-danger\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-danger);
+  .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
+    @media (width < 48rem) {
+      --py-unit: var(--py-unit-mobile);
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-info\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-info);
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-primary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-primary);
-    }
-  }
-  .focus-visible\:outline-\(--color-border-filled-secondary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-secondary);
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-success\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-success);
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-tertiary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-tertiary);
+  .md\:grid-cols-4 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-filled-warning\) {
-    &:focus-visible {
-      outline-color: var(--color-border-filled-warning);
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-info\) {
-    &:focus-visible {
-      outline-color: var(--color-border-info);
+  .lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-primary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-primary);
+  .lg\:grid-cols-6 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
-  .focus-visible\:outline-\(--color-border-secondary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-secondary);
+}
+@layer theme {
+  @layer base {
+    [data-size] {
+      --gap: calc(var(--gap-unit) * var(--spacing));
+      --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
+      --py: calc(var(--py-unit) * var(--spacing));
+      --size: calc(var(--size-unit) * var(--spacing));
+      --br: calc(var(--br-unit) * var(--br-base));
+      --fs: calc(var(--fs-unit) * var(--fs-base));
+      --pl: calc(var(--py-unit) * var(--spacing));
     }
   }
-  .focus-visible\:outline-\(--color-border-success\) {
-    &:focus-visible {
-      outline-color: var(--color-border-success);
+  @layer components {
+    .vane-button {
+      --lh: 1.3;
+      --br-unit: 2;
+      --py-unit: 2;
+      --aspect-ratio: 2;
+      --gap-unit: 2;
     }
-  }
-  .focus-visible\:outline-\(--color-border-tertiary\) {
-    &:focus-visible {
-      outline-color: var(--color-border-tertiary);
+    .vane-button[data-size="xs"] {
+      --fs-unit: 6;
+      --py-unit: 1;
+      --br-unit: 1;
+      --gap-unit: 1;
     }
-  }
-  .focus-visible\:outline-\(--color-border-warning\) {
-    &:focus-visible {
-      outline-color: var(--color-border-warning);
+    .vane-button[data-size="sm"] {
+      --fs-unit: 7;
+      --py-unit: 1.5;
+      --br-unit: 1.5;
+      --gap-unit: 1.5;
     }
-  }
-  .focus-visible\:outline-transparent {
-    &:focus-visible {
-      outline-color: transparent;
+    .vane-button[data-size="md"] {
+      --fs-unit: 8;
+      --py-unit: 2;
+      --br-unit: 2;
+      --gap-unit: 2;
     }
-  }
-  .active\:border-green-700 {
-    &:active {
-      border-color: var(--color-green-700);
+    .vane-button[data-size="lg"] {
+      --fs-unit: 9;
+      --py-unit: 2.5;
+      --br-unit: 2.5;
+      --gap-unit: 2.5;
     }
-  }
-  .active\:bg-red-300 {
-    &:active {
-      background-color: var(--color-red-300);
+    .vane-button[data-size="xl"] {
+      --fs-unit: 10;
+      --py-unit: 3;
+      --br-unit: 3;
+      --gap-unit: 3;
     }
-  }
-  .active\:text-blue-900 {
-    &:active {
-      color: var(--color-blue-900);
+    .vane-badge {
+      --lh: 1.6;
+      --br-unit: 2;
+      --py-unit: 2;
+      --aspect-ratio: 2;
+      --gap-unit: 2;
     }
-  }
-  .active\:ring {
-    &:active {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    .vane-badge[data-size="xs"] {
+      --fs-unit: 6;
+      --py-unit: 1;
+      --br-unit: 1;
+      --gap-unit: 1;
     }
-  }
-  .active\:\[background\:transparent\] {
-    &:active {
-      background: transparent;
+    .vane-badge[data-size="sm"] {
+      --fs-unit: 7;
+      --py-unit: 1.5;
+      --br-unit: 1.5;
+      --gap-unit: 1.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-accent\)\] {
-    &:active {
-      background: var(--color-bg-active-accent);
+    .vane-badge[data-size="md"] {
+      --fs-unit: 8;
+      --py-unit: 2;
+      --br-unit: 2;
+      --gap-unit: 2;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-brand\)\] {
-    &:active {
-      background: var(--color-bg-active-brand);
+    .vane-badge[data-size="lg"] {
+      --fs-unit: 9;
+      --py-unit: 2.5;
+      --br-unit: 2.5;
+      --gap-unit: 2.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-danger\)\] {
-    &:active {
-      background: var(--color-bg-active-danger);
+    .vane-badge[data-size="xl"] {
+      --fs-unit: 10;
+      --py-unit: 3;
+      --br-unit: 3;
+      --gap-unit: 3;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-info\)\] {
-    &:active {
-      background: var(--color-bg-active-info);
+    .vane-chip {
+      --lh: 1.2;
+      --br-unit: 2;
+      --py-unit: 1.5;
+      --aspect-ratio: 2;
+      --gap-unit: 2;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-primary\)\] {
-    &:active {
-      background: var(--color-bg-active-primary);
+    .vane-chip[data-size="xs"] {
+      --fs-unit: 6;
+      --py-unit: 0.5;
+      --br-unit: 1;
+      --gap-unit: 1;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-secondary\)\] {
-    &:active {
-      background: var(--color-bg-active-secondary);
+    .vane-chip[data-size="sm"] {
+      --fs-unit: 7;
+      --py-unit: 1;
+      --br-unit: 1.5;
+      --gap-unit: 1.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-success\)\] {
-    &:active {
-      background: var(--color-bg-active-success);
+    .vane-chip[data-size="md"] {
+      --fs-unit: 8;
+      --py-unit: 1.5;
+      --br-unit: 2;
+      --gap-unit: 2;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-tertiary\)\] {
-    &:active {
-      background: var(--color-bg-active-tertiary);
+    .vane-chip[data-size="lg"] {
+      --fs-unit: 9;
+      --py-unit: 2;
+      --br-unit: 2.5;
+      --gap-unit: 2.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-active-warning\)\] {
-    &:active {
-      background: var(--color-bg-active-warning);
+    .vane-chip[data-size="xl"] {
+      --fs-unit: 10;
+      --py-unit: 2.5;
+      --br-unit: 3;
+      --gap-unit: 3;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-accent\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-accent);
+    .vane-code {
+      --lh: 1;
+      --br-unit: 1.5;
+      --py-unit: 0.8;
+      --aspect-ratio: 1.8;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-brand\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-brand);
+    .vane-code[data-size="xs"] {
+      --fs-unit: 5;
+      --py-unit: 0.4;
+      --br-unit: 0.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-danger\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-danger);
+    .vane-code[data-size="sm"] {
+      --fs-unit: 6;
+      --py-unit: 0.6;
+      --br-unit: 1;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-info\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-info);
+    .vane-code[data-size="md"] {
+      --fs-unit: 7;
+      --py-unit: 0.8;
+      --br-unit: 1.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-primary\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-primary);
+    .vane-code[data-size="lg"] {
+      --fs-unit: 8;
+      --py-unit: 1;
+      --br-unit: 2;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-secondary\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-secondary);
+    .vane-code[data-size="xl"] {
+      --fs-unit: 9;
+      --py-unit: 1.2;
+      --br-unit: 2.5;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-success\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-success);
+    .vane-input {
+      --lh: 1.6;
+      --br-unit: 2;
+      --py-unit: 2;
+      --aspect-ratio: 2;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-tertiary\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-tertiary);
+    .vane-input[data-size="xs"] {
+      --fs-unit: 6;
+      --py-unit: 1;
+      --br-unit: 1;
     }
-  }
-  .active\:\[background\:var\(--color-bg-filled-active-warning\)\] {
-    &:active {
-      background: var(--color-bg-filled-active-warning);
+    .vane-input[data-size="sm"] {
+      --fs-unit: 7;
+      --py-unit: 1.5;
+      --br-unit: 1.5;
     }
-  }
-  .active\:ring-inset {
-    &:active {
-      --tw-ring-inset: inset;
+    .vane-input[data-size="md"] {
+      --fs-unit: 8;
+      --py-unit: 2;
+      --br-unit: 2;
     }
-  }
-  .has-\[input\]\:cursor-pointer {
-    &:has(*:is(input)) {
-      cursor: pointer;
+    .vane-input[data-size="lg"] {
+      --fs-unit: 9;
+      --py-unit: 2.5;
+      --br-unit: 2.5;
     }
-  }
-  .max-desktop\:hidden {
-    @media (width < 80rem) {
-      display: none;
+    .vane-input[data-size="xl"] {
+      --fs-unit: 10;
+      --py-unit: 3;
+      --br-unit: 3;
     }
-  }
-  .max-desktop\:flex-col {
-    @media (width < 80rem) {
-      flex-direction: column;
+    .vane-checkbox {
+      --br-unit: 1;
     }
-  }
-  .max-laptop\:hidden {
-    @media (width < 64rem) {
-      display: none;
+    .vane-checkbox[data-size="xs"] {
+      --size-unit: 3;
+      --br-unit: 0.5;
     }
-  }
-  .max-laptop\:flex-col {
-    @media (width < 64rem) {
-      flex-direction: column;
+    .vane-checkbox[data-size="sm"] {
+      --size-unit: 3.5;
+      --br-unit: 0.5;
     }
-  }
-  .max-laptop\:\[--fs-unit\:8\] {
-    @media (width < 64rem) {
+    .vane-checkbox[data-size="md"] {
+      --size-unit: 4;
+      --br-unit: 1;
+    }
+    .vane-checkbox[data-size="lg"] {
+      --size-unit: 4.5;
+      --br-unit: 1;
+    }
+    .vane-checkbox[data-size="xl"] {
+      --size-unit: 5;
+      --br-unit: 1.5;
+    }
+    .vane-label {
+      --lh: 1.6;
+      --gap-unit: 2;
+    }
+    .vane-label[data-size="xs"] {
+      --fs-unit: 6;
+      --gap-unit: 1;
+    }
+    .vane-label[data-size="sm"] {
+      --fs-unit: 7;
+      --gap-unit: 1.5;
+    }
+    .vane-label[data-size="md"] {
       --fs-unit: 8;
+      --gap-unit: 2;
     }
-  }
-  .max-laptop\:\[--fs-unit\:9\] {
-    @media (width < 64rem) {
+    .vane-label[data-size="lg"] {
       --fs-unit: 9;
+      --gap-unit: 2.5;
     }
-  }
-  .max-laptop\:\[--fs-unit\:10\] {
-    @media (width < 64rem) {
+    .vane-label[data-size="xl"] {
       --fs-unit: 10;
+      --gap-unit: 3;
     }
-  }
-  .max-laptop\:\[--fs-unit\:11\] {
-    @media (width < 64rem) {
-      --fs-unit: 11;
+    .vane-card {
+      --br-unit: 5;
+      --py-unit: 6;
+      --aspect-ratio: 1;
+      --gap-unit: 4;
     }
-  }
-  .max-laptop\:\[--fs-unit\:12\] {
-    @media (width < 64rem) {
-      --fs-unit: 12;
+    .vane-card[data-size="xs"] {
+      --py-unit: 2;
+      --gap-unit: 2;
+      --br-unit: 3;
     }
-  }
-  .max-laptop\:\[--fs-unit\:13\] {
-    @media (width < 64rem) {
-      --fs-unit: 13;
+    .vane-card[data-size="sm"] {
+      --py-unit: 4;
+      --gap-unit: 3;
+      --br-unit: 4;
     }
-  }
-  .max-laptop\:\[--fs-unit\:14\] {
-    @media (width < 64rem) {
-      --fs-unit: 14;
+    .vane-card[data-size="md"] {
+      --py-unit: 6;
+      --gap-unit: 4;
+      --br-unit: 5;
     }
-  }
-  .max-laptop\:\[--fs-unit\:15\] {
-    @media (width < 64rem) {
-      --fs-unit: 15;
+    .vane-card[data-size="lg"] {
+      --py-unit: 8;
+      --gap-unit: 5;
+      --br-unit: 6;
     }
-  }
-  .max-laptop\:\[--fs-unit\:16\] {
-    @media (width < 64rem) {
-      --fs-unit: 16;
+    .vane-card[data-size="xl"] {
+      --py-unit: 10;
+      --gap-unit: 6;
+      --br-unit: 7;
     }
-  }
-  .max-laptop\:\[--fs-unit\:17\] {
-    @media (width < 64rem) {
-      --fs-unit: 17;
+    .vane-stack {
+      --gap-unit: 4;
+      --py-unit: 4;
+      --aspect-ratio: 1;
+      --br-unit: 5;
     }
-  }
-  .max-laptop\:\[--fs-unit\:21\] {
-    @media (width < 64rem) {
-      --fs-unit: 21;
+    .vane-stack[data-size="xs"] {
+      --gap-unit: 2;
+      --py-unit: 2;
+      --br-unit: 3;
     }
-  }
-  .max-laptop\:\[--fs-unit\:22\] {
-    @media (width < 64rem) {
-      --fs-unit: 22;
+    .vane-stack[data-size="sm"] {
+      --gap-unit: 3;
+      --py-unit: 3;
+      --br-unit: 4;
     }
-  }
-  .max-laptop\:\[--fs-unit\:27\] {
-    @media (width < 64rem) {
-      --fs-unit: 27;
+    .vane-stack[data-size="md"] {
+      --gap-unit: 4;
+      --py-unit: 4;
+      --br-unit: 5;
     }
-  }
-  .max-laptop\:\[--fs-unit\:28\] {
-    @media (width < 64rem) {
-      --fs-unit: 28;
+    .vane-stack[data-size="lg"] {
+      --gap-unit: 5;
+      --py-unit: 5;
+      --br-unit: 6;
     }
-  }
-  .max-laptop\:\[--fs-unit\:33\] {
-    @media (width < 64rem) {
-      --fs-unit: 33;
+    .vane-stack[data-size="xl"] {
+      --gap-unit: 6;
+      --py-unit: 6;
+      --br-unit: 7;
     }
-  }
-  .max-laptop\:\[--gap-unit\:3\] {
-    @media (width < 64rem) {
+    .vane-row {
+      --gap-unit: 4;
+      --br-unit: 5;
+    }
+    .vane-row[data-size="xs"] {
+      --gap-unit: 2;
+      --br-unit: 3;
+    }
+    .vane-row[data-size="sm"] {
       --gap-unit: 3;
+      --br-unit: 4;
     }
-  }
-  .max-laptop\:\[--gap-unit\:5\] {
-    @media (width < 64rem) {
+    .vane-row[data-size="md"] {
+      --gap-unit: 4;
+      --br-unit: 5;
+    }
+    .vane-row[data-size="lg"] {
       --gap-unit: 5;
+      --br-unit: 6;
     }
-  }
-  .max-laptop\:\[--gap-unit\:6\] {
-    @media (width < 64rem) {
+    .vane-row[data-size="xl"] {
       --gap-unit: 6;
+      --br-unit: 7;
     }
-  }
-  .max-laptop\:\[--gap-unit\:8\] {
-    @media (width < 64rem) {
-      --gap-unit: 8;
+    .vane-col {
+      --gap-unit: 4;
+      --br-unit: 5;
     }
-  }
-  .max-laptop\:\[--gap-unit\:10\] {
-    @media (width < 64rem) {
-      --gap-unit: 10;
+    .vane-col[data-size="xs"] {
+      --gap-unit: 2;
+      --br-unit: 3;
     }
-  }
-  .max-laptop\:\[--py-unit\:3\] {
-    @media (width < 64rem) {
-      --py-unit: 3;
+    .vane-col[data-size="sm"] {
+      --gap-unit: 3;
+      --br-unit: 4;
     }
-  }
-  .max-laptop\:\[--py-unit\:4\] {
-    @media (width < 64rem) {
+    .vane-col[data-size="md"] {
+      --gap-unit: 4;
+      --br-unit: 5;
+    }
+    .vane-col[data-size="lg"] {
+      --gap-unit: 5;
+      --br-unit: 6;
+    }
+    .vane-col[data-size="xl"] {
+      --gap-unit: 6;
+      --br-unit: 7;
+    }
+    .vane-container {
+      --py-unit: 8;
+      --aspect-ratio: 2;
+      --br-unit: 5;
+      --gap-unit: 4;
+    }
+    .vane-container[data-size="xs"] {
       --py-unit: 4;
+      --br-unit: 3;
+      --gap-unit: 2;
     }
-  }
-  .max-laptop\:\[--py-unit\:6\] {
-    @media (width < 64rem) {
+    .vane-container[data-size="sm"] {
       --py-unit: 6;
+      --br-unit: 4;
+      --gap-unit: 3;
     }
-  }
-  .max-laptop\:\[--py-unit\:8\] {
-    @media (width < 64rem) {
+    .vane-container[data-size="md"] {
       --py-unit: 8;
+      --br-unit: 5;
+      --gap-unit: 4;
     }
-  }
-  .max-laptop\:\[--py-unit\:10\] {
-    @media (width < 64rem) {
+    .vane-container[data-size="lg"] {
       --py-unit: 10;
+      --br-unit: 6;
+      --gap-unit: 5;
     }
-  }
-  .max-tablet\:hidden {
-    @media (width < 48rem) {
-      display: none;
+    .vane-container[data-size="xl"] {
+      --py-unit: 12;
+      --br-unit: 7;
+      --gap-unit: 6;
     }
-  }
-  .max-tablet\:flex-col {
-    @media (width < 48rem) {
-      flex-direction: column;
+    .vane-grid {
+      --gap-unit: 4;
+      --br-unit: 5;
     }
-  }
-  .max-tablet\:\[--fs-unit\:7\] {
-    @media (width < 48rem) {
-      --fs-unit: 7;
+    .vane-grid[data-size="xs"] {
+      --gap-unit: 2;
+      --br-unit: 3;
     }
-  }
-  .max-tablet\:\[--fs-unit\:8\] {
-    @media (width < 48rem) {
-      --fs-unit: 8;
+    .vane-grid[data-size="sm"] {
+      --gap-unit: 3;
+      --br-unit: 4;
     }
-  }
-  .max-tablet\:\[--fs-unit\:9\] {
-    @media (width < 48rem) {
-      --fs-unit: 9;
+    .vane-grid[data-size="md"] {
+      --gap-unit: 4;
+      --br-unit: 5;
     }
-  }
-  .max-tablet\:\[--fs-unit\:10\] {
-    @media (width < 48rem) {
-      --fs-unit: 10;
+    .vane-grid[data-size="lg"] {
+      --gap-unit: 5;
+      --br-unit: 6;
     }
-  }
-  .max-tablet\:\[--fs-unit\:11\] {
-    @media (width < 48rem) {
-      --fs-unit: 11;
+    .vane-grid[data-size="xl"] {
+      --gap-unit: 6;
+      --br-unit: 7;
     }
-  }
-  .max-tablet\:\[--fs-unit\:12\] {
-    @media (width < 48rem) {
-      --fs-unit: 12;
+    .vane-divider {
+      --py-unit: 4;
     }
-  }
-  .max-tablet\:\[--fs-unit\:13\] {
-    @media (width < 48rem) {
-      --fs-unit: 13;
+    .vane-divider[data-size="xs"] {
+      --py-unit: 2;
     }
-  }
-  .max-tablet\:\[--fs-unit\:14\] {
-    @media (width < 48rem) {
-      --fs-unit: 14;
+    .vane-divider[data-size="sm"] {
+      --py-unit: 3;
     }
-  }
-  .max-tablet\:\[--fs-unit\:16\] {
-    @media (width < 48rem) {
-      --fs-unit: 16;
+    .vane-divider[data-size="md"] {
+      --py-unit: 4;
     }
-  }
-  .max-tablet\:\[--fs-unit\:18\] {
-    @media (width < 48rem) {
-      --fs-unit: 18;
+    .vane-divider[data-size="lg"] {
+      --py-unit: 5;
     }
-  }
-  .max-tablet\:\[--fs-unit\:20\] {
-    @media (width < 48rem) {
-      --fs-unit: 20;
+    .vane-divider[data-size="xl"] {
+      --py-unit: 6;
     }
-  }
-  .max-tablet\:\[--fs-unit\:24\] {
-    @media (width < 48rem) {
-      --fs-unit: 24;
+    .vane-img {
+      --br-unit: 5;
     }
-  }
-  .max-tablet\:\[--fs-unit\:26\] {
-    @media (width < 48rem) {
-      --fs-unit: 26;
+    .vane-img[data-size="xs"] {
+      --br-unit: 3;
     }
-  }
-  .max-tablet\:\[--fs-unit\:30\] {
-    @media (width < 48rem) {
-      --fs-unit: 30;
+    .vane-img[data-size="sm"] {
+      --br-unit: 4;
     }
-  }
-  .max-tablet\:\[--gap-unit\:2\] {
-    @media (width < 48rem) {
-      --gap-unit: 2;
+    .vane-img[data-size="md"] {
+      --br-unit: 5;
     }
-  }
-  .max-tablet\:\[--gap-unit\:4\] {
-    @media (width < 48rem) {
-      --gap-unit: 4;
+    .vane-img[data-size="lg"] {
+      --br-unit: 6;
     }
-  }
-  .max-tablet\:\[--gap-unit\:6\] {
-    @media (width < 48rem) {
-      --gap-unit: 6;
+    .vane-img[data-size="xl"] {
+      --br-unit: 7;
     }
-  }
-  .max-tablet\:\[--gap-unit\:8\] {
-    @media (width < 48rem) {
-      --gap-unit: 8;
+    .vane-list {
+      --lh: 1.6;
+      --py-unit: 3;
     }
-  }
-  .max-tablet\:\[--py-unit\:2\] {
-    @media (width < 48rem) {
+    .vane-list[data-size="xs"] {
+      --fs-unit: 6;
+      --py-unit: 1;
+    }
+    .vane-list[data-size="sm"] {
+      --fs-unit: 7;
       --py-unit: 2;
     }
-  }
-  .max-tablet\:\[--py-unit\:4\] {
-    @media (width < 48rem) {
+    .vane-list[data-size="md"] {
+      --fs-unit: 8;
+      --py-unit: 3;
+    }
+    .vane-list[data-size="lg"] {
+      --fs-unit: 9;
       --py-unit: 4;
     }
-  }
-  .max-mobile\:hidden {
-    @media (width < 40rem) {
-      display: none;
+    .vane-list[data-size="xl"] {
+      --fs-unit: 10;
+      --py-unit: 5;
     }
-  }
-  .max-mobile\:flex-col {
-    @media (width < 40rem) {
-      flex-direction: column;
+    .vane-text {
+      --lh: 1.6;
     }
-  }
-  .sm\:grid-cols-2 {
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    .vane-text[data-size="xs"] {
+      --fs-unit: 6;
     }
-  }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    .vane-text[data-size="sm"] {
+      --fs-unit: 7;
     }
-  }
-  .md\:grid-cols-3 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+    .vane-text[data-size="md"] {
+      --fs-unit: 8;
     }
-  }
-  .md\:grid-cols-4 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+    .vane-text[data-size="lg"] {
+      --fs-unit: 9;
     }
-  }
-  .lg\:grid-cols-4 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+    .vane-text[data-size="xl"] {
+      --fs-unit: 10;
     }
-  }
-  .lg\:grid-cols-5 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
+    .vane-link {
+      --lh: 1.6;
     }
-  }
-  .lg\:grid-cols-6 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
+    .vane-link[data-size="xs"] {
+      --fs-unit: 6;
     }
-  }
-}
-@layer theme {
-  @layer base {
-    :where(*) {
-      --gap: calc(var(--gap-unit) * var(--layout-spacing));
-      --ui-gap: calc(var(--gap-unit) * var(--ui-spacing));
-      --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--layout-spacing));
-      --ui-px: calc(var(--aspect-ratio) * var(--py-unit) * var(--ui-spacing));
-      --py: calc(var(--py-unit) * var(--layout-spacing));
-      --ui-py: calc(var(--py-unit) * var(--ui-spacing));
-      --ui-size: calc(var(--size-unit) * var(--ui-spacing));
-      --br: calc(var(--br-unit) * var(--br-base));
-      --ui-br: calc(var(--br-unit) * var(--ui-br-base));
-      --fs: calc(var(--fs-unit) * var(--fs-base));
+    .vane-link[data-size="sm"] {
+      --fs-unit: 7;
+    }
+    .vane-link[data-size="md"] {
+      --fs-unit: 8;
+    }
+    .vane-link[data-size="lg"] {
+      --fs-unit: 9;
+    }
+    .vane-link[data-size="xl"] {
+      --fs-unit: 10;
+    }
+    .vane-list-item {
+      --lh: 1.6;
+    }
+    .vane-list-item[data-size="xs"] {
+      --fs-unit: 6;
+    }
+    .vane-list-item[data-size="sm"] {
+      --fs-unit: 7;
+    }
+    .vane-list-item[data-size="md"] {
+      --fs-unit: 8;
+    }
+    .vane-list-item[data-size="lg"] {
+      --fs-unit: 9;
+    }
+    .vane-list-item[data-size="xl"] {
+      --fs-unit: 10;
+    }
+    .vane-section {
+      --lh: 1.6;
+      --py-unit-desktop: 8;
+      --py-unit-tablet: 6;
+      --py-unit-mobile: 4;
+      --gap-unit-desktop: 8;
+      --gap-unit-tablet: 6;
+      --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="xs"] {
+      --py-unit-desktop: 4;
+      --py-unit-tablet: 3;
+      --py-unit-mobile: 2;
+      --gap-unit-desktop: 4;
+      --gap-unit-tablet: 3;
+      --gap-unit-mobile: 2;
+    }
+    .vane-section[data-size="sm"] {
+      --py-unit-desktop: 8;
+      --py-unit-tablet: 4;
+      --py-unit-mobile: 2;
+      --gap-unit-desktop: 6;
+      --gap-unit-tablet: 5;
+      --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="md"] {
+      --py-unit-desktop: 12;
+      --py-unit-tablet: 6;
+      --py-unit-mobile: 2;
+      --gap-unit-desktop: 8;
+      --gap-unit-tablet: 6;
+      --gap-unit-mobile: 4;
+    }
+    .vane-section[data-size="lg"] {
+      --py-unit-desktop: 16;
+      --py-unit-tablet: 8;
+      --py-unit-mobile: 2;
+      --gap-unit-desktop: 10;
+      --gap-unit-tablet: 8;
+      --gap-unit-mobile: 6;
+    }
+    .vane-section[data-size="xl"] {
+      --py-unit-desktop: 20;
+      --py-unit-tablet: 10;
+      --py-unit-mobile: 4;
+      --gap-unit-desktop: 12;
+      --gap-unit-tablet: 10;
+      --gap-unit-mobile: 8;
+    }
+    .vane-title {
+      --lh: 1.3;
+      --fs-unit-desktop: 12;
+      --fs-unit-tablet: 11;
+      --fs-unit-mobile: 10;
+    }
+    .vane-title[data-size="xs"] {
+      --fs-unit-desktop: 9;
+      --fs-unit-tablet: 8;
+      --fs-unit-mobile: 7;
+      --lh: 1.556;
+    }
+    .vane-title[data-size="sm"] {
+      --fs-unit-desktop: 10;
+      --fs-unit-tablet: 9;
+      --fs-unit-mobile: 8;
+      --lh: 1.4;
+    }
+    .vane-title[data-size="md"] {
+      --fs-unit-desktop: 12;
+      --fs-unit-tablet: 11;
+      --fs-unit-mobile: 10;
+      --lh: 1.333;
+    }
+    .vane-title[data-size="lg"] {
+      --fs-unit-desktop: 15;
+      --fs-unit-tablet: 14;
+      --fs-unit-mobile: 13;
+      --lh: 1.2;
+    }
+    .vane-title[data-size="xl"] {
+      --fs-unit-desktop: 18;
+      --fs-unit-tablet: 17;
+      --fs-unit-mobile: 16;
+      --lh: 1.111;
+    }
+    .vane-section-title {
+      --lh: 1.2;
+      --fs-unit-desktop: 18;
+      --fs-unit-tablet: 16;
+      --fs-unit-mobile: 14;
+    }
+    .vane-section-title[data-size="xs"] {
+      --fs-unit-desktop: 12;
+      --fs-unit-tablet: 10;
+      --fs-unit-mobile: 8;
+      --lh: 1.333;
+    }
+    .vane-section-title[data-size="sm"] {
+      --fs-unit-desktop: 15;
+      --fs-unit-tablet: 13;
+      --fs-unit-mobile: 11;
+      --lh: 1.2;
+    }
+    .vane-section-title[data-size="md"] {
+      --fs-unit-desktop: 18;
+      --fs-unit-tablet: 16;
+      --fs-unit-mobile: 14;
+      --lh: 1.111;
+    }
+    .vane-section-title[data-size="lg"] {
+      --fs-unit-desktop: 24;
+      --fs-unit-tablet: 22;
+      --fs-unit-mobile: 20;
+      --lh: 1;
+    }
+    .vane-section-title[data-size="xl"] {
+      --fs-unit-desktop: 30;
+      --fs-unit-tablet: 28;
+      --fs-unit-mobile: 26;
+      --lh: 1;
+    }
+    .vane-page-title {
+      --lh: 1.1;
+      --fs-unit-desktop: 24;
+      --fs-unit-tablet: 21;
+      --fs-unit-mobile: 18;
+    }
+    .vane-page-title[data-size="xs"] {
+      --fs-unit-desktop: 15;
+      --fs-unit-tablet: 12;
+      --fs-unit-mobile: 9;
+      --lh: 1.2;
+    }
+    .vane-page-title[data-size="sm"] {
+      --fs-unit-desktop: 18;
+      --fs-unit-tablet: 15;
+      --fs-unit-mobile: 12;
+      --lh: 1.111;
+    }
+    .vane-page-title[data-size="md"] {
+      --fs-unit-desktop: 24;
+      --fs-unit-tablet: 21;
+      --fs-unit-mobile: 18;
+      --lh: 1;
+    }
+    .vane-page-title[data-size="lg"] {
+      --fs-unit-desktop: 30;
+      --fs-unit-tablet: 27;
+      --fs-unit-mobile: 24;
+      --lh: 1;
+    }
+    .vane-page-title[data-size="xl"] {
+      --fs-unit-desktop: 36;
+      --fs-unit-tablet: 33;
+      --fs-unit-mobile: 30;
+      --lh: 1;
+    }
+    [data-variant="outline"][data-appearance="primary"] {
+      --text-color: var(--color-text-primary);
+      --bg-color: var(--color-bg-primary);
+      --bg-hover-color: var(--color-bg-hover-primary);
+      --bg-active-color: var(--color-bg-active-primary);
+      --border-color: var(--color-border-primary);
+      --ring-color: var(--color-border-primary);
+      --accent-color: var(--color-bg-primary);
+      --checked-bg-color: var(--color-bg-primary);
+    }
+    [data-variant="outline"][data-appearance="brand"] {
+      --text-color: var(--color-text-brand);
+      --bg-color: var(--color-bg-brand);
+      --bg-hover-color: var(--color-bg-hover-brand);
+      --bg-active-color: var(--color-bg-active-brand);
+      --border-color: var(--color-border-brand);
+      --ring-color: var(--color-border-brand);
+      --accent-color: var(--color-bg-brand);
+      --checked-bg-color: var(--color-bg-brand);
+    }
+    [data-variant="outline"][data-appearance="secondary"] {
+      --text-color: var(--color-text-secondary);
+      --bg-color: var(--color-bg-secondary);
+      --bg-hover-color: var(--color-bg-hover-secondary);
+      --bg-active-color: var(--color-bg-active-secondary);
+      --border-color: var(--color-border-secondary);
+      --ring-color: var(--color-border-secondary);
+      --accent-color: var(--color-bg-secondary);
+      --checked-bg-color: var(--color-bg-secondary);
+    }
+    [data-variant="outline"][data-appearance="tertiary"] {
+      --text-color: var(--color-text-tertiary);
+      --bg-color: var(--color-bg-tertiary);
+      --bg-hover-color: var(--color-bg-hover-tertiary);
+      --bg-active-color: var(--color-bg-active-tertiary);
+      --border-color: var(--color-border-tertiary);
+      --ring-color: var(--color-border-tertiary);
+      --accent-color: var(--color-bg-tertiary);
+      --checked-bg-color: var(--color-bg-tertiary);
+    }
+    [data-variant="outline"][data-appearance="accent"] {
+      --text-color: var(--color-text-accent);
+      --bg-color: var(--color-bg-accent);
+      --bg-hover-color: var(--color-bg-hover-accent);
+      --bg-active-color: var(--color-bg-active-accent);
+      --border-color: var(--color-border-accent);
+      --ring-color: var(--color-border-accent);
+      --accent-color: var(--color-bg-accent);
+      --checked-bg-color: var(--color-bg-accent);
+    }
+    [data-variant="outline"][data-appearance="success"] {
+      --text-color: var(--color-text-success);
+      --bg-color: var(--color-bg-success);
+      --bg-hover-color: var(--color-bg-hover-success);
+      --bg-active-color: var(--color-bg-active-success);
+      --border-color: var(--color-border-success);
+      --ring-color: var(--color-border-success);
+      --accent-color: var(--color-bg-success);
+      --checked-bg-color: var(--color-bg-success);
+    }
+    [data-variant="outline"][data-appearance="danger"] {
+      --text-color: var(--color-text-danger);
+      --bg-color: var(--color-bg-danger);
+      --bg-hover-color: var(--color-bg-hover-danger);
+      --bg-active-color: var(--color-bg-active-danger);
+      --border-color: var(--color-border-danger);
+      --ring-color: var(--color-border-danger);
+      --accent-color: var(--color-bg-danger);
+      --checked-bg-color: var(--color-bg-danger);
+    }
+    [data-variant="outline"][data-appearance="warning"] {
+      --text-color: var(--color-text-warning);
+      --bg-color: var(--color-bg-warning);
+      --bg-hover-color: var(--color-bg-hover-warning);
+      --bg-active-color: var(--color-bg-active-warning);
+      --border-color: var(--color-border-warning);
+      --ring-color: var(--color-border-warning);
+      --accent-color: var(--color-bg-warning);
+      --checked-bg-color: var(--color-bg-warning);
+    }
+    [data-variant="outline"][data-appearance="info"] {
+      --text-color: var(--color-text-info);
+      --bg-color: var(--color-bg-info);
+      --bg-hover-color: var(--color-bg-hover-info);
+      --bg-active-color: var(--color-bg-active-info);
+      --border-color: var(--color-border-info);
+      --ring-color: var(--color-border-info);
+      --accent-color: var(--color-bg-info);
+      --checked-bg-color: var(--color-bg-info);
+    }
+    [data-variant="filled"][data-appearance="primary"] {
+      --text-color: var(--color-text-filled-primary);
+      --bg-color: var(--color-bg-filled-primary);
+      --bg-hover-color: var(--color-bg-filled-hover-primary);
+      --bg-active-color: var(--color-bg-filled-active-primary);
+      --border-color: var(--color-border-filled-primary);
+      --ring-color: var(--color-border-filled-primary);
+      --accent-color: var(--color-bg-filled-primary);
+      --checked-bg-color: var(--color-bg-filled-primary);
+    }
+    [data-variant="filled"][data-appearance="brand"] {
+      --text-color: var(--color-text-filled-brand);
+      --bg-color: var(--color-bg-filled-brand);
+      --bg-hover-color: var(--color-bg-filled-hover-brand);
+      --bg-active-color: var(--color-bg-filled-active-brand);
+      --border-color: var(--color-border-filled-brand);
+      --ring-color: var(--color-border-filled-brand);
+      --accent-color: var(--color-bg-filled-brand);
+      --checked-bg-color: var(--color-bg-filled-brand);
+    }
+    [data-variant="filled"][data-appearance="secondary"] {
+      --text-color: var(--color-text-filled-secondary);
+      --bg-color: var(--color-bg-filled-secondary);
+      --bg-hover-color: var(--color-bg-filled-hover-secondary);
+      --bg-active-color: var(--color-bg-filled-active-secondary);
+      --border-color: var(--color-border-filled-secondary);
+      --ring-color: var(--color-border-filled-secondary);
+      --accent-color: var(--color-bg-filled-secondary);
+      --checked-bg-color: var(--color-bg-filled-secondary);
+    }
+    [data-variant="filled"][data-appearance="tertiary"] {
+      --text-color: var(--color-text-filled-tertiary);
+      --bg-color: var(--color-bg-filled-tertiary);
+      --bg-hover-color: var(--color-bg-filled-hover-tertiary);
+      --bg-active-color: var(--color-bg-filled-active-tertiary);
+      --border-color: var(--color-border-filled-tertiary);
+      --ring-color: var(--color-border-filled-tertiary);
+      --accent-color: var(--color-bg-filled-tertiary);
+      --checked-bg-color: var(--color-bg-filled-tertiary);
+    }
+    [data-variant="filled"][data-appearance="accent"] {
+      --text-color: var(--color-text-filled-accent);
+      --bg-color: var(--color-bg-filled-accent);
+      --bg-hover-color: var(--color-bg-filled-hover-accent);
+      --bg-active-color: var(--color-bg-filled-active-accent);
+      --border-color: var(--color-border-filled-accent);
+      --ring-color: var(--color-border-filled-accent);
+      --accent-color: var(--color-bg-filled-accent);
+      --checked-bg-color: var(--color-bg-filled-accent);
+    }
+    [data-variant="filled"][data-appearance="success"] {
+      --text-color: var(--color-text-filled-success);
+      --bg-color: var(--color-bg-filled-success);
+      --bg-hover-color: var(--color-bg-filled-hover-success);
+      --bg-active-color: var(--color-bg-filled-active-success);
+      --border-color: var(--color-border-filled-success);
+      --ring-color: var(--color-border-filled-success);
+      --accent-color: var(--color-bg-filled-success);
+      --checked-bg-color: var(--color-bg-filled-success);
+    }
+    [data-variant="filled"][data-appearance="danger"] {
+      --text-color: var(--color-text-filled-danger);
+      --bg-color: var(--color-bg-filled-danger);
+      --bg-hover-color: var(--color-bg-filled-hover-danger);
+      --bg-active-color: var(--color-bg-filled-active-danger);
+      --border-color: var(--color-border-filled-danger);
+      --ring-color: var(--color-border-filled-danger);
+      --accent-color: var(--color-bg-filled-danger);
+      --checked-bg-color: var(--color-bg-filled-danger);
+    }
+    [data-variant="filled"][data-appearance="warning"] {
+      --text-color: var(--color-text-filled-warning);
+      --bg-color: var(--color-bg-filled-warning);
+      --bg-hover-color: var(--color-bg-filled-hover-warning);
+      --bg-active-color: var(--color-bg-filled-active-warning);
+      --border-color: var(--color-border-filled-warning);
+      --ring-color: var(--color-border-filled-warning);
+      --accent-color: var(--color-bg-filled-warning);
+      --checked-bg-color: var(--color-bg-filled-warning);
+    }
+    [data-variant="filled"][data-appearance="info"] {
+      --text-color: var(--color-text-filled-info);
+      --bg-color: var(--color-bg-filled-info);
+      --bg-hover-color: var(--color-bg-filled-hover-info);
+      --bg-active-color: var(--color-bg-filled-active-info);
+      --border-color: var(--color-border-filled-info);
+      --ring-color: var(--color-border-filled-info);
+      --accent-color: var(--color-bg-filled-info);
+      --checked-bg-color: var(--color-bg-filled-info);
+    }
+    [data-transparent="true"] {
+      --bg-color: transparent;
+      --bg-hover-color: transparent;
+      --bg-active-color: transparent;
+      --accent-color: transparent;
+      --checked-bg-color: transparent;
+    }
+    .vane-text[data-transparent="true"], .vane-link[data-transparent="true"], .vane-title[data-transparent="true"], .vane-section-title[data-transparent="true"], .vane-page-title[data-transparent="true"], .vane-label[data-transparent="true"], .vane-list-item[data-transparent="true"] {
+      --text-color: transparent;
     }
   }
 }