@teseor/css 2.0.2 → 2.2.0

package/dist/index.css

@@ -1,16 +1,18 @@
-@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
-@layer tokens{:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-success-light: color-mix(in oklch, var(--ui-color-success) 50%, white);--ui-color-success-dark: color-mix(in oklch, var(--ui-color-success) 75%, black);--ui-color-success-subtle: color-mix(in oklch, var(--ui-color-success) 12%, white);--ui-color-success-hover: color-mix(in oklch, var(--ui-color-success) 85%, black);--ui-color-warning-light: color-mix(in oklch, var(--ui-color-warning) 50%, white);--ui-color-warning-dark: color-mix(in oklch, var(--ui-color-warning) 75%, black);--ui-color-warning-subtle: color-mix(in oklch, var(--ui-color-warning) 12%, white);--ui-color-warning-hover: color-mix(in oklch, var(--ui-color-warning) 85%, black);--ui-color-danger-light: color-mix(in oklch, var(--ui-color-danger) 50%, white);--ui-color-danger-dark: color-mix(in oklch, var(--ui-color-danger) 75%, black);--ui-color-danger-subtle: color-mix(in oklch, var(--ui-color-danger) 12%, white);--ui-color-danger-hover: color-mix(in oklch, var(--ui-color-danger) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}}
-@layer tokens{:root{--ui-space-px: calc(var(--ui-unit) * 0.125);--ui-space-quarter: calc(var(--ui-unit) * 0.25);--ui-space-half: calc(var(--ui-unit) * 0.5);--ui-space-0: calc(var(--ui-unit) * 0.5);--ui-space-1: var(--ui-unit);--ui-space-2: calc(var(--ui-unit) * 2);--ui-space-3: calc(var(--ui-unit) * 3);--ui-space-4: calc(var(--ui-unit) * 4);--ui-space-6: calc(var(--ui-unit) * 6);--ui-space-8: calc(var(--ui-unit) * 8)}}
-@layer tokens{:root{--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;--ui-font-size-xs: 0.75rem;--ui-font-size-sm: 0.875rem;--ui-font-size-md: 1rem;--ui-font-size-lg: 1.25rem;--ui-font-size-xl: 1.5rem;--ui-font-size-2xl: 1.75rem;--ui-font-size-3xl: 2rem;--ui-font-size-4xl: 2.5rem;--ui-line-height-tight-xs: var(--ui-row-1);--ui-line-height-tight-sm: var(--ui-row-1);--ui-line-height-tight-md: calc(var(--ui-unit) * 3);--ui-line-height-tight-lg: calc(var(--ui-unit) * 3);--ui-line-height-xs: var(--ui-row-1);--ui-line-height-sm: calc(var(--ui-unit) * 3);--ui-line-height-md: calc(var(--ui-unit) * 3);--ui-line-height-lg: var(--ui-row-2);--ui-line-height-xl: var(--ui-row-2);--ui-line-height-2xl: var(--ui-row-2);--ui-line-height-3xl: calc(var(--ui-unit) * 5);--ui-line-height-4xl: calc(var(--ui-unit) * 6);--ui-font-weight-normal: 400;--ui-font-weight-medium: 500;--ui-font-weight-semibold: 600;--ui-font-weight-bold: 700;--ui-letter-spacing-display: -0.02em;--ui-letter-spacing-body: 0;--ui-letter-spacing-caps: 0.08em;--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-line-height-4xl);--ui-heading-1-weight: var(--ui-font-weight-bold);--ui-heading-1-tracking: var(--ui-letter-spacing-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-line-height-3xl);--ui-heading-2-weight: var(--ui-font-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-line-height-2xl);--ui-heading-3-weight: var(--ui-font-weight-semibold);--ui-heading-3-tracking: var(--ui-letter-spacing-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-line-height-xl);--ui-heading-4-weight: var(--ui-font-weight-semibold);--ui-heading-4-tracking: var(--ui-letter-spacing-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-line-height-sm);--ui-heading-5-weight: var(--ui-font-weight-medium);--ui-heading-5-tracking: var(--ui-letter-spacing-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-line-height-md);--ui-body-weight: var(--ui-font-weight-normal);--ui-body-tracking: var(--ui-letter-spacing-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-line-height-sm);--ui-body-sm-weight: var(--ui-font-weight-normal);--ui-body-sm-tracking: var(--ui-letter-spacing-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-line-height-xs);--ui-caption-weight: var(--ui-font-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-line-height-lg);--ui-lead-weight: var(--ui-font-weight-normal);--ui-lead-tracking: var(--ui-letter-spacing-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-line-height-xs);--ui-eyebrow-weight: var(--ui-font-weight-semibold);--ui-eyebrow-tracking: var(--ui-letter-spacing-caps)}}
-@layer tokens{:root{--ui-unit: 8px;--ui-row: calc(var(--ui-unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}}
-@layer tokens{:root{--ui-radius-base: var(--ui-unit);--ui-radius-sm: calc(var(--ui-radius-base) * 0.5);--ui-radius-md: var(--ui-radius-base);--ui-radius-lg: calc(var(--ui-radius-base) * 2);--ui-radius-full: 9999px}}
-@layer tokens{:root{--ui-border-width-sm: calc(var(--ui-unit) * 0.125);--ui-border-width-md: calc(var(--ui-unit) * 0.25);--ui-border-width-lg: calc(var(--ui-unit) * 0.5)}}
-@layer tokens{:root{--ui-shadow-sm: 0 1px 2px color-mix(in oklch, var(--ui-color-neutral) 20%, transparent);--ui-shadow-md: 0 4px 6px color-mix(in oklch, var(--ui-color-neutral) 15%, transparent);--ui-shadow-lg: 0 10px 15px color-mix(in oklch, var(--ui-color-neutral) 12%, transparent)}}
-@layer tokens{:root{--ui-z-index-base: 0;--ui-z-index-sticky: 100;--ui-z-index-dropdown: 200;--ui-z-index-overlay: 300;--ui-z-index-modal: 400;--ui-z-index-popover: 500;--ui-z-index-tooltip: 600;--ui-z-index-toast: 700;--ui-z-index-drawer: 800;--ui-z-index-debug: 9999}}
-@layer tokens{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-normal: 200ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-normal: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}
-@layer tokens{:root{color-scheme:light dark;--ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));--ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));--ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));--ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
-@layer themes{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));--ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700))}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}}
-@layer tokens{:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}}
+@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.styles, components.tokens, utilities, themes;
+@layer tokens.core{:root{--ui-scale: 1;--ui-unit: calc(8px * var(--ui-scale));--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;--ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;--ui-font-size-base: calc(1rem * var(--ui-scale));--ui-radius-base: var(--ui-unit);--ui-border-width-base: calc(var(--ui-unit) * 0.125);--ui-shadow-strength: 20%}}
+@layer tokens.scale{:root{--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-success-light: color-mix(in oklch, var(--ui-color-success) 50%, white);--ui-color-success-dark: color-mix(in oklch, var(--ui-color-success) 75%, black);--ui-color-success-subtle: color-mix(in oklch, var(--ui-color-success) 12%, white);--ui-color-success-hover: color-mix(in oklch, var(--ui-color-success) 85%, black);--ui-color-warning-light: color-mix(in oklch, var(--ui-color-warning) 50%, white);--ui-color-warning-dark: color-mix(in oklch, var(--ui-color-warning) 75%, black);--ui-color-warning-subtle: color-mix(in oklch, var(--ui-color-warning) 12%, white);--ui-color-warning-hover: color-mix(in oklch, var(--ui-color-warning) 85%, black);--ui-color-danger-light: color-mix(in oklch, var(--ui-color-danger) 50%, white);--ui-color-danger-dark: color-mix(in oklch, var(--ui-color-danger) 75%, black);--ui-color-danger-subtle: color-mix(in oklch, var(--ui-color-danger) 12%, white);--ui-color-danger-hover: color-mix(in oklch, var(--ui-color-danger) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}}
+@layer tokens.scale{:root{--ui-space-px: calc(var(--ui-unit) * 0.125);--ui-space-quarter: calc(var(--ui-unit) * 0.25);--ui-space-half: calc(var(--ui-unit) * 0.5);--ui-space-0: calc(var(--ui-unit) * 0.5);--ui-space-1: var(--ui-unit);--ui-space-2: calc(var(--ui-unit) * 2);--ui-space-3: calc(var(--ui-unit) * 3);--ui-space-4: calc(var(--ui-unit) * 4);--ui-space-6: calc(var(--ui-unit) * 6);--ui-space-8: calc(var(--ui-unit) * 8)}}
+@layer tokens.scale{:root{--ui-font-size-xs: calc(var(--ui-font-size-base) * 0.75);--ui-font-size-sm: calc(var(--ui-font-size-base) * 0.875);--ui-font-size-md: var(--ui-font-size-base);--ui-font-size-lg: calc(var(--ui-font-size-base) * 1.25);--ui-font-size-xl: calc(var(--ui-font-size-base) * 1.5);--ui-font-size-2xl: calc(var(--ui-font-size-base) * 1.75);--ui-font-size-3xl: calc(var(--ui-font-size-base) * 2);--ui-font-size-4xl: calc(var(--ui-font-size-base) * 2.5);--ui-line-height-tight-xs: var(--ui-row-1);--ui-line-height-tight-sm: var(--ui-row-1);--ui-line-height-tight-md: calc(var(--ui-unit) * 3);--ui-line-height-tight-lg: calc(var(--ui-unit) * 3);--ui-line-height-xs: var(--ui-row-1);--ui-line-height-sm: calc(var(--ui-unit) * 3);--ui-line-height-md: calc(var(--ui-unit) * 3);--ui-line-height-lg: var(--ui-row-2);--ui-line-height-xl: var(--ui-row-2);--ui-line-height-2xl: var(--ui-row-2);--ui-line-height-3xl: calc(var(--ui-unit) * 5);--ui-line-height-4xl: calc(var(--ui-unit) * 6);--ui-font-weight-normal: 400;--ui-font-weight-medium: 500;--ui-font-weight-semibold: 600;--ui-font-weight-bold: 700;--ui-letter-spacing-display: -0.02em;--ui-letter-spacing-body: 0;--ui-letter-spacing-caps: 0.08em}}
+@layer tokens.semantic{:root{--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-line-height-4xl);--ui-heading-1-weight: var(--ui-font-weight-bold);--ui-heading-1-tracking: var(--ui-letter-spacing-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-line-height-3xl);--ui-heading-2-weight: var(--ui-font-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-line-height-2xl);--ui-heading-3-weight: var(--ui-font-weight-semibold);--ui-heading-3-tracking: var(--ui-letter-spacing-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-line-height-xl);--ui-heading-4-weight: var(--ui-font-weight-semibold);--ui-heading-4-tracking: var(--ui-letter-spacing-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-line-height-sm);--ui-heading-5-weight: var(--ui-font-weight-medium);--ui-heading-5-tracking: var(--ui-letter-spacing-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-line-height-md);--ui-body-weight: var(--ui-font-weight-normal);--ui-body-tracking: var(--ui-letter-spacing-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-line-height-sm);--ui-body-sm-weight: var(--ui-font-weight-normal);--ui-body-sm-tracking: var(--ui-letter-spacing-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-line-height-xs);--ui-caption-weight: var(--ui-font-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-line-height-lg);--ui-lead-weight: var(--ui-font-weight-normal);--ui-lead-tracking: var(--ui-letter-spacing-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-line-height-xs);--ui-eyebrow-weight: var(--ui-font-weight-semibold);--ui-eyebrow-tracking: var(--ui-letter-spacing-caps)}}
+@layer tokens.scale{:root{--ui-row: calc(var(--ui-unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}}
+@layer tokens.scale{:root{--ui-radius-sm: calc(var(--ui-radius-base) * 0.5);--ui-radius-md: var(--ui-radius-base);--ui-radius-lg: calc(var(--ui-radius-base) * 2);--ui-radius-full: 9999px}}
+@layer tokens.scale{:root{--ui-border-width-sm: var(--ui-border-width-base);--ui-border-width-md: calc(var(--ui-border-width-base) * 2);--ui-border-width-lg: calc(var(--ui-border-width-base) * 4)}}
+@layer tokens.scale{:root{--ui-shadow-sm: 0 calc(var(--ui-unit) * 0.125) calc(var(--ui-unit) * 0.25) color-mix(in oklch, var(--ui-color-neutral) var(--ui-shadow-strength), transparent);--ui-shadow-md: 0 calc(var(--ui-unit) * 0.5) calc(var(--ui-unit) * 0.75) color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.75), transparent);--ui-shadow-lg: 0 calc(var(--ui-unit) * 1.25) calc(var(--ui-unit) * 2) color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.6), transparent)}}
+@layer tokens.scale{:root{--ui-z-index-base: 0;--ui-z-index-sticky: 100;--ui-z-index-dropdown: 200;--ui-z-index-overlay: 300;--ui-z-index-modal: 400;--ui-z-index-popover: 500;--ui-z-index-tooltip: 600;--ui-z-index-toast: 700;--ui-z-index-drawer: 800;--ui-z-index-debug: 9999}}
+@layer tokens.scale{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-normal: 200ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-normal: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}
+@layer tokens.semantic{:root{color-scheme:light dark;--ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));--ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));--ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));--ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));--ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
+@layer themes{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));--ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));--ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700))}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}[data-density=compact]{--ui-scale: 0.875}[data-density=comfortable]{--ui-scale: 1.125}}
+@layer tokens.semantic{:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}}
 @layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}
 @layer base{.ui-root{font-family:var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-line-height-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}
 @layer base{h1{margin-block-end:var(--ui-space-4);font-size:var(--ui-heading-1-size);font-weight:var(--ui-heading-1-weight);line-height:var(--ui-heading-1-line-height);letter-spacing:var(--ui-heading-1-tracking)}h2{margin-block-end:var(--ui-space-3);font-size:var(--ui-heading-2-size);font-weight:var(--ui-heading-2-weight);line-height:var(--ui-heading-2-line-height);letter-spacing:var(--ui-heading-2-tracking)}h3{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-3-size);font-weight:var(--ui-heading-3-weight);line-height:var(--ui-heading-3-line-height);letter-spacing:var(--ui-heading-3-tracking)}h4{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-4-size);font-weight:var(--ui-heading-4-weight);line-height:var(--ui-heading-4-line-height);letter-spacing:var(--ui-heading-4-tracking)}h5,h6{margin-block-end:var(--ui-space-1);font-size:var(--ui-heading-5-size);font-weight:var(--ui-heading-5-weight);line-height:var(--ui-heading-5-line-height);letter-spacing:var(--ui-heading-5-tracking)}p{margin-block-end:var(--ui-space-2);font-size:var(--ui-body-size);line-height:var(--ui-body-line-height);letter-spacing:var(--ui-body-tracking)}p:last-child{margin-block-end:0}strong,b{font-weight:var(--ui-font-weight-bold);line-height:0}small{font-size:var(--ui-caption-size);line-height:0}code{padding:0 var(--ui-space-1);font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:0;vertical-align:baseline;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-sm)}pre{padding:var(--ui-space-2);margin-block-end:var(--ui-space-2);overflow-x:auto;font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:var(--ui-body-sm-line-height);background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-md)}pre code{padding:0;background:none}a{text-decoration:underline;color:var(--ui-color-primary);transition:color var(--ui-duration-fast) var(--ui-ease-default)}a:hover{color:var(--ui-color-primary-hover)}a:visited{color:var(--ui-color-primary)}@media(width < 45.625rem){h1{font-size:var(--ui-font-size-2xl);line-height:var(--ui-line-height-2xl)}h2{font-size:var(--ui-font-size-xl);line-height:var(--ui-line-height-xl)}h3{font-size:var(--ui-font-size-lg);line-height:var(--ui-line-height-sm)}h4{font-size:1.125rem;line-height:var(--ui-line-height-sm)}}@media(width > 67.5rem){h1{font-size:calc(var(--ui-unit)*6);line-height:calc(var(--ui-unit)*7)}h2{font-size:var(--ui-font-size-4xl);line-height:var(--ui-line-height-4xl)}}}
@@ -67,7 +69,7 @@
 @layer components.tokens{.ui-disclosure{--_weight-medium: var(--ui-font-weight-medium, 500);--_color-bg-subtle: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, ease);--_duration-normal: var(--ui-duration-normal, 200ms);--_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_border-width: var(--ui-disclosure-border-width, var(--ui-border-width-sm, 0.0625rem));--_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));--_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));--_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));--_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2))}.ui-disclosure--borderless{--_border-width: 0}}
 @layer components.styles{.ui-disclosure{box-sizing:border-box;border-radius:var(--_radius);outline:var(--_border-width) solid var(--_border-color);outline-offset:calc(var(--_border-width)*-1)}.ui-disclosure:not([open]){block-size:var(--_trigger-height)}.ui-disclosure__trigger{display:flex;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);block-size:var(--_trigger-height);inline-size:100%;padding-inline:var(--_padding-x);font-weight:var(--_weight-medium);line-height:1;text-align:start;cursor:pointer;list-style:none}.ui-disclosure__trigger::-webkit-details-marker{display:none}.ui-disclosure__trigger::marker{display:none}.ui-disclosure__trigger:hover{background:var(--_color-bg-subtle)}.ui-disclosure__icon{flex-shrink:0;transition:transform var(--_duration-fast) var(--_ease-default)}.ui-disclosure[open] .ui-disclosure__icon{transform:rotate(180deg)}.ui-disclosure__content{padding:0 var(--_padding-x) var(--_padding-y)}.ui-disclosure--animate .ui-disclosure__content{animation:disclosure-open var(--_duration-normal) var(--_ease-default)}@keyframes disclosure-open{from{opacity:0;transform:translateY(calc(0.5rem * -1))}to{opacity:1;transform:translateY(0)}}.ui-disclosure--borderless{border:none;border-radius:0}.ui-disclosure--flush .ui-disclosure__trigger{padding-inline:0}.ui-disclosure--flush .ui-disclosure__content{padding-inline:0}@media(prefers-reduced-motion: reduce){.ui-disclosure--animate .ui-disclosure__content{animation:none}.ui-disclosure__icon{transition:none}}}
 @layer components.tokens{.ui-alert{--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));--_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));--_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));--_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));--_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));--_bg: color-mix(in oklch, var(--_accent) 8%, white);--_border-color: var(--_accent);--_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));--_font-size: var(--ui-alert-font-size, inherit);--_padding-end: 0;--_icon-color: var(--_accent)}.ui-alert--info{--_accent: var(--ui-color-primary, oklch(55% 0.22 250deg))}.ui-alert--success{--_accent: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-alert--warning{--_accent: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-alert--danger{--_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-alert--sm{--_padding: var(--ui-alert-padding-sm, var(--ui-space-1, 0.5rem));--_gap: var(--ui-alert-gap-sm, calc(0.5rem * 0.5));--_font-size: var(--ui-alert-font-size-sm, var(--ui-font-size-sm, 0.875rem))}.ui-alert--lg{--_padding: var(--ui-alert-padding-lg, var(--ui-space-4, 2rem));--_gap: var(--ui-alert-gap-lg, var(--ui-space-2, 1rem));--_font-size: var(--ui-alert-font-size-lg, var(--ui-font-size-lg, 1.25rem))}.ui-alert--dismissible{--_padding-end: var(--ui-alert-padding-end, calc(0.5rem * 5))}}
-@layer components.styles{.ui-alert{display:flex;align-items:flex-start;gap:var(--_gap);padding:calc(var(--_padding) - var(--_border-width));padding-inline:var(--_padding);padding-inline-end:calc(var(--_padding) + var(--_padding-end));font-size:var(--_font-size);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);border-inline-start-width:calc(0.5rem*.5)}.ui-alert__icon{flex-shrink:0;color:var(--_icon-color)}.ui-alert__content{flex:1;min-inline-size:0}.ui-alert__title{margin:0;font-weight:var(--_weight-medium);line-height:var(--_row-1)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--_color-text-muted);background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--_color-text)}}
+@layer components.styles{.ui-alert{display:flex;align-items:flex-start;gap:var(--_gap);padding:calc(var(--_padding) - var(--_border-width));padding-inline:var(--_padding);padding-inline-end:calc(var(--_padding) + var(--_padding-end));font-size:var(--_font-size);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);border-inline-start-width:calc(var(--_border-width)*4)}.ui-alert__icon{flex-shrink:0;color:var(--_icon-color)}.ui-alert__content{flex:1;min-inline-size:0}.ui-alert__title{margin:0;font-weight:var(--_weight-medium);line-height:var(--_row-1)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--_color-text-muted);background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--_color-text)}}
 @property --ui-progress-value{syntax:"<percentage>";inherits:false;initial-value:0%}
 @layer components.tokens{.ui-progress{--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_height: var(--ui-progress-height, calc(0.5rem * 1));--_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--_fill: var(--ui-progress-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.ui-progress--sm{--_height: calc(0.5rem * 1)}.ui-progress--lg{--_height: calc(0.5rem * 2)}.ui-progress--success{--_fill: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress--warning{--_fill: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress--danger{--_fill: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
 @layer components.styles{.ui-progress{position:relative;block-size:var(--_height);overflow:hidden;background:var(--_bg);border-radius:var(--_radius)}.ui-progress__bar{block-size:100%;inline-size:var(--ui-progress-value, auto);background:var(--_fill);border-radius:var(--_radius);transition:inline-size var(--_duration-normal) var(--_ease-default),--ui-progress-value var(--_duration-normal) var(--_ease-default)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}@media(prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation:none}.ui-progress--animated .ui-progress__bar{animation:none}}}
@@ -78,7 +80,7 @@
 @layer components.styles{.ui-skeleton{display:block;position:relative;overflow:hidden;background:var(--_bg);border-radius:var(--_radius)}.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.ui-skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.ui-skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.ui-skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.ui-skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.ui-skeleton--static::after{animation:none}.ui-skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.ui-skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion: reduce){.ui-skeleton::after{animation:none}.ui-skeleton--pulse{animation:none}}}
 @layer components.tokens{.ui-spinner{--_size: var(--ui-spinner-size, calc(var(--ui-unit, 0.5rem) * 4));--_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md, 0.125rem));--_color: var(--ui-spinner-color, currentcolor);--_track-color: var(--ui-spinner-track-color, transparent);--_duration: var(--ui-spinner-duration, 750ms)}.ui-spinner--xs{--_size: var(--ui-spinner-size-xs, calc(var(--ui-unit, 0.5rem) * 2));--_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm, 0.0625rem))}.ui-spinner--sm{--_size: var(--ui-spinner-size-sm, calc(var(--ui-unit, 0.5rem) * 3));--_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md, 0.125rem))}.ui-spinner--lg{--_size: var(--ui-spinner-size-lg, calc(var(--ui-unit, 0.5rem) * 5));--_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md, 0.125rem))}.ui-spinner--xl{--_size: var(--ui-spinner-size-xl, calc(var(--ui-unit, 0.5rem) * 6));--_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg, 0.25rem))}}
 @layer components.styles{.ui-spinner{display:inline-block;flex-shrink:0;box-sizing:border-box;block-size:var(--_size);inline-size:var(--_size);vertical-align:middle;border:var(--_border-width) solid var(--_track-color);border-radius:50%;border-block-start-color:var(--_color);animation:spinner-rotate var(--_duration) linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion: reduce){.ui-spinner{animation:none}}}
-@layer components.tokens{.ui-toast-viewport{--_z-toast: var(--ui-z-index-toast, 700);--_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--_max-width: var(--ui-toast-viewport-max-width, 420px)}.ui-toast{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_padding: var(--ui-toast-padding, calc(0.5rem * 2));--_gap: var(--ui-toast-gap, calc(0.5rem * 1));--_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg, 0 10px 15px hsla(220, 10%, 20%, 0.15)))}.ui-toast--success{--_border-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-toast--warning{--_border-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-toast--danger{--_border-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-toast--info{--_border-color: var(--ui-color-primary, oklch(55% 0.22 250deg))}}
+@layer components.tokens{.ui-toast-viewport{--_z-toast: var(--ui-z-index-toast, 700);--_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--_max-width: var(--ui-toast-viewport-max-width, 420px)}.ui-toast{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_padding: var(--ui-toast-padding, calc(0.5rem * 2));--_gap: var(--ui-toast-gap, calc(0.5rem * 1));--_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)))}.ui-toast--success{--_border-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-toast--warning{--_border-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-toast--danger{--_border-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-toast--info{--_border-color: var(--ui-color-primary, oklch(55% 0.22 250deg))}}
 @layer components.styles{.ui-toast-viewport{display:flex;flex-direction:column;gap:var(--_gap);position:fixed;z-index:var(--_z-toast);max-inline-size:var(--_max-width);padding:var(--_padding);pointer-events:none;list-style:none}.ui-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ui-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ui-toast-viewport--bottom-end{inset-block-end:0;inset-inline-end:0}.ui-toast-viewport--bottom-start{inset-block-end:0;inset-inline-start:0}.ui-toast-viewport--top-center{inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast-viewport--bottom-center{inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast{display:flex;align-items:flex-start;gap:var(--_gap);padding:var(--_padding);background:var(--_bg);border-radius:var(--_radius);outline:var(--_border-width-sm) solid var(--_border-color);box-shadow:var(--_shadow);pointer-events:auto;outline-offset:calc(var(--_border-width-sm)*-1)}.ui-toast__icon{flex-shrink:0}.ui-toast__content{flex:1;min-inline-size:0}.ui-toast__title{margin:0;font-weight:var(--_weight-medium);line-height:var(--_row-1)}.ui-toast__description{margin:0;font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-toast__action{flex-shrink:0}.ui-toast__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_row-1);inline-size:var(--_row-1);padding:0;color:var(--_color-text-muted);background:none;border:none;cursor:pointer}.ui-toast__close:hover{color:var(--_color-text)}.ui-toast[data-state=open]{animation:toast-slide-in var(--_duration-normal) var(--_ease-out)}.ui-toast[data-state=closed]{animation:toast-slide-out var(--_duration-fast) var(--_ease-in)}@keyframes toast-slide-in{from{opacity:0;transform:translateX(100%)}}@keyframes toast-slide-out{to{opacity:0;transform:translateX(100%)}}@media(prefers-reduced-motion: reduce){.ui-toast[data-state]{animation:none}}}
 @layer components.tokens{.ui-checkbox{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, ease);--_border-width-md: var(--ui-border-width-md, 0.125rem);--_color-focus: var(--ui-color-focus, oklch(75% 0.15 250deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_size: var(--ui-checkbox-size, calc(0.5rem * 2));--_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));--_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-checkbox--lg{--_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3))}.ui-checkbox--error{--_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-checkbox--success{--_border-color: var(--ui-checkbox-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--_border-color-focus: var(--ui-checkbox-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}
 @layer components.styles{.ui-checkbox{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--_size);inline-size:var(--_size);margin:0;vertical-align:middle;background:var(--_bg);border:var(--_border-width-sm) solid var(--_border-color);border-radius:var(--_radius);cursor:pointer;appearance:none;transition:background-color var(--_duration-fast) var(--_ease-default),border-color var(--_duration-fast) var(--_ease-default),box-shadow var(--_duration-fast) var(--_ease-default)}.ui-checkbox::before{content:"";block-size:65%;inline-size:65%;background-color:var(--_check-color);opacity:0;clip-path:polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);transition:opacity var(--_duration-fast) var(--_ease-default)}.ui-checkbox:hover:not(:disabled){border-color:var(--_border-color-focus)}.ui-checkbox:focus-visible{border-color:var(--_border-color-focus);outline:var(--_border-width-md) solid rgba(0,0,0,0);outline-offset:var(--_border-width-sm);box-shadow:0 0 0 var(--_border-width-md) var(--_color-focus)}.ui-checkbox:checked{background:var(--_bg-checked);border-color:var(--_bg-checked)}.ui-checkbox:checked::before{opacity:1}.ui-checkbox:indeterminate{background:var(--_bg-checked);border-color:var(--_bg-checked)}.ui-checkbox:indeterminate::before{opacity:1;clip-path:polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%)}.ui-checkbox:disabled{opacity:var(--_opacity-disabled);cursor:not-allowed}}
@@ -120,7 +122,7 @@
 @layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);block-size:var(--_height);padding:0;margin:0;font-size:var(--_font-size-sm);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--_gap);block-size:var(--_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--_breadcrumb-separator);color:var(--_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--_link-color);transition:color var(--_duration-fast) var(--_ease-default)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--_color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--_separator-color)}}
 @layer components.tokens{.ui-dropdown-menu{--_space-0: var(--ui-space-0, 0.25rem);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_z: var(--ui-dropdown-menu-z, var(--ui-z-index-dropdown, 200));--_panel-offset: var(--ui-dropdown-menu-panel-offset, var(--ui-space-1, 0.5rem));--_panel-min-width: var(--ui-dropdown-menu-panel-min-width, auto)}}
 @layer components.styles{.ui-dropdown-menu{display:inline-block;position:relative}.ui-dropdown-menu__trigger{display:inline-flex;align-items:center;gap:var(--_space-0)}.ui-dropdown-menu__trigger-icon{display:inline-flex;font-size:0.6em;transition:transform var(--_duration-fast) var(--_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__trigger-icon{transform:rotate(180deg)}.ui-dropdown-menu__panel{position:absolute;inset-block-start:calc(100% + var(--_panel-offset));inset-inline-start:0;z-index:var(--_z);min-inline-size:var(--_panel-min-width);opacity:0;pointer-events:none;transform:translateY(calc(0.5rem * -1));transition:opacity var(--_duration-fast) var(--_ease-default),transform var(--_duration-fast) var(--_ease-default)}.ui-dropdown-menu--open .ui-dropdown-menu__panel{opacity:1;pointer-events:auto;transform:translateY(0)}.ui-dropdown-menu--top .ui-dropdown-menu__panel{inset-block-start:auto;inset-block-end:calc(100% + var(--_panel-offset));transform:translateY(0.5rem)}.ui-dropdown-menu--top.ui-dropdown-menu--open .ui-dropdown-menu__panel{transform:translateY(0)}.ui-dropdown-menu--align-end .ui-dropdown-menu__panel{inset-inline-start:auto;inset-inline-end:0}.ui-dropdown-menu--full-width .ui-dropdown-menu__panel{min-inline-size:100%}}
-@layer components.tokens{.ui-menu{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-xs: var(--ui-font-size-xs, 0.75rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--_padding: var(--ui-menu-padding, calc(0.5rem * 1));--_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0 10px 15px hsla(220, 10%, 20%, 0.15)));--_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
+@layer components.tokens{.ui-menu{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-xs: var(--ui-font-size-xs, 0.75rem);--_weight-medium: var(--ui-font-weight-medium, 500);--_row-1: var(--ui-row-1, 1rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_color-danger: var(--ui-color-danger, oklch(60% 0.22 25deg));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_color-border: var(--ui-color-border, hsl(220, 10%, 90%));--_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--_padding: var(--ui-menu-padding, calc(0.5rem * 1));--_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)));--_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}
 @layer components.styles{.ui-menu{min-inline-size:var(--_min-width);max-block-size:var(--_max-height);padding:var(--_padding);overflow-y:auto;background:var(--_bg);border-radius:var(--_radius);outline:var(--_border-width-sm) solid var(--_border-color);box-shadow:var(--_shadow);outline-offset:calc(var(--_border-width-sm)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--_item-padding);font-size:var(--_font-size-xs);font-weight:var(--_weight-medium);line-height:var(--_row-1);letter-spacing:0.05em;text-transform:uppercase;color:var(--_color-text-muted)}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--_item-padding);font-size:var(--_font-size-sm);line-height:var(--_row-1);text-decoration:none;color:var(--_color-text);background:rgba(0,0,0,0);border:none;border-radius:var(--_item-radius);cursor:pointer;transition:background var(--_duration-fast) var(--_ease-default)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--_color-danger)}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--_color-danger)}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:var(--_opacity-disabled);pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--_font-size-xs);color:var(--_color-text-muted)}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--_border-width-sm);background:var(--_color-border)}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}
 @layer components.tokens{.ui-nav{--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-sans: var(--ui-font-sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);--_border-width-md: var(--ui-border-width-md, 0.125rem);--_duration-base: var(--ui-duration-base, 150ms);--_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--_opacity-disabled: var(--ui-opacity-disabled, 0.5);--_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-font-weight-medium, 500));--_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-nav--pills{--_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}
 @layer components.styles{.ui-nav__list{display:flex;align-items:stretch;gap:var(--_gap);box-sizing:border-box;block-size:var(--_item-height);padding:0;margin:0;list-style:none;box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-nav__item{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--_item-height);padding-inline:var(--_item-padding-x);font-family:var(--_font-sans);font-size:var(--_item-font-size);font-weight:var(--_item-font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--_item-color);background:rgba(0,0,0,0);border:none;box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--_duration-base) var(--_ease-default),background var(--_duration-base) var(--_ease-default),box-shadow var(--_duration-base) var(--_ease-default)}.ui-nav__item:hover{color:var(--_item-color-hover)}.ui-nav__item--active{color:var(--_item-color-active);box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 var(--_item-color-active)}.ui-nav__item--disabled{opacity:var(--_opacity-disabled);pointer-events:none}.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--pills .ui-nav__item{border-radius:var(--_item-radius);box-shadow:none}.ui-nav--pills .ui-nav__item:hover{background:var(--_item-bg-hover)}.ui-nav--pills .ui-nav__item--active{color:var(--_item-color-active);background:var(--_item-bg-active)}.ui-nav--vertical .ui-nav__list{flex-direction:column;align-items:stretch;block-size:auto;box-shadow:inset calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-nav--vertical .ui-nav__item{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 rgba(0,0,0,0)}.ui-nav--vertical .ui-nav__item--active{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 var(--_item-color-active)}.ui-nav--vertical.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--vertical.ui-nav--pills .ui-nav__item{box-shadow:none}}
@@ -130,7 +132,7 @@
 @layer components.styles{.ui-tabs__list{display:flex;align-items:stretch;gap:var(--_space-1);box-sizing:border-box;block-size:var(--_tab-height);box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-tabs__tab{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--_tab-height);padding-inline:var(--_tab-padding-x);margin:0;font-family:var(--_font-sans);font-size:var(--_tab-font-size);font-weight:var(--_weight-medium);line-height:1;color:var(--_color-text-muted);background:var(--_tab-bg);border:none;box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--_duration-base) var(--_ease-default),box-shadow var(--_duration-base) var(--_ease-default)}.ui-tabs__tab:hover{color:var(--_color-text)}.ui-tabs__tab--active{color:var(--_color-primary);background:var(--_tab-bg-active);box-shadow:inset 0 calc(var(--_border-width-md)*-1) 0 var(--_color-primary)}.ui-tabs__panel{display:none;padding:var(--_panel-padding);line-height:var(--_row-1)}.ui-tabs__panel--active{display:block}.ui-tabs--vertical{display:flex}.ui-tabs--vertical>.ui-tabs__list{flex-direction:column;block-size:auto;inline-size:auto;box-shadow:inset calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-tabs--vertical>.ui-tabs__list>.ui-tabs__tab{block-size:var(--_tab-height);box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 rgba(0,0,0,0)}.ui-tabs--vertical>.ui-tabs__list>.ui-tabs__tab--active{box-shadow:inset calc(var(--_border-width-md)*-1) 0 0 var(--_color-primary)}.ui-tabs--vertical>.ui-tabs__panel{flex:1}}
 @layer components.tokens{.ui-dialog{--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-dialog-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}}
 @layer components.styles{.ui-dialog .ui-modal__content{padding:0}.ui-dialog__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);border-block-end:1px solid var(--_border-color)}.ui-dialog__title{margin:0;font-size:var(--_font-size-lg);font-weight:var(--_weight-semibold);line-height:calc(0.5rem*3)}.ui-dialog__close{flex-shrink:0;margin-inline-start:auto}.ui-dialog__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto}.ui-dialog__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*1.5);padding:var(--_footer-padding);border-block-start:1px solid var(--_border-color)}.ui-dialog--borderless .ui-dialog__header{border-block-end:none}.ui-dialog--borderless .ui-dialog__footer{border-block-start:none}}
-@layer components.tokens{.ui-drawer{--_z-drawer: var(--ui-z-index-drawer, 800);--_overlay-bg: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_size: var(--ui-drawer-size, calc(0.5rem * 40));--_max-size: var(--ui-drawer-max-size, 90%);--_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg, 0 10px 15px hsla(220, 10%, 20%, 0.15)));--_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-drawer--sm{--_size: calc(0.5rem * 30)}.ui-drawer--lg{--_size: calc(0.5rem * 50)}.ui-drawer--full{--_size: 100%;--_max-size: 100%}}
+@layer components.tokens{.ui-drawer{--_z-drawer: var(--ui-z-index-drawer, 800);--_overlay-bg: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-out: var(--ui-ease-out, ease-out);--_duration-fast: var(--ui-duration-fast, 100ms);--_ease-in: var(--ui-ease-in, ease-in);--_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--_font-size-lg: var(--ui-font-size-lg, 1.25rem);--_weight-semibold: var(--ui-font-weight-semibold, 600);--_row-1: var(--ui-row-1, 1rem);--_font-size-sm: var(--ui-font-size-sm, 0.875rem);--_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--_size: var(--ui-drawer-size, calc(0.5rem * 40));--_max-size: var(--ui-drawer-max-size, 90%);--_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg, 0 0.625rem 1rem hsla(220, 10%, 20%, 0.15)));--_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));--_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-drawer--sm{--_size: calc(0.5rem * 30)}.ui-drawer--lg{--_size: calc(0.5rem * 50)}.ui-drawer--full{--_size: 100%;--_max-size: 100%}}
 @layer components.styles{.ui-drawer-overlay{position:fixed;inset:0;z-index:var(--_z-drawer);background:var(--_overlay-bg)}.ui-drawer-overlay[data-state=open]{animation:drawer-overlay-in var(--_duration-normal) var(--_ease-out)}.ui-drawer-overlay[data-state=closed]{animation:drawer-overlay-out var(--_duration-fast) var(--_ease-in)}@keyframes drawer-overlay-in{from{opacity:0}}@keyframes drawer-overlay-out{to{opacity:0}}.ui-drawer{display:flex;flex-direction:column;position:fixed;z-index:var(--_z-drawer);background:var(--_bg);box-shadow:var(--_shadow)}.ui-drawer--end{inset-block:0;inset-inline-end:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:calc(var(--_border-width-sm)*-1) 0 0 var(--_border-color)}.ui-drawer--start{inset-block:0;inset-inline-start:0;inline-size:var(--_size);max-inline-size:var(--_max-size);box-shadow:var(--_border-width-sm) 0 0 var(--_border-color)}.ui-drawer--top{inset-block-start:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 var(--_border-width-sm) 0 var(--_border-color)}.ui-drawer--bottom{inset-block-end:0;inset-inline:0;block-size:var(--_size);max-block-size:var(--_max-size);box-shadow:0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-drawer--end[data-state=open]{animation:drawer-slide-in-end var(--_duration-normal) var(--_ease-out)}.ui-drawer--end[data-state=closed]{animation:drawer-slide-out-end var(--_duration-fast) var(--_ease-in)}.ui-drawer--start[data-state=open]{animation:drawer-slide-in-start var(--_duration-normal) var(--_ease-out)}.ui-drawer--start[data-state=closed]{animation:drawer-slide-out-start var(--_duration-fast) var(--_ease-in)}.ui-drawer--top[data-state=open]{animation:drawer-slide-in-top var(--_duration-normal) var(--_ease-out)}.ui-drawer--top[data-state=closed]{animation:drawer-slide-out-top var(--_duration-fast) var(--_ease-in)}.ui-drawer--bottom[data-state=open]{animation:drawer-slide-in-bottom var(--_duration-normal) var(--_ease-out)}.ui-drawer--bottom[data-state=closed]{animation:drawer-slide-out-bottom var(--_duration-fast) var(--_ease-in)}@keyframes drawer-slide-in-end{from{transform:translateX(100%)}}@keyframes drawer-slide-out-end{to{transform:translateX(100%)}}@keyframes drawer-slide-in-start{from{transform:translateX(-100%)}}@keyframes drawer-slide-out-start{to{transform:translateX(-100%)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.ui-drawer__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--_header-padding);box-shadow:inset 0 calc(var(--_border-width-sm)*-1) 0 var(--_border-color)}.ui-drawer__title{margin:0;font-size:var(--_font-size-lg);font-weight:var(--_weight-semibold);line-height:var(--_row-1)}.ui-drawer__description{margin:0;font-size:var(--_font-size-sm);line-height:var(--_row-1);color:var(--_color-text-muted)}.ui-drawer__close{flex-shrink:0;margin-inline-start:auto}.ui-drawer__body{flex:1 1 auto;padding:var(--_body-padding);overflow-y:auto;line-height:var(--_row-1)}.ui-drawer__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*2);padding:var(--_footer-padding);box-shadow:inset 0 var(--_border-width-sm) 0 var(--_border-color)}@media(prefers-reduced-motion: reduce){.ui-drawer-overlay[data-state],.ui-drawer[data-state]{animation:none}}}
 @layer components.tokens{.ui-modal{--_duration-normal: var(--ui-duration-normal, 200ms);--_ease-default: var(--ui-ease-default, ease);--_bg: var(--ui-modal-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));--_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));--_padding: var(--ui-modal-padding, calc(0.5rem * 3));--_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));--_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));--_z: var(--ui-modal-z, var(--ui-z-index-modal, 400))}.ui-modal--sm{--_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40))}.ui-modal--lg{--_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80))}.ui-modal--full{--_max-width: calc(100vw - 0.5rem * 4);--_max-height: calc(100vh - 0.5rem * 4);--_radius: 0}}
 @layer components.styles{.ui-modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--_z);padding:calc(0.5rem*2)}.ui-modal__content{display:flex;flex-direction:column;position:relative;inline-size:100%;max-block-size:var(--_max-height);max-inline-size:var(--_max-width);padding:var(--_padding);overflow:hidden;background:var(--_bg);border-radius:var(--_radius);box-shadow:var(--_shadow)}.ui-modal__body{flex:1 1 auto;overflow-y:auto}.ui-modal--entering .ui-modal__content,.ui-modal--visible .ui-modal__content{opacity:1;transform:scale(1)}.ui-modal--exiting .ui-modal__content,.ui-modal--hidden .ui-modal__content{opacity:0;transform:scale(0.95)}.ui-modal--animate .ui-modal__content{transition:opacity var(--_duration-normal) var(--_ease-default),transform var(--_duration-normal) var(--_ease-default)}.ui-modal--hidden{visibility:hidden;pointer-events:none}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/components/feedback/alert/index.scss

@@ -92,7 +92,7 @@
     background: var(--_bg);
     border: var(--_border-width) solid var(--_border-color);
     border-radius: var(--_radius);
-    border-inline-start-width: calc(#{t.$unit} * 0.5);
+    border-inline-start-width: calc(var(--_border-width) * 4);
   }
 
   .alert__icon {

package/src/config/guides/theming.docs.html

@@ -5,6 +5,121 @@ skipValidation: true
 weight: 2
 ---
 
+<!-- @playground -->
+<!-- Drag the sliders to see how core tokens cascade through the entire system. Every component on this page responds in real time. -->
+<div id="theme-playground">
+  <div class="demo-playground">
+    <div class="demo-playground__row">
+      <label>scale</label>
+      <input type="range" min="0.75" max="1.25" step="0.025" value="1" data-token="--ui-scale" data-suffix="">
+      <output>1</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>primary hue</label>
+      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-primary" data-template="oklch(55% 0.22 {value})" data-suffix="">
+      <output>250</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>success hue</label>
+      <input type="range" min="0" max="360" step="1" value="145" data-token="--ui-color-success" data-template="oklch(60% 0.18 {value})" data-suffix="">
+      <output>145</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>warning hue</label>
+      <input type="range" min="0" max="360" step="1" value="70" data-token="--ui-color-warning" data-template="oklch(75% 0.18 {value})" data-suffix="">
+      <output>70</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>danger hue</label>
+      <input type="range" min="0" max="360" step="1" value="25" data-token="--ui-color-danger" data-template="oklch(60% 0.22 {value})" data-suffix="">
+      <output>25</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>neutral hue</label>
+      <input type="range" min="0" max="360" step="1" value="250" data-token="--ui-color-neutral" data-param="hue" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <output>250</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>neutral chroma</label>
+      <input type="range" min="0" max="0.08" step="0.005" value="0.02" data-token="--ui-color-neutral" data-param="chroma" data-template="oklch(50% {chroma} {hue})" data-suffix="">
+      <output>0.02</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>font size</label>
+      <input type="range" min="0.75" max="1.25" step="0.05" value="1" data-token="--ui-font-size-base" data-suffix="rem">
+      <output>1rem</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>font family</label>
+      <select data-token="--ui-font-sans">
+        <option value="system-ui, -apple-system, sans-serif">System</option>
+        <option value="'Georgia', 'Times New Roman', serif">Serif</option>
+        <option value="ui-monospace, sfmono-regular, monospace">Mono</option>
+        <option value="'Noto Sans', system-ui, sans-serif">Noto Sans</option>
+      </select>
+      <output></output>
+    </div>
+    <div class="demo-playground__row">
+      <label>radius</label>
+      <input type="range" min="0" max="24" step="1" value="8" data-token="--ui-radius-base" data-suffix="px">
+      <output>8px</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>shadow strength</label>
+      <input type="range" min="0" max="40" step="1" value="20" data-token="--ui-shadow-strength" data-suffix="%">
+      <output>20%</output>
+    </div>
+    <div class="demo-playground__row">
+      <label>border width</label>
+      <input type="range" min="0" max="4" step="0.5" value="1" data-token="--ui-border-width-base" data-suffix="px">
+      <output>1px</output>
+    </div>
+    <div class="ui-row ui-row--xs">
+      <button class="ui-button ui-button--sm ui-button--secondary" data-reset>{{ t('reset', 'Reset') }}</button>
+      <button class="ui-button ui-button--sm" data-random>{{ t('random_theme', 'Random Theme') }}</button>
+    </div>
+  </div>
+  <div class="demo-playground__preview">
+    <div class="ui-row ui-row--xs">
+      <span class="demo-swatch-color demo-swatch-color--primary"></span>
+      <span class="demo-swatch-color demo-swatch-color--success"></span>
+      <span class="demo-swatch-color demo-swatch-color--warning"></span>
+      <span class="demo-swatch-color demo-swatch-color--danger"></span>
+      <span class="demo-swatch-color demo-swatch-color--neutral"></span>
+    </div>
+    <div class="ui-row ui-row--xs">
+      <button class="ui-button">{{ t('primary', 'Primary') }}</button>
+      <button class="ui-button ui-button--secondary">{{ t('secondary', 'Secondary') }}</button>
+      <button class="ui-button ui-button--danger">{{ t('danger', 'Danger') }}</button>
+    </div>
+    <div class="ui-row ui-row--xs">
+      <button class="ui-button ui-button--sm">{{ t('small', 'Small') }}</button>
+      <button class="ui-button ui-button--lg">{{ t('large', 'Large') }}</button>
+    </div>
+    <input class="ui-input" placeholder="{{ t('input_placeholder', 'Type here...') }}">
+    <select class="ui-select">
+      <option>{{ t('select_option', 'Select option') }}</option>
+    </select>
+    <div class="ui-card">
+      <h4 class="ui-heading">{{ t('card_title', 'Card Title') }}</h4>
+      <p>{{ t('card_body', 'Cards, badges, and tags all respond to the same core tokens.') }}</p>
+      <div class="ui-row ui-row--xs">
+        <span class="ui-badge ui-badge--primary">{{ t('primary', 'Primary') }}</span>
+        <span class="ui-badge ui-badge--success">{{ t('success', 'Success') }}</span>
+        <span class="ui-badge ui-badge--warning">{{ t('warning', 'Warning') }}</span>
+        <span class="ui-badge ui-badge--danger">{{ t('danger', 'Danger') }}</span>
+        <span class="ui-tag">{{ t('tag', 'Tag') }}</span>
+      </div>
+    </div>
+    <div class="ui-column ui-column--xs">
+      <div class="ui-alert ui-alert--info">{{ t('alert_info', 'Info alert') }}</div>
+      <div class="ui-alert ui-alert--success">{{ t('alert_success', 'Success alert') }}</div>
+      <div class="ui-alert ui-alert--warning">{{ t('alert_warning', 'Warning alert') }}</div>
+      <div class="ui-alert ui-alert--danger">{{ t('alert_danger', 'Danger alert') }}</div>
+    </div>
+  </div>
+</div>
+
 <!-- @brand_colors -->
 <!-- Override --ui-color-primary to change the entire color palette. All shades (light, dark, subtle, hover) derive automatically via color-mix(). -->
 <div class="demo-theme">

package/src/config/layers.scss

@@ -1 +1 @@
-@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
+@layer reset, tokens.core, tokens.scale, tokens.semantic, base, primitives, components.styles, components.tokens, utilities, themes;

package/src/config/tokens/_variables.scss

@@ -5,10 +5,15 @@
 // Import this file in components that need standalone fallbacks.
 // Section order mirrors config/tokens/index.scss import order.
 
+// ==========================================================================
+// 0. Scale — global density multiplier
+// ==========================================================================
+$scale: 1;
+
 // ==========================================================================
 // 1. Grid — all derived from $unit
 // ==========================================================================
-$unit: 0.5rem; // 8px (matches --ui-unit: 8px)
+$unit: 0.5rem; // 8px (matches --ui-unit at scale 1)
 $row: $unit * 2; // 16px
 $row-1: $row;
 $row-2: $row * 2; // 32px
@@ -101,7 +106,8 @@ $sizes: (
 $font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
 $font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
 
-// Font sizes (1.2 modular scale)
+// Font sizes (derived from base, 1.2 modular scale)
+$font-size-base: 1rem; // 16px — core knob
 $font-size-xs: 0.75rem; // 12px
 $font-size-sm: 0.875rem; // 14px
 $font-size-md: 1rem; // 16px (base)
@@ -153,19 +159,21 @@ $radius-lg: $radius-base * 2; // 16px
 $radius-full: 9999px;
 
 // ==========================================================================
-// 6. Borders — derived from $unit
+// 6. Borders — derived from $border-width-base
 // ==========================================================================
-$border-width-sm: $unit * 0.125; // 1px
-$border-width-md: $unit * 0.25; // 2px
-$border-width-lg: $unit * 0.5; // 4px
+$border-width-base: $unit * 0.125; // 1px — core knob
+$border-width-sm: $border-width-base; // 1px
+$border-width-md: $border-width-base * 2; // 2px
+$border-width-lg: $border-width-base * 4; // 4px
 $focus-ring-offset: -$border-width-md;
 
 // ==========================================================================
-// 7. Shadows — neutral-tinted
+// 7. Shadows — geometry from $unit, opacity from $shadow-strength
 // ==========================================================================
-$shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
-$shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
-$shadow-lg: 0 10px 15px hsl(220 10% 20% / 0.15);
+$shadow-strength: 20%; // core knob
+$shadow-sm: 0 ($unit * 0.125) ($unit * 0.25) hsl(220 10% 20% / 0.05);
+$shadow-md: 0 ($unit * 0.5) ($unit * 0.75) hsl(220 10% 20% / 0.1);
+$shadow-lg: 0 ($unit * 1.25) ($unit * 2) hsl(220 10% 20% / 0.15);
 
 // ==========================================================================
 // 8. Z-index scale

package/src/config/tokens/borders.scss

@@ -1,8 +1,8 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
-    // Border widths - derived from unit (8px)
-    --ui-border-width-sm: calc(var(--ui-unit) * 0.125); // 1px
-    --ui-border-width-md: calc(var(--ui-unit) * 0.25); // 2px
-    --ui-border-width-lg: calc(var(--ui-unit) * 0.5); // 4px
+    // Border widths - derived from --ui-border-width-base
+    --ui-border-width-sm: var(--ui-border-width-base);
+    --ui-border-width-md: calc(var(--ui-border-width-base) * 2);
+    --ui-border-width-lg: calc(var(--ui-border-width-base) * 4);
   }
 }

package/src/config/tokens/colors/index.scss

@@ -1,12 +1,5 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
-    // Base colors - override these to customize the design system
-    --ui-color-primary: oklch(55% 0.22 250);
-    --ui-color-success: oklch(60% 0.18 145);
-    --ui-color-warning: oklch(75% 0.18 70);
-    --ui-color-danger: oklch(60% 0.22 25);
-    --ui-color-neutral: oklch(50% 0.02 250);
-
     // Primary shades - auto-generated via color-mix
     --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
     --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);

package/src/config/tokens/core.scss

@@ -0,0 +1,33 @@
+// Core design knobs — change these values to retheme everything
+@layer tokens.core {
+  :root {
+    // Global density multiplier — scales unit + font-size-base together
+    --ui-scale: 1;
+
+    // Grid unit — all spacing, row heights, and radii derive from this
+    --ui-unit: calc(8px * var(--ui-scale));
+
+    // Base colors — shades auto-generated via color-mix in tokens.scale
+    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-success: oklch(60% 0.18 145);
+    --ui-color-warning: oklch(75% 0.18 70);
+    --ui-color-danger: oklch(60% 0.22 25);
+    --ui-color-neutral: oklch(50% 0.02 250);
+
+    // Font families — system stacks, override for brand fonts
+    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+    --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+
+    // Base font size — all font-size-* tokens derive from this via calc()
+    --ui-font-size-base: calc(1rem * var(--ui-scale));
+
+    // Base radius — sm/md/lg derive from this
+    --ui-radius-base: var(--ui-unit);
+
+    // Base border width — sm/md/lg derive from this
+    --ui-border-width-base: calc(var(--ui-unit) * 0.125);
+
+    // Shadow strength — controls opacity of all shadow levels
+    --ui-shadow-strength: 20%;
+  }
+}

package/src/config/tokens/grid/index.scss

@@ -1,6 +1,5 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
-    --ui-unit: 8px; // 8px
     --ui-row: calc(var(--ui-unit) * 2);
 
     --ui-row-1: var(--ui-row);

package/src/config/tokens/index.scss

@@ -1,4 +1,5 @@
-// Design tokens - colors, spacing, typography, grid, etc.
+// Design tokens - core knobs, derived scales, semantic mappings
+@use './core' as *;
 @use './colors/index' as *;
 @use './spacing/index' as *;
 @use './typography' as *;

package/src/config/tokens/input.scss

@@ -1,4 +1,4 @@
-@layer tokens {
+@layer tokens.semantic {
   :root {
     --ui-input-height: var(--ui-row-2);
     --ui-input-padding-x: var(--ui-space-2);

package/src/config/tokens/motion.scss

@@ -1,4 +1,4 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
     // Duration scale
     --ui-duration-instant: 50ms;

package/src/config/tokens/radius.scss

@@ -1,7 +1,5 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
-    // Override --ui-radius-base to control all border radii at once
-    --ui-radius-base: var(--ui-unit); // 8px — the single theme knob
     --ui-radius-sm: calc(var(--ui-radius-base) * 0.5); // 4px
     --ui-radius-md: var(--ui-radius-base); // 8px
     --ui-radius-lg: calc(var(--ui-radius-base) * 2); // 16px

package/src/config/tokens/semantic-colors.scss

@@ -1,4 +1,4 @@
-@layer tokens {
+@layer tokens.semantic {
   :root {
     color-scheme: light dark;
 
@@ -65,4 +65,13 @@
       --ui-color-border-strong: var(--ui-color-neutral-200);
     }
   }
+
+  // Density presets — scale all spacing and text proportionally
+  [data-density="compact"] {
+    --ui-scale: 0.875;
+  }
+
+  [data-density="comfortable"] {
+    --ui-scale: 1.125;
+  }
 }

package/src/config/tokens/shadows.scss

@@ -1,8 +1,20 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
-    // Shadows tinted by neutral color — changing --ui-color-neutral shifts shadow tone
-    --ui-shadow-sm: 0 1px 2px color-mix(in oklch, var(--ui-color-neutral) 20%, transparent);
-    --ui-shadow-md: 0 4px 6px color-mix(in oklch, var(--ui-color-neutral) 15%, transparent);
-    --ui-shadow-lg: 0 10px 15px color-mix(in oklch, var(--ui-color-neutral) 12%, transparent);
+    // Shadows — geometry from --ui-unit, opacity from --ui-shadow-strength
+    --ui-shadow-sm:
+      0
+      calc(var(--ui-unit) * 0.125)
+      calc(var(--ui-unit) * 0.25)
+      color-mix(in oklch, var(--ui-color-neutral) var(--ui-shadow-strength), transparent);
+    --ui-shadow-md:
+      0
+      calc(var(--ui-unit) * 0.5)
+      calc(var(--ui-unit) * 0.75)
+      color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.75), transparent);
+    --ui-shadow-lg:
+      0
+      calc(var(--ui-unit) * 1.25)
+      calc(var(--ui-unit) * 2)
+      color-mix(in oklch, var(--ui-color-neutral) calc(var(--ui-shadow-strength) * 0.6), transparent);
   }
 }

package/src/config/tokens/spacing/index.scss

@@ -1,4 +1,4 @@
-@layer tokens {
+@layer tokens.scale {
   :root {
     // Micro spacing
     --ui-space-px: calc(var(--ui-unit) * 0.125); // 1px