@avento-space/ts-ui 1.2.3 → 1.2.5

package/dist/{chunk-2UKGVIH2.js → chunk-6Y6GA2QS.js}

@@ -2,42 +2,166 @@ import { effect } from './chunk-Q5RCPPCF.js';
 
 // src/core/tokens.ts
 var sheet = new CSSStyleSheet();
+var LIGHT = {
+  "u-color-primary": "#3b82f6",
+  "u-color-primary-hover": "#2563eb",
+  "u-color-primary-text": "#2563eb",
+  "u-color-danger": "#ef4444",
+  "u-color-danger-hover": "#dc2626",
+  "u-color-success": "#16a34a",
+  "u-color-warning": "#d97706",
+  "u-color-info": "#0284c7",
+  "u-color-text": "#111827",
+  "u-color-text-secondary": "#374151",
+  "u-color-text-muted": "#4b5563",
+  "u-color-text-disabled": "#6b7280",
+  "u-color-border": "#9ca3af",
+  "u-color-border-light": "#d1d5db",
+  "u-color-border-lighter": "#e5e7eb",
+  "u-color-bg": "#fff",
+  "u-color-bg-muted": "#f9fafb",
+  "u-color-bg-hover": "#f3f4f6",
+  "u-color-bg-hover-strong": "#e5e7eb",
+  "u-color-bg-selected": "#eff6ff",
+  "u-color-focus": "#3b82f6",
+  "u-color-overlay": "rgba(0,0,0,0.5)",
+  "u-color-white": "#fff",
+  "u-color-tooltip-bg": "#1f2937",
+  "u-color-success-bg": "#dcfce7",
+  "u-color-success-text": "#15803d",
+  "u-color-warning-bg": "#fef3c7",
+  "u-color-warning-text": "#b45309",
+  "u-color-danger-bg": "#fef2f2",
+  "u-color-danger-text": "#dc2626",
+  "u-color-info-bg": "#e0f2fe",
+  "u-color-info-text": "#0369a1",
+  // Shadows
+  "u-shadow-sm": "0 1px 3px rgba(0,0,0,.05)",
+  "u-shadow-md": "0 4px 16px rgba(0,0,0,.08)",
+  "u-shadow-lg": "0 8px 24px rgba(0,0,0,.12)",
+  "u-shadow-xl": "0 20px 60px rgba(0,0,0,.15)",
+  "u-shadow-focus": "0 0 0 2px rgba(59,130,246,.25)",
+  "u-shadow-tooltip": "0 4px 12px rgba(0,0,0,.25)",
+  "u-shadow-drawer": "0 0 40px rgba(0,0,0,.1)",
+  "u-shadow-thumb": "0 1px 2px rgba(0,0,0,.15)",
+  "u-shadow-combobox": "0 4px 20px rgba(0,0,0,.1)",
+  "u-shadow-calendar": "0 4px 20px rgba(0,0,0,.08)",
+  "u-shadow-command-palette": "0 20px 60px rgba(0,0,0,.2)"
+};
+var DARK = {
+  "u-color-primary": "#60a5fa",
+  "u-color-primary-hover": "#93c5fd",
+  "u-color-primary-text": "#93c5fd",
+  "u-color-danger": "#f87171",
+  "u-color-danger-hover": "#fca5a5",
+  "u-color-success": "#22c55e",
+  "u-color-warning": "#eab308",
+  "u-color-info": "#0ea5e9",
+  "u-color-text": "#f1f5f9",
+  "u-color-text-secondary": "#cbd5e1",
+  "u-color-text-muted": "#94a3b8",
+  "u-color-text-disabled": "#64748b",
+  "u-color-border": "#475569",
+  "u-color-border-light": "#334155",
+  "u-color-border-lighter": "#1e293b",
+  "u-color-bg": "#0f172a",
+  "u-color-bg-muted": "#1e293b",
+  "u-color-bg-hover": "#334155",
+  "u-color-bg-hover-strong": "#475569",
+  "u-color-bg-selected": "#1e3a5f",
+  "u-color-focus": "#60a5fa",
+  "u-color-overlay": "rgba(0,0,0,0.7)",
+  "u-color-white": "#fff",
+  "u-color-tooltip-bg": "#334155",
+  "u-color-success-bg": "#052e16",
+  "u-color-success-text": "#4ade80",
+  "u-color-warning-bg": "#422006",
+  "u-color-warning-text": "#fbbf24",
+  "u-color-danger-bg": "#450a0a",
+  "u-color-danger-text": "#f87171",
+  "u-color-info-bg": "#0c4a6e",
+  "u-color-info-text": "#38bdf8",
+  // Shadows (more visible on dark backgrounds)
+  "u-shadow-sm": "0 1px 3px rgba(0,0,0,.25)",
+  "u-shadow-md": "0 4px 16px rgba(0,0,0,.35)",
+  "u-shadow-lg": "0 8px 24px rgba(0,0,0,.45)",
+  "u-shadow-xl": "0 20px 60px rgba(0,0,0,.5)",
+  "u-shadow-focus": "0 0 0 2px rgba(96,165,250,.4)",
+  "u-shadow-tooltip": "0 4px 12px rgba(0,0,0,.5)",
+  "u-shadow-drawer": "0 0 40px rgba(0,0,0,.4)",
+  "u-shadow-thumb": "0 1px 2px rgba(0,0,0,.3)",
+  "u-shadow-combobox": "0 4px 20px rgba(0,0,0,.4)",
+  "u-shadow-calendar": "0 4px 20px rgba(0,0,0,.35)",
+  "u-shadow-command-palette": "0 20px 60px rgba(0,0,0,.55)"
+};
+function tokensToCSS(vals) {
+  return Object.entries(vals).map(([k, v]) => `  --${k}: ${v};`).join("\n");
+}
+function generateColorTokenCSS() {
+  return `:root {
+${tokensToCSS(LIGHT)}
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+${tokensToCSS(DARK)}
+  }
+}
+:root[data-theme="dark"] {
+${tokensToCSS(DARK)}
+}
+`;
+}
 sheet.replaceSync(`
 :host {
-  --u-color-primary: #3b82f6;
-  --u-color-primary-hover: #2563eb;
-  --u-color-primary-text: #2563eb;
-  --u-color-danger: #ef4444;
-  --u-color-danger-hover: #dc2626;
-  --u-color-success: #16a34a;
-  --u-color-warning: #d97706;
-  --u-color-info: #0284c7;
-  --u-color-text: #111827;
-  --u-color-text-secondary: #374151;
-  --u-color-text-muted: #4b5563;
-  --u-color-text-disabled: #6b7280;
-  --u-color-border: #9ca3af;
-  --u-color-border-light: #d1d5db;
-  --u-color-border-lighter: #e5e7eb;
-  --u-color-bg: #fff;
-  --u-color-bg-muted: #f9fafb;
-  --u-color-bg-hover: #f3f4f6;
-  --u-color-bg-selected: #eff6ff;
-  --u-color-focus: #3b82f6;
-  --u-color-overlay: rgba(0,0,0,0.5);
+  --u-radius-xs: 2px;
   --u-radius-sm: 4px;
   --u-radius-md: 6px;
   --u-radius-lg: 8px;
   --u-radius-xl: 10px;
   --u-radius-2xl: 12px;
+  --u-radius-full: 999px;
+  --u-radius-round: 50%;
+  --u-font-tiny: 0.8rem;
+  --u-font-2xs: 0.6875rem;
   --u-font-xs: 0.75rem;
   --u-font-sm: 0.875rem;
   --u-font-md: 1rem;
   --u-font-lg: 1.125rem;
-  --u-shadow-sm: 0 1px 3px rgba(0,0,0,.05);
-  --u-shadow-md: 0 4px 16px rgba(0,0,0,.08);
-  --u-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
-  --u-shadow-xl: 0 20px 60px rgba(0,0,0,.15);
+  --u-font-xl: 1.25rem;
+  --u-font-2xl: 1.5rem;
+  --u-font-3xl: 1.875rem;
+  --u-font-weight-normal: 400;
+  --u-font-weight-medium: 500;
+  --u-font-weight-semibold: 600;
+  --u-font-weight-bold: 700;
+  --u-line-height-none: 1;
+  --u-line-height-tight: 1.3;
+  --u-line-height-sm: 1.4;
+  --u-line-height-md: 1.5;
+  --u-line-height-lg: 1.6;
+  --u-letter-spacing-wide: 0.05em;
+  --u-spacing-05: 2px;
+  --u-spacing-1: 4px;
+  --u-spacing-2: 8px;
+  --u-spacing-3: 12px;
+  --u-spacing-4: 16px;
+  --u-spacing-5: 20px;
+  --u-spacing-6: 24px;
+  --u-spacing-8: 32px;
+  --u-opacity-disabled: 0.5;
+  --u-opacity-muted: 0.4;
+  --u-opacity-fade: 0.3;
+  --u-z-backdrop: 100;
+  --u-z-modal: 200;
+  --u-z-command-palette: 300;
+  --u-z-dropdown: 400;
+  --u-z-drag: 500;
+  --u-z-toast: 600;
+  --u-blur: 4px;
+  --u-transition-fast: 100ms;
+  --u-transition-base: 150ms;
+  --u-transition-slow: 200ms;
+  --u-transition-slower: 250ms;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -49,6 +173,43 @@ sheet.replaceSync(`
 }
 `);
 var globalStyles = sheet;
+function setTheme(theme) {
+  const root = document.documentElement;
+  if (theme === "system") {
+    root.removeAttribute("data-theme");
+  } else {
+    root.setAttribute("data-theme", theme);
+  }
+  try {
+    localStorage.setItem("u-theme", theme);
+  } catch {
+  }
+}
+function getTheme() {
+  const root = document.documentElement;
+  if (root.hasAttribute("data-theme")) {
+    return root.getAttribute("data-theme");
+  }
+  return "system";
+}
+function restoreTheme() {
+  let theme = null;
+  try {
+    theme = localStorage.getItem("u-theme");
+  } catch {
+  }
+  if (theme) setTheme(theme);
+}
+var STYLE_ID = "u-color-tokens";
+function injectColorTokens() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = generateColorTokenCSS();
+  document.head.appendChild(style);
+}
+injectColorTokens();
 
 // src/core/element.ts
 var nextId = 0;
@@ -93,8 +254,8 @@ var buttonStyles = `
 }
 button {
   font-family: inherit;
-  font-size: 14px;
-  line-height: 1;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-none);
   border: 1px solid transparent;
   border-radius: var(--u-radius-md);
   cursor: pointer;
@@ -102,19 +263,19 @@ button {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  transition: background-color .15s, opacity .15s, box-shadow .15s;
+  transition: background-color var(--u-transition-base), opacity var(--u-transition-base), box-shadow var(--u-transition-base);
   outline: none;
 }
 button:focus-visible {
   box-shadow: 0 0 0 2px var(--u-color-focus);
 }
 button:disabled {
-  opacity: .5;
+  opacity: var(--u-opacity-disabled);
   cursor: not-allowed;
 }
 .btn-primary {
   background: var(--u-color-primary);
-  color: #fff;
+  color: var(--u-color-white);
   border-color: var(--u-color-primary-hover);
 }
 .btn-primary:hover:not(:disabled) {
@@ -126,7 +287,7 @@ button:disabled {
   border-color: var(--u-color-border);
 }
 .btn-secondary:hover:not(:disabled) {
-  background: #e5e7eb;
+  background: var(--u-color-bg-hover-strong);
 }
 .btn-ghost {
   background: transparent;
@@ -138,33 +299,33 @@ button:disabled {
 }
 .btn-danger {
   background: var(--u-color-danger);
-  color: #fff;
+  color: var(--u-color-white);
   border-color: var(--u-color-danger);
 }
 .btn-danger:hover:not(:disabled) {
   background: var(--u-color-danger-hover);
 }
-.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
-.btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
-.btn-lg { height: 48px; padding: 0 24px; font-size: 16px; }
+.btn-sm { height: var(--u-spacing-8); padding: 0 var(--u-spacing-3); font-size: 13px; }
+.btn-md { height: 40px; padding: 0 var(--u-spacing-4); font-size: var(--u-font-sm); }
+.btn-lg { height: 48px; padding: 0 var(--u-spacing-6); font-size: var(--u-font-md); }
 .btn-link {
   background: transparent;
-  color: #2563eb;
+  color: var(--u-color-primary-hover);
   border-color: transparent;
   padding: 0;
   height: auto;
   font-size: inherit;
   font-weight: inherit;
   text-decoration: none;
-  border-radius: 2px;
+  border-radius: var(--u-radius-xs);
 }
 .btn-link:hover:not(:disabled) {
   background: transparent;
   text-decoration: underline;
-  color: #2563eb;
+  color: var(--u-color-primary-hover);
 }
 .btn-link:disabled {
-  opacity: .5;
+  opacity: var(--u-opacity-disabled);
   cursor: not-allowed;
 }
 `;
@@ -181,9 +342,9 @@ var inputStyles = `
 }
 input {
   font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-md);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-md);
   outline: none;
@@ -191,12 +352,12 @@ input {
   box-sizing: border-box;
   background: var(--u-color-bg);
   color: var(--u-color-text);
-  transition: border-color .15s;
+  transition: border-color var(--u-transition-base);
 }
 input::placeholder { color: var(--u-color-text-muted); }
 input:focus {
-  border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+  border-color: var(--u-color-primary-hover);
+  box-shadow: var(--u-shadow-focus);
 }
 input:disabled {
   background: var(--u-color-bg-muted);
@@ -223,7 +384,7 @@ ul, ol {
   list-style: none;
 }
 .list-empty {
-  padding: 24px;
+  padding: var(--u-spacing-6);
   text-align: center;
   color: var(--u-color-text-muted);
 }
@@ -252,24 +413,24 @@ var textStyles = `
 [part="text"] {
   margin: 0;
   font-family: inherit;
-  line-height: 1.5;
-}
-.text-xs { font-size: 0.75rem; }
-.text-sm { font-size: 0.875rem; }
-.text-md { font-size: 1rem; }
-.text-lg { font-size: 1.125rem; }
-.text-xl { font-size: 1.25rem; }
-.text-2xl { font-size: 1.5rem; }
-.text-3xl { font-size: 1.875rem; }
-.text-normal { font-weight: 400; }
-.text-medium { font-weight: 500; }
-.text-semibold { font-weight: 600; }
-.text-bold { font-weight: 700; }
+  line-height: var(--u-line-height-md);
+}
+.text-xs { font-size: var(--u-font-xs); }
+.text-sm { font-size: var(--u-font-sm); }
+.text-md { font-size: var(--u-font-md); }
+.text-lg { font-size: var(--u-font-lg); }
+.text-xl { font-size: var(--u-font-xl); }
+.text-2xl { font-size: var(--u-font-2xl); }
+.text-3xl { font-size: var(--u-font-3xl); }
+.text-normal { font-weight: var(--u-font-weight-normal); }
+.text-medium { font-weight: var(--u-font-weight-medium); }
+.text-semibold { font-weight: var(--u-font-weight-semibold); }
+.text-bold { font-weight: var(--u-font-weight-bold); }
 .text-default { color: inherit; }
 .text-muted { color: var(--u-color-text-muted); }
-.text-accent { color: #2563eb; }
+.text-accent { color: var(--u-color-primary-hover); }
 .text-danger { color: var(--u-color-danger); }
-.text-success { color: #16a34a; }
+.text-success { color: var(--u-color-success); }
 .text-left { text-align: left; }
 .text-center { text-align: center; }
 .text-right { text-align: right; }
@@ -312,7 +473,7 @@ var overlayStyles = `
 :host {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: var(--u-z-backdrop);
 }
 [part="overlay"] {
   position: fixed;
@@ -323,7 +484,7 @@ var overlayStyles = `
   justify-content: center;
 }
 .overlay-blur {
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--u-blur));
 }
 [hidden] {
   display: none !important;
@@ -338,11 +499,11 @@ var fieldStyles = `
 [part="field"] {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--u-spacing-1);
 }
 .field-label {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: var(--u-font-sm);
+  font-weight: var(--u-font-weight-medium);
   color: var(--u-color-text-secondary);
 }
 .field-label-required::after {
@@ -354,11 +515,11 @@ var fieldStyles = `
   flex-direction: column;
 }
 .field-hint {
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
 }
 .field-error {
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-danger);
 }
 .hidden {
@@ -375,7 +536,7 @@ var checkboxStyles = `
 [part="checkbox"] {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   cursor: pointer;
 }
 :host(:focus-visible) .checkbox-indicator { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
@@ -394,28 +555,28 @@ input {
   height: 18px;
   border: 2px solid var(--u-color-border);
   border-radius: var(--u-radius-sm);
-  transition: all .15s;
+  transition: all var(--u-transition-base);
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .checkbox-indicator.checked {
   background: var(--u-color-primary);
   border-color: var(--u-color-primary-hover);
-  color: #fff;
+  color: var(--u-color-white);
 }
 .checkbox-indicator svg {
   opacity: 0;
-  transition: opacity .15s;
+  transition: opacity var(--u-transition-base);
 }
 .checkbox-indicator.checked svg {
   opacity: 1;
 }
 .checkbox-label {
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-secondary);
 }
 :host([disabled]) [part="checkbox"] {
-  opacity: 0.5;
+  opacity: var(--u-opacity-disabled);
   cursor: not-allowed;
 }
 `;
@@ -433,9 +594,9 @@ var selectStyles = `
 }
 .select {
   font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 8px 32px 8px 12px;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-md);
+  padding: var(--u-spacing-2) var(--u-spacing-8) var(--u-spacing-2) var(--u-spacing-3);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-md);
   outline: none;
@@ -443,14 +604,14 @@ var selectStyles = `
   box-sizing: border-box;
   background: var(--u-color-bg);
   color: var(--u-color-text);
-  transition: border-color .15s;
+  transition: border-color var(--u-transition-base);
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
 }
 .select:focus {
-  border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+  border-color: var(--u-color-primary-hover);
+  box-shadow: var(--u-shadow-focus);
 }
 .select:disabled {
   background: var(--u-color-bg-muted);
@@ -459,7 +620,7 @@ var selectStyles = `
 }
 .select-arrow {
   position: absolute;
-  right: 8px;
+  right: var(--u-spacing-2);
   pointer-events: none;
   color: var(--u-color-text-muted);
   display: flex;
@@ -477,17 +638,17 @@ var linkStyles = `
   font-size: inherit;
   line-height: inherit;
   cursor: pointer;
-  transition: color .15s;
+  transition: color var(--u-transition-base);
   text-decoration: none;
-  border-radius: 2px;
+  border-radius: var(--u-radius-xs);
 }
 [part="link"]:focus-visible {
   outline: 2px solid var(--u-color-focus);
   outline-offset: 2px;
 }
-.link-default { color: #2563eb; }
-.link-default:hover { color: #2563eb; text-decoration: underline; }
-.link-accent { color: var(--u-color-text-secondary); font-weight: 500; }
+.link-default { color: var(--u-color-primary-hover); }
+.link-default:hover { color: var(--u-color-primary-hover); text-decoration: underline; }
+.link-accent { color: var(--u-color-text-secondary); font-weight: var(--u-font-weight-medium); }
 .link-accent:hover { color: var(--u-color-text); text-decoration: underline; }
 .link-muted { color: var(--u-color-text-muted); }
 .link-muted:hover { color: var(--u-color-text-secondary); text-decoration: underline; }
@@ -534,17 +695,17 @@ var tooltipStyles = `
 }
 [part="tooltip"] {
   position: fixed;
-  z-index: 99999;
-  background: #1f2937;
-  color: #fff;
-  font-size: 0.75rem;
+  z-index: var(--u-z-dropdown);
+  background: var(--u-color-tooltip-bg);
+  color: var(--u-color-white);
+  font-size: var(--u-font-xs);
   padding: 6px 10px;
   border-radius: var(--u-radius-md);
   pointer-events: none;
-  line-height: 1.4;
+  line-height: var(--u-line-height-sm);
   max-width: 200px;
-  box-shadow: 0 4px 12px rgba(0,0,0,.25);
-  animation: u-tooltip-in .12s ease;
+  box-shadow: var(--u-shadow-tooltip);
+  animation: u-tooltip-in 120ms ease;
 }
 @keyframes u-tooltip-in {
   from { opacity: 0; transform: translateY(3px); }
@@ -554,7 +715,7 @@ var tooltipStyles = `
   position: absolute;
   width: 6px;
   height: 6px;
-  background: #1f2937;
+  background: var(--u-color-tooltip-bg);
   transform: rotate(45deg);
 }
 .arrow-top { bottom: -3px; left: calc(50% - 3px); }
@@ -574,9 +735,9 @@ var textareaStyles = `
 }
 textarea {
   font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-md);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-md);
   outline: none;
@@ -584,14 +745,14 @@ textarea {
   box-sizing: border-box;
   background: var(--u-color-bg);
   color: var(--u-color-text);
-  transition: border-color .15s;
+  transition: border-color var(--u-transition-base);
   resize: vertical;
   min-height: 60px;
 }
 textarea::placeholder { color: var(--u-color-text-muted); }
 textarea:focus {
-  border-color: #2563eb;
-  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+  border-color: var(--u-color-primary-hover);
+  box-shadow: var(--u-shadow-focus);
 }
 textarea:disabled {
   background: var(--u-color-bg-muted);
@@ -611,9 +772,9 @@ var radioStyles = `
 [part="radio"] {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-secondary);
 }
 :host(:focus-visible) .radio-circle { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
@@ -631,18 +792,18 @@ input[type="radio"] {
   width: 18px;
   height: 18px;
   border: 2px solid var(--u-color-border);
-  border-radius: 50%;
-  transition: all .15s;
+  border-radius: var(--u-radius-round);
+  transition: all var(--u-transition-base);
   flex-shrink: 0;
   box-sizing: border-box;
 }
 .radio-circle.checked {
   border-color: var(--u-color-primary-hover);
   background: var(--u-color-primary);
-  box-shadow: inset 0 0 0 3px #fff;
+  box-shadow: inset 0 0 0 3px var(--u-color-white);
 }
 :host([disabled]) [part="radio"] {
-  opacity: 0.5;
+  opacity: var(--u-opacity-disabled);
   cursor: not-allowed;
 }
 `;
@@ -667,10 +828,10 @@ input {
 .switch-track {
   width: 40px;
   height: 22px;
-  background: #9ca3af;
+  background: var(--u-color-border);
   border-radius: 11px;
   position: relative;
-  transition: background .2s;
+  transition: background var(--u-transition-slow);
 }
 .switch-track.checked {
   background: var(--u-color-primary);
@@ -682,15 +843,15 @@ input {
   width: 18px;
   height: 18px;
   background: var(--u-color-bg);
-  border-radius: 50%;
-  transition: transform .2s;
-  box-shadow: 0 1px 2px rgba(0,0,0,.15);
+  border-radius: var(--u-radius-round);
+  transition: transform var(--u-transition-slow);
+  box-shadow: var(--u-shadow-thumb);
 }
 .switch-track.checked .switch-thumb {
   transform: translateX(18px);
 }
 :host([disabled]) [part="switch"] {
-  opacity: 0.5;
+  opacity: var(--u-opacity-disabled);
   cursor: not-allowed;
 }
 `;
@@ -701,8 +862,8 @@ var labelStyles = `
   display: inline;
 }
 [part="label"] {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: var(--u-font-sm);
+  font-weight: var(--u-font-weight-medium);
   color: var(--u-color-text-secondary);
   cursor: default;
 }
@@ -721,7 +882,7 @@ var treeStyles = `
   list-style: none;
   margin: 0;
   padding: 0;
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
 }
 .tree-node {
   list-style: none;
@@ -729,8 +890,8 @@ var treeStyles = `
 .tree-row {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
+  gap: var(--u-spacing-1);
+  padding: var(--u-spacing-1) var(--u-spacing-2);
   cursor: pointer;
   border-radius: var(--u-radius-sm);
 }
@@ -739,14 +900,14 @@ var treeStyles = `
   background: var(--u-color-bg-hover);
 }
 .tree-toggle {
-  width: 16px;
+  width: var(--u-spacing-4);
   flex-shrink: 0;
   text-align: center;
-  font-size: 12px;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
 }
 .tree-toggle-spacer {
-  width: 16px;
+  width: var(--u-spacing-4);
   flex-shrink: 0;
 }
 .tree-label {
@@ -771,13 +932,13 @@ var tableStyles = `
 .table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
 }
 .table th {
   text-align: left;
-  padding: 10px 12px;
+  padding: 10px var(--u-spacing-3);
   border-bottom: 2px solid var(--u-color-border-lighter);
-  font-weight: 600;
+  font-weight: var(--u-font-weight-semibold);
   color: var(--u-color-text-secondary);
   white-space: nowrap;
   background: var(--u-color-bg-muted);
@@ -791,7 +952,7 @@ var tableStyles = `
   background: var(--u-color-bg-hover);
 }
 .table td {
-  padding: 10px 12px;
+  padding: 10px var(--u-spacing-3);
   border-bottom: 1px solid var(--u-color-border-lighter);
   color: var(--u-color-text-muted);
 }
@@ -806,12 +967,12 @@ var breadcrumbStyles = `
   display: block;
 }
 [part="breadcrumb"] {
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
 }
 [part="list"] {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--u-spacing-1);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -819,24 +980,24 @@ var breadcrumbStyles = `
 .breadcrumb-item {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--u-spacing-1);
   color: var(--u-color-text-muted);
 }
 .breadcrumb-item a {
   color: var(--u-color-primary-text);
   text-decoration: none;
 }
-.breadcrumb-item a:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
+.breadcrumb-item a:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: var(--u-radius-xs); }
 .breadcrumb-item a:hover {
   text-decoration: underline;
 }
 .breadcrumb-item[aria-current="page"] {
   color: var(--u-color-text);
-  font-weight: 500;
+  font-weight: var(--u-font-weight-medium);
 }
 .breadcrumb-separator {
   color: var(--u-color-border-light);
-  margin: 0 2px;
+  margin: 0 var(--u-spacing-05);
 }
 `;
 
@@ -863,15 +1024,15 @@ var tabsStyles = `
   bottom: 0;
   height: 2px;
   background: var(--u-color-primary);
-  transition: left .2s ease, width .2s ease;
+  transition: left var(--u-transition-slow) ease, width var(--u-transition-slow) ease;
   border-radius: 1px;
 }
 .tablist-pills {
-  gap: 4px;
+  gap: var(--u-spacing-1);
   flex-wrap: wrap;
 }
 .tablist-buttons {
-  gap: 4px;
+  gap: var(--u-spacing-1);
   flex-wrap: wrap;
 }
 .tablist-full {
@@ -883,18 +1044,18 @@ var tabsStyles = `
 }
 .tab-trigger {
   font-family: inherit;
-  font-size: 0.875rem;
-  padding: 10px 16px;
+  font-size: var(--u-font-sm);
+  padding: 10px var(--u-spacing-4);
   border: none;
   background: none;
   cursor: pointer;
   color: var(--u-color-text-muted);
-  transition: all .15s;
+  transition: all var(--u-transition-base);
   outline: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   white-space: nowrap;
   user-select: none;
   position: relative;
@@ -905,29 +1066,29 @@ var tabsStyles = `
 }
 .tab-trigger.active {
   color: var(--u-color-primary-text);
-  font-weight: 500;
+  font-weight: var(--u-font-weight-medium);
 }
 .tab-trigger:focus-visible {
   box-shadow: inset 0 0 0 2px var(--u-color-focus);
 }
 .tab-trigger:disabled {
-  opacity: .4;
+  opacity: var(--u-opacity-muted);
   cursor: not-allowed;
 }
 .tab-trigger-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: var(--u-spacing-4);
+  height: var(--u-spacing-4);
   flex-shrink: 0;
 }
 .tab-trigger-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--u-spacing-4);
+  height: var(--u-spacing-4);
 }
 .tablist-pills .tab-trigger {
-  border-radius: 999px;
+  border-radius: var(--u-radius-full);
   padding: 6px 14px;
 }
 .tablist-pills .tab-trigger:hover:not(:disabled) {
@@ -946,15 +1107,15 @@ var tabsStyles = `
 }
 .tablist-buttons .tab-trigger.active {
   background: var(--u-color-primary);
-  color: #fff;
+  color: var(--u-color-white);
 }
 [part="tabpanels"] {
-  padding: 16px 0;
+  padding: var(--u-spacing-4) 0;
   outline: none;
 }
 .tab-panel {
   outline: none;
-  animation: u-tab-panel-in .15s ease;
+  animation: u-tab-panel-in var(--u-transition-base) ease;
 }
 @keyframes u-tab-panel-in {
   from { opacity: 0; }
@@ -1068,27 +1229,33 @@ var modalStyles = `
   position: fixed;
   inset: 0;
   background: var(--u-color-overlay);
-  z-index: 9998;
-  animation: u-modal-fade-in .15s ease;
+  z-index: var(--u-z-backdrop);
+  animation: u-modal-fade-in var(--u-transition-base) ease;
+}
+.modal-backdrop[hidden] {
+  display: none !important;
 }
 .modal {
   position: fixed;
   inset: 0;
-  z-index: 9999;
+  z-index: var(--u-z-modal);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
+  padding: var(--u-spacing-4);
+}
+.modal[hidden] {
+  display: none !important;
 }
 .modal-wrapper {
   background: var(--u-color-bg);
   border-radius: var(--u-radius-2xl);
-  box-shadow: 0 20px 60px rgba(0,0,0,.15);
+  box-shadow: var(--u-shadow-xl);
   display: flex;
   flex-direction: column;
   max-height: 85vh;
   width: 100%;
-  animation: u-modal-scale-in .2s ease;
+  animation: u-modal-scale-in var(--u-transition-slow) ease;
 }
 .modal-sm { max-width: 400px; }
 .modal-md { max-width: 500px; }
@@ -1099,13 +1266,13 @@ var modalStyles = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
+  padding: var(--u-spacing-4) var(--u-spacing-5);
   border-bottom: 1px solid var(--u-color-border-lighter);
-  gap: 12px;
+  gap: var(--u-spacing-3);
 }
 .modal-title {
-  font-weight: 600;
-  font-size: 1.125rem;
+  font-weight: var(--u-font-weight-semibold);
+  font-size: var(--u-font-lg);
   color: var(--u-color-text);
   flex: 1;
   min-width: 0;
@@ -1118,14 +1285,14 @@ var modalStyles = `
   border: none;
   cursor: pointer;
   color: var(--u-color-text-muted);
-  padding: 4px;
-  line-height: 1;
+  padding: var(--u-spacing-1);
+  line-height: var(--u-line-height-none);
   border-radius: var(--u-radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  transition: color .15s, background .15s;
+  transition: color var(--u-transition-base), background var(--u-transition-base);
 }
 .modal-close:hover { color: var(--u-color-text-secondary); background: var(--u-color-bg-hover); }
 .modal-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
@@ -1134,19 +1301,19 @@ var modalStyles = `
   height: 18px;
 }
 .modal-content {
-  padding: 20px;
+  padding: var(--u-spacing-5);
   overflow-y: auto;
   flex: 1;
   color: var(--u-color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-lg);
 }
 .modal-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 20px;
+  gap: var(--u-spacing-2);
+  padding: var(--u-spacing-3) var(--u-spacing-5);
   border-top: 1px solid var(--u-color-border-lighter);
 }
 .modal-mobile.modal-wrapper {
@@ -1164,11 +1331,11 @@ var drawerStyles = `
   position: fixed;
   inset: 0;
   background: var(--u-color-overlay);
-  z-index: 9998;
+  z-index: var(--u-z-backdrop);
 }
 .drawer {
   position: fixed;
-  z-index: 9999;
+  z-index: var(--u-z-modal);
 }
 .drawer-right { top: 0; right: 0; height: 100%; }
 .drawer-left { top: 0; left: 0; height: 100%; }
@@ -1178,35 +1345,35 @@ var drawerStyles = `
   background: var(--u-color-bg);
   display: flex;
   flex-direction: column;
-  box-shadow: 0 0 40px rgba(0,0,0,.1);
+  box-shadow: var(--u-shadow-drawer);
 }
-.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) 0 0 var(--u-radius-2xl); }
-.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform .25s ease; border-radius: 0 var(--u-radius-2xl) var(--u-radius-2xl) 0; }
-.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform .25s ease; border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl); }
-.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform .25s ease; border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0; }
+.drawer-right .drawer-content { height: 100%; transform: translateX(100%); transition: transform var(--u-transition-slower) ease; border-radius: var(--u-radius-2xl) 0 0 var(--u-radius-2xl); }
+.drawer-left .drawer-content { height: 100%; transform: translateX(-100%); transition: transform var(--u-transition-slower) ease; border-radius: 0 var(--u-radius-2xl) var(--u-radius-2xl) 0; }
+.drawer-top .drawer-content { width: 100%; transform: translateY(-100%); transition: transform var(--u-transition-slower) ease; border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl); }
+.drawer-bottom .drawer-content { width: 100%; transform: translateY(100%); transition: transform var(--u-transition-slower) ease; border-radius: var(--u-radius-2xl) var(--u-radius-2xl) 0 0; }
 .drawer-open .drawer-content { transform: translate(0,0); }
 .drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 20px;
+  padding: var(--u-spacing-4) var(--u-spacing-5);
   border-bottom: 1px solid var(--u-color-border-lighter);
-  font-weight: 600;
-  font-size: 1.125rem;
+  font-weight: var(--u-font-weight-semibold);
+  font-size: var(--u-font-lg);
 }
 .drawer-close {
   background: none;
   border: none;
-  font-size: 1.5rem;
+  font-size: var(--u-font-2xl);
   cursor: pointer;
   color: var(--u-color-text-muted);
   padding: 0;
-  line-height: 1;
+  line-height: var(--u-line-height-none);
 }
 .drawer-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 .drawer-close:hover { color: var(--u-color-text-secondary); }
-.drawer-body { padding: 20px; overflow-y: auto; flex: 1; color: var(--u-color-text-muted); font-size: 0.875rem; }
-.drawer-footer { padding: 12px 20px; border-top: 1px solid var(--u-color-border-lighter); display: flex; gap: 8px; justify-content: flex-end; }
+.drawer-body { padding: var(--u-spacing-5); overflow-y: auto; flex: 1; color: var(--u-color-text-muted); font-size: var(--u-font-sm); }
+.drawer-footer { padding: var(--u-spacing-3) var(--u-spacing-5); border-top: 1px solid var(--u-color-border-lighter); display: flex; gap: var(--u-spacing-2); justify-content: flex-end; }
 `;
 
 // src/components/styles/popover.ts
@@ -1220,18 +1387,18 @@ var popoverStyles = `
 }
 .popover {
   position: fixed;
-  z-index: 99999;
+  z-index: var(--u-z-dropdown);
   filter: drop-shadow(0 8px 24px rgba(0,0,0,.14));
 }
 .popover-content {
   background: var(--u-color-bg);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-xl);
-  padding: 8px;
-  font-size: 0.875rem;
+  padding: var(--u-spacing-2);
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-secondary);
   min-width: 160px;
-  animation: u-popover-in .15s ease;
+  animation: u-popover-in var(--u-transition-base) ease;
 }
 @keyframes u-popover-in {
   from { opacity: 0; transform: scale(.95); }
@@ -1263,15 +1430,15 @@ var dropdownStyles = `
 }
 .dropdown-menu {
   position: fixed;
-  z-index: 99999;
+  z-index: var(--u-z-dropdown);
   background: var(--u-color-bg);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-xl);
-  box-shadow: 0 8px 24px rgba(0,0,0,.14);
-  padding: 4px;
+  box-shadow: var(--u-shadow-lg);
+  padding: var(--u-spacing-1);
   min-width: 180px;
   outline: none;
-  animation: u-dropdown-in .12s ease;
+  animation: u-dropdown-in 120ms ease;
 }
 @keyframes u-dropdown-in {
   from { opacity: 0; transform: scale(.95); }
@@ -1283,29 +1450,29 @@ var dropdownStyles = `
 }
 .dropdown-item {
   font-family: inherit;
-  font-size: 0.875rem;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: none;
   background: none;
   cursor: pointer;
   color: var(--u-color-text-secondary);
   text-align: left;
   border-radius: var(--u-radius-md);
-  transition: background .1s;
+  transition: background var(--u-transition-fast);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   width: 100%;
   box-sizing: border-box;
 }
 .dropdown-item:hover { background: var(--u-color-bg-hover); }
 .dropdown-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
-.dropdown-item.selected { color: var(--u-color-primary-hover); font-weight: 500; background: var(--u-color-bg-selected); }
-.dropdown-item:disabled { opacity: 0.4; cursor: not-allowed; }
+.dropdown-item.selected { color: var(--u-color-primary-hover); font-weight: var(--u-font-weight-medium); background: var(--u-color-bg-selected); }
+.dropdown-item:disabled { opacity: var(--u-opacity-muted); cursor: not-allowed; }
 .dropdown-item-active { background: var(--u-color-bg-selected); color: var(--u-color-primary-hover); }
 .dropdown-item-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--u-spacing-4);
+  height: var(--u-spacing-4);
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -1313,8 +1480,8 @@ var dropdownStyles = `
   color: var(--u-color-text-muted);
 }
 .dropdown-item-icon svg {
-  width: 16px;
-  height: 16px;
+  width: var(--u-spacing-4);
+  height: var(--u-spacing-4);
 }
 .dropdown-item-text {
   flex: 1;
@@ -1322,17 +1489,17 @@ var dropdownStyles = `
 }
 .dropdown-item-label {
   display: block;
-  line-height: 1.4;
+  line-height: var(--u-line-height-sm);
 }
 .dropdown-item-desc {
   display: block;
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
-  line-height: 1.3;
+  line-height: var(--u-line-height-tight);
   margin-top: 1px;
 }
 .dropdown-item-shortcut {
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
   padding: 2px 6px;
   background: var(--u-color-bg-hover);
@@ -1341,14 +1508,14 @@ var dropdownStyles = `
   flex-shrink: 0;
 }
 .dropdown-group-label {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: var(--u-font-xs);
+  font-weight: var(--u-font-weight-semibold);
   color: var(--u-color-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 8px 12px 4px;
+  letter-spacing: var(--u-letter-spacing-wide);
+  padding: var(--u-spacing-2) var(--u-spacing-3) var(--u-spacing-1);
 }
-.dropdown-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
+.dropdown-divider { height: 1px; background: var(--u-color-bg-hover); margin: var(--u-spacing-1) 0; }
 `;
 
 // src/components/styles/accordion.ts
@@ -1369,29 +1536,29 @@ var accordionStyles = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--u-spacing-3) var(--u-spacing-4);
   cursor: pointer;
-  font-weight: 500;
-  font-size: 0.875rem;
+  font-weight: var(--u-font-weight-medium);
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-secondary);
-  transition: background .15s;
+  transition: background var(--u-transition-base);
   user-select: none;
 }
 .accordion-header:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
 .accordion-header:hover { background: var(--u-color-bg-muted); }
 .accordion-icon {
-  transition: transform .2s;
-  font-size: 12px;
+  transition: transform var(--u-transition-slow);
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
 }
 .accordion-item[open] .accordion-icon { transform: rotate(180deg); }
 .accordion-content {
   overflow: hidden;
-  transition: height .25s ease;
+  transition: height var(--u-transition-slower) ease;
 }
 .accordion-body {
-  padding: 0 16px 12px;
-  font-size: 0.875rem;
+  padding: 0 var(--u-spacing-4) var(--u-spacing-3);
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-muted);
 }
 `;
@@ -1402,36 +1569,36 @@ var calendarStyles = `
   display: inline-block;
 }
 .calendar {
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
   width: 280px;
   background: var(--u-color-bg);
   border-radius: var(--u-radius-lg);
-  box-shadow: 0 4px 20px rgba(0,0,0,.08);
-  padding: 16px;
+  box-shadow: var(--u-shadow-calendar);
+  padding: var(--u-spacing-4);
 }
 .cal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: var(--u-spacing-3);
 }
 .cal-title {
-  font-weight: 600;
+  font-weight: var(--u-font-weight-semibold);
   color: var(--u-color-text);
 }
 .cal-nav-btn {
   background: none;
   border: 1px solid var(--u-color-border);
   border-radius: var(--u-radius-md);
-  width: 32px;
-  height: 32px;
+  width: var(--u-spacing-8);
+  height: var(--u-spacing-8);
   cursor: pointer;
   font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--u-color-text-muted);
-  transition: all .15s;
+  transition: all var(--u-transition-base);
 }
 .cal-nav-btn:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
 .cal-nav-btn:hover {
@@ -1442,13 +1609,13 @@ var calendarStyles = `
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
-  font-weight: 500;
-  margin-bottom: 8px;
+  font-weight: var(--u-font-weight-medium);
+  margin-bottom: var(--u-spacing-2);
 }
 .cal-day-name {
-  padding: 4px 0;
+  padding: var(--u-spacing-1) 0;
 }
 .cal-days-grid {
   display: grid;
@@ -1462,18 +1629,18 @@ var calendarStyles = `
   width: 100%;
   aspect-ratio: 1;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
   color: var(--u-color-text-secondary);
-  transition: all .1s;
+  transition: all var(--u-transition-fast);
   font-family: inherit;
 }
 .cal-day:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
 .cal-day:hover { background: var(--u-color-bg-hover); }
 .cal-day-empty { pointer-events: none; }
-.cal-today { font-weight: 600; color: var(--u-color-primary-text); }
-.cal-selected { background: var(--u-color-primary); color: #fff; font-weight: 600; }
+.cal-today { font-weight: var(--u-font-weight-semibold); color: var(--u-color-primary-text); }
+.cal-selected { background: var(--u-color-primary); color: var(--u-color-white); font-weight: var(--u-font-weight-semibold); }
 .cal-selected:hover { background: var(--u-color-primary-hover); }
-.cal-disabled { opacity: 0.3; pointer-events: none; }
+.cal-disabled { opacity: var(--u-opacity-fade); pointer-events: none; }
 `;
 
 // src/components/styles/data-table.ts
@@ -1482,7 +1649,7 @@ var dataTableStyles = `
   display: block;
 }
 .data-table {
-  font-size: 0.875rem;
+  font-size: var(--u-font-sm);
   border: 1px solid var(--u-color-border);
   border-radius: var(--u-radius-lg);
   overflow: hidden;
@@ -1491,14 +1658,14 @@ var dataTableStyles = `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: var(--u-spacing-3) var(--u-spacing-4);
   border-bottom: 1px solid var(--u-color-border);
   background: var(--u-color-bg-muted);
 }
 .dt-search-input {
   font-family: inherit;
-  font-size: 0.875rem;
-  padding: 6px 12px;
+  font-size: var(--u-font-sm);
+  padding: 6px var(--u-spacing-3);
   border: 1px solid var(--u-color-border);
   border-radius: var(--u-radius-md);
   outline: none;
@@ -1506,16 +1673,16 @@ var dataTableStyles = `
 }
 .dt-search-input:focus {
   border-color: var(--u-color-primary-text);
-  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+  box-shadow: var(--u-shadow-focus);
 }
-.dt-page-info { color: var(--u-color-text-muted); font-size: 0.8rem; }
+.dt-page-info { color: var(--u-color-text-muted); font-size: var(--u-font-xs); }
 .dt-table-wrapper { overflow-x: auto; }
 .dt-table { width: 100%; border-collapse: collapse; }
 .dt-table th {
   text-align: left;
-  padding: 10px 12px;
+  padding: 10px var(--u-spacing-3);
   border-bottom: 2px solid var(--u-color-border-lighter);
-  font-weight: 600;
+  font-weight: var(--u-font-weight-semibold);
   color: var(--u-color-text-secondary);
   white-space: nowrap;
   background: var(--u-color-bg-muted);
@@ -1523,23 +1690,23 @@ var dataTableStyles = `
 .dt-table th.dt-sortable { cursor: pointer; user-select: none; }
 .dt-table th.dt-sortable:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: -2px; }
 .dt-table th.dt-sortable:hover { background: var(--u-color-bg-hover); }
-.dt-table td { padding: 10px 12px; border-bottom: 1px solid var(--u-color-border-lighter); color: var(--u-color-text-muted); }
+.dt-table td { padding: 10px var(--u-spacing-3); border-bottom: 1px solid var(--u-color-border-lighter); color: var(--u-color-text-muted); }
 .dt-table tr:hover td { background: var(--u-color-bg-muted); }
 .dt-row-selected td { background: var(--u-color-bg-selected); }
 .dt-col-check { width: 40px; }
-.dt-empty { text-align: center; color: var(--u-color-text-muted); padding: 32px; }
+.dt-empty { text-align: center; color: var(--u-color-text-muted); padding: var(--u-spacing-8); }
 .dt-pagination {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
+  padding: var(--u-spacing-2) var(--u-spacing-4);
   border-top: 1px solid var(--u-color-border);
   background: var(--u-color-bg-muted);
 }
 .dt-page-btn {
   font-family: inherit;
-  font-size: 0.8rem;
-  padding: 6px 12px;
+  font-size: var(--u-font-xs);
+  padding: 6px var(--u-spacing-3);
   border: 1px solid var(--u-color-border);
   border-radius: var(--u-radius-md);
   background: var(--u-color-bg);
@@ -1548,12 +1715,12 @@ var dataTableStyles = `
 }
 .dt-page-btn:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 .dt-page-btn:hover { background: var(--u-color-bg-hover); }
-.dt-page-numbers { display: flex; gap: 4px; }
+.dt-page-numbers { display: flex; gap: var(--u-spacing-1); }
 .dt-page-num {
   font-family: inherit;
-  font-size: 0.8rem;
-  width: 32px;
-  height: 32px;
+  font-size: var(--u-font-xs);
+  width: var(--u-spacing-8);
+  height: var(--u-spacing-8);
   border: 1px solid transparent;
   border-radius: var(--u-radius-md);
   background: none;
@@ -1562,7 +1729,7 @@ var dataTableStyles = `
 }
 .dt-page-num:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; }
 .dt-page-num:hover { background: var(--u-color-bg-hover); }
-.dt-page-num.active { background: var(--u-color-primary); color: #fff; font-weight: 600; }
+.dt-page-num.active { background: var(--u-color-primary); color: var(--u-color-white); font-weight: var(--u-font-weight-semibold); }
 `;
 
 // src/components/styles/command-palette.ts
@@ -1574,42 +1741,42 @@ var commandPaletteStyles = `
   position: fixed;
   inset: 0;
   background: var(--u-color-overlay);
-  z-index: 99999;
+  z-index: var(--u-z-backdrop);
 }
 .cp-dialog {
   position: fixed;
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100000;
+  z-index: var(--u-z-command-palette);
   width: 540px;
   max-width: calc(100vw - 32px);
 }
 .cp-dialog-inner {
   background: var(--u-color-bg);
   border-radius: var(--u-radius-2xl);
-  box-shadow: 0 20px 60px rgba(0,0,0,.2);
+  box-shadow: var(--u-shadow-command-palette);
   overflow: hidden;
 }
 .cp-search-wrapper {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  padding: var(--u-spacing-3) var(--u-spacing-4);
   border-bottom: 1px solid var(--u-color-border-lighter);
-  gap: 8px;
+  gap: var(--u-spacing-2);
 }
-.cp-search-icon { font-size: 1rem; color: var(--u-color-text-muted); }
+.cp-search-icon { font-size: var(--u-font-md); color: var(--u-color-text-muted); }
 .cp-search-input {
   flex: 1;
   border: none;
   outline: none;
   font-family: inherit;
-  font-size: 1rem;
+  font-size: var(--u-font-md);
   color: var(--u-color-text);
   background: none;
 }
 .cp-shortcut-hint {
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   padding: 2px 6px;
   background: var(--u-color-bg-hover);
   border-radius: var(--u-radius-sm);
@@ -1619,22 +1786,22 @@ var commandPaletteStyles = `
 .cp-results {
   max-height: 320px;
   overflow-y: auto;
-  padding: 4px;
+  padding: var(--u-spacing-1);
 }
 .cp-group-label {
-  padding: 8px 12px 4px;
-  font-size: 0.75rem;
-  font-weight: 600;
+  padding: var(--u-spacing-2) var(--u-spacing-3) var(--u-spacing-1);
+  font-size: var(--u-font-xs);
+  font-weight: var(--u-font-weight-semibold);
   color: var(--u-color-text-muted);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: var(--u-letter-spacing-wide);
 }
 .cp-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   width: 100%;
-  padding: 10px 12px;
+  padding: 10px var(--u-spacing-3);
   border: none;
   background: none;
   cursor: pointer;
@@ -1646,23 +1813,23 @@ var commandPaletteStyles = `
 .cp-item:hover { background: var(--u-color-bg-hover); }
 .cp-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
 .cp-item-active { background: var(--u-color-bg-selected); }
-.cp-item-label { font-size: 0.875rem; color: var(--u-color-text); flex: 1; }
-.cp-item-desc { font-size: 0.75rem; color: var(--u-color-text-muted); flex: 1; }
+.cp-item-label { font-size: var(--u-font-sm); color: var(--u-color-text); flex: 1; }
+.cp-item-desc { font-size: var(--u-font-xs); color: var(--u-color-text-muted); flex: 1; }
 .cp-item-shortcut {
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   padding: 2px 6px;
   background: var(--u-color-bg-hover);
   border-radius: var(--u-radius-sm);
   color: var(--u-color-text-muted);
   font-family: inherit;
 }
-.cp-empty { padding: 24px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
+.cp-empty { padding: var(--u-spacing-6); text-align: center; color: var(--u-color-text-muted); font-size: var(--u-font-sm); }
 .cp-footer {
   display: flex;
-  gap: 16px;
-  padding: 8px 16px;
+  gap: var(--u-spacing-4);
+  padding: var(--u-spacing-2) var(--u-spacing-4);
   border-top: 1px solid var(--u-color-border-lighter);
-  font-size: 0.75rem;
+  font-size: var(--u-font-xs);
   color: var(--u-color-text-muted);
 }
 `;
@@ -1681,17 +1848,17 @@ var comboboxStyles = `
   align-items: center;
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-md);
-  transition: border-color .15s;
+  transition: border-color var(--u-transition-base);
   background: var(--u-color-bg);
 }
 .combobox-input-wrapper:focus-within {
   border-color: var(--u-color-primary-hover);
-  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
+  box-shadow: var(--u-shadow-focus);
 }
 .combobox-input {
   font-family: inherit;
-  font-size: 14px;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: none;
   outline: none;
   background: none;
@@ -1702,29 +1869,29 @@ var comboboxStyles = `
 .combobox-toggle {
   background: none;
   border: none;
-  padding: 0 8px;
+  padding: 0 var(--u-spacing-2);
   cursor: pointer;
   color: var(--u-color-text-muted);
-  font-size: 12px;
+  font-size: var(--u-font-xs);
   display: flex;
   align-items: center;
 }
 .combobox-listbox {
   position: fixed;
-  z-index: 99999;
+  z-index: var(--u-z-dropdown);
   background: var(--u-color-bg);
   border-radius: var(--u-radius-md);
-  box-shadow: 0 4px 20px rgba(0,0,0,.1);
+  box-shadow: var(--u-shadow-combobox);
   max-height: 240px;
   overflow-y: auto;
-  padding: 4px;
+  padding: var(--u-spacing-1);
 }
 .combobox-option {
   display: block;
   width: 100%;
   font-family: inherit;
-  font-size: 0.875rem;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: none;
   background: none;
   cursor: pointer;
@@ -1734,9 +1901,9 @@ var comboboxStyles = `
   box-sizing: border-box;
 }
 .combobox-option:hover { background: var(--u-color-bg-hover); }
-.combobox-option.active { color: var(--u-color-primary-hover); font-weight: 500; }
+.combobox-option.active { color: var(--u-color-primary-hover); font-weight: var(--u-font-weight-medium); }
 .combobox-option:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
-.combobox-empty { padding: 12px; text-align: center; color: var(--u-color-text-muted); font-size: 0.875rem; }
+.combobox-empty { padding: var(--u-spacing-3); text-align: center; color: var(--u-color-text-muted); font-size: var(--u-font-sm); }
 `;
 
 // src/components/styles/toast.ts
@@ -1744,17 +1911,17 @@ var toastStyles = `
 :host {
   display: block;
   position: fixed;
-  z-index: 100000;
+  z-index: var(--u-z-toast);
   pointer-events: none;
 }
 .toast-container {
   position: fixed;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 16px;
+  gap: var(--u-spacing-2);
+  padding: var(--u-spacing-4);
   pointer-events: none;
-  z-index: 100001;
+  z-index: var(--u-z-toast);
 }
 .toast-top-right { top: 0; right: 0; }
 .toast-top-left { top: 0; left: 0; }
@@ -1766,40 +1933,40 @@ var toastStyles = `
   pointer-events: auto;
   display: flex;
   align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px;
+  gap: var(--u-spacing-3);
+  padding: 14px var(--u-spacing-4);
   border-radius: var(--u-radius-lg);
-  box-shadow: 0 8px 24px rgba(0,0,0,.12);
-  font-size: 0.875rem;
+  box-shadow: var(--u-shadow-lg);
+  font-size: var(--u-font-sm);
   min-width: 280px;
   max-width: 400px;
-  animation: u-slide-in-right .2s ease;
+  animation: u-slide-in-right var(--u-transition-slow) ease;
   background: var(--u-color-bg);
   border: 1px solid var(--u-color-border);
 }
 .toast-exit {
-  animation: u-slide-out-right .2s ease forwards;
+  animation: u-slide-out-right var(--u-transition-slow) ease forwards;
 }
 .toast-info { border-left: 4px solid var(--u-color-primary); }
-.toast-success { border-left: 4px solid #16a34a; }
-.toast-warning { border-left: 4px solid #d97706; }
+.toast-success { border-left: 4px solid var(--u-color-success); }
+.toast-warning { border-left: 4px solid var(--u-color-warning); }
 .toast-error { border-left: 4px solid var(--u-color-danger); }
 .toast-body { flex: 1; }
-.toast-title { font-weight: 600; color: var(--u-color-text); }
-.toast-desc { color: var(--u-color-text-muted); margin-top: 4px; font-size: 0.8rem; }
+.toast-title { font-weight: var(--u-font-weight-semibold); color: var(--u-color-text); }
+.toast-desc { color: var(--u-color-text-muted); margin-top: var(--u-spacing-1); font-size: var(--u-font-tiny); }
 .toast-action {
   background: none;
   border: none;
   color: var(--u-color-primary-hover);
   cursor: pointer;
-  font-weight: 500;
+  font-weight: var(--u-font-weight-medium);
   font-family: inherit;
-  font-size: 0.8rem;
+  font-size: var(--u-font-tiny);
   white-space: nowrap;
   padding: 0;
-  margin-top: 4px;
+  margin-top: var(--u-spacing-1);
 }
-.toast-action:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
+.toast-action:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: var(--u-radius-xs); }
 .toast-action:hover { color: var(--u-color-primary-hover); }
 .toast-close {
   background: none;
@@ -1808,10 +1975,10 @@ var toastStyles = `
   color: var(--u-color-text-muted);
   font-size: 1.2rem;
   padding: 0;
-  line-height: 1;
+  line-height: var(--u-line-height-none);
   flex-shrink: 0;
 }
-.toast-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: 2px; }
+.toast-close:focus-visible { outline: 2px solid var(--u-color-focus); outline-offset: 2px; border-radius: var(--u-radius-xs); }
 .toast-close:hover { color: var(--u-color-text-secondary); }
 `;
 
@@ -1826,16 +1993,16 @@ var contextMenuStyles = `
 }
 .cm-menu {
   position: fixed;
-  z-index: 99999;
+  z-index: var(--u-z-dropdown);
   background: var(--u-color-bg);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-xl);
-  box-shadow: 0 8px 24px rgba(0,0,0,.14);
-  padding: 4px;
+  box-shadow: var(--u-shadow-lg);
+  padding: var(--u-spacing-1);
   min-width: 180px;
   max-height: 320px;
   overflow-y: auto;
-  animation: u-cm-in .12s ease;
+  animation: u-cm-in 120ms ease;
 }
 @keyframes u-cm-in {
   from { opacity: 0; transform: scale(.95); }
@@ -1847,27 +2014,27 @@ var contextMenuStyles = `
 }
 .cm-item {
   font-family: inherit;
-  font-size: 0.875rem;
-  padding: 8px 12px;
+  font-size: var(--u-font-sm);
+  padding: var(--u-spacing-2) var(--u-spacing-3);
   border: none;
   background: none;
   cursor: pointer;
   color: var(--u-color-text-secondary);
   text-align: left;
   border-radius: var(--u-radius-md);
-  transition: background .1s;
+  transition: background var(--u-transition-fast);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
   width: 100%;
   box-sizing: border-box;
 }
 .cm-item:hover { background: var(--u-color-bg-hover); }
 .cm-item:focus-visible { box-shadow: 0 0 0 2px var(--u-color-focus); }
-.cm-item:disabled { opacity: 0.4; cursor: not-allowed; }
-.cm-item-icon { width: 16px; text-align: center; font-size: 1rem; flex-shrink: 0; }
+.cm-item:disabled { opacity: var(--u-opacity-muted); cursor: not-allowed; }
+.cm-item-icon { width: var(--u-spacing-4); text-align: center; font-size: var(--u-font-md); flex-shrink: 0; }
 .cm-item-label { flex: 1; }
-.cm-divider { height: 1px; background: var(--u-color-bg-hover); margin: 4px 0; }
+.cm-divider { height: 1px; background: var(--u-color-bg-hover); margin: var(--u-spacing-1) 0; }
 `;
 
 // src/components/styles/sortable.ts
@@ -1878,11 +2045,11 @@ var sortableStyles = `
 .sortable {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--u-spacing-1);
 }
 .sortable-dragging {
   opacity: 0.9;
-  box-shadow: 0 8px 24px rgba(0,0,0,.15);
+  box-shadow: var(--u-shadow-lg);
   border-radius: var(--u-radius-md);
   cursor: grabbing;
 }
@@ -1890,9 +2057,9 @@ var sortableStyles = `
 .sortable-placeholder {
   border: 2px dashed var(--u-color-border-light);
   border-radius: var(--u-radius-md);
-  opacity: 0.5;
+  opacity: var(--u-opacity-disabled);
   box-sizing: border-box;
-  transition: height 0.15s ease, margin 0.15s ease;
+  transition: height var(--u-transition-base) ease, margin var(--u-transition-base) ease;
 }
 `;
 
@@ -1904,7 +2071,7 @@ var formStyles = `
 .form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--u-spacing-4);
 }
 `;
 
@@ -1919,35 +2086,35 @@ var badgeStyles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: 500;
-  line-height: 1;
+  font-weight: var(--u-font-weight-medium);
+  line-height: var(--u-line-height-none);
   white-space: nowrap;
   user-select: none;
-  transition: background .15s, color .15s;
+  transition: background var(--u-transition-base), color var(--u-transition-base);
 }
 .badge-pill {
-  border-radius: 999px;
+  border-radius: var(--u-radius-full);
 }
 .badge-square {
   border-radius: var(--u-radius-sm);
 }
 .badge-sm {
-  font-size: 0.6875rem;
+  font-size: var(--u-font-2xs);
   padding: 2px 6px;
-  min-height: 16px;
-  min-width: 16px;
+  min-height: var(--u-spacing-4);
+  min-width: var(--u-spacing-4);
 }
 .badge-md {
-  font-size: 0.75rem;
-  padding: 3px 8px;
-  min-height: 20px;
-  min-width: 20px;
+  font-size: var(--u-font-xs);
+  padding: 3px var(--u-spacing-2);
+  min-height: var(--u-spacing-5);
+  min-width: var(--u-spacing-5);
 }
 .badge-lg {
-  font-size: 0.8125rem;
-  padding: 4px 10px;
-  min-height: 24px;
-  min-width: 24px;
+  font-size: var(--u-font-xs);
+  padding: var(--u-spacing-1) 10px;
+  min-height: var(--u-spacing-6);
+  min-width: var(--u-spacing-6);
 }
 .badge-default {
   background: var(--u-color-bg-hover);
@@ -1955,31 +2122,31 @@ var badgeStyles = `
 }
 .badge-primary {
   background: var(--u-color-bg-selected);
-  color: #2563eb;
+  color: var(--u-color-primary-hover);
 }
 .badge-success {
-  background: #dcfce7;
-  color: #15803d;
+  background: var(--u-color-success-bg);
+  color: var(--u-color-success-text);
 }
 .badge-warning {
-  background: #fef3c7;
-  color: #b45309;
+  background: var(--u-color-warning-bg);
+  color: var(--u-color-warning-text);
 }
 .badge-danger {
-  background: #fef2f2;
-  color: #dc2626;
+  background: var(--u-color-danger-bg);
+  color: var(--u-color-danger-text);
 }
 .badge-info {
-  background: #e0f2fe;
-  color: #0369a1;
+  background: var(--u-color-info-bg);
+  color: var(--u-color-info-text);
 }
 .badge-dot {
-  width: 8px;
-  height: 8px;
+  width: var(--u-spacing-2);
+  height: var(--u-spacing-2);
   padding: 0;
-  border-radius: 50%;
-  min-width: 8px;
-  min-height: 8px;
+  border-radius: var(--u-radius-round);
+  min-width: var(--u-spacing-2);
+  min-height: var(--u-spacing-2);
 }
 .badge-dot.badge-sm {
   width: 6px;
@@ -2004,7 +2171,7 @@ var cardStyles = `
   display: flex;
   flex-direction: column;
   font-family: inherit;
-  transition: box-shadow .2s, border-color .2s, transform .2s;
+  transition: box-shadow var(--u-transition-slow), border-color var(--u-transition-slow), transform var(--u-transition-slow);
   position: relative;
   overflow: hidden;
 }
@@ -2012,7 +2179,7 @@ var cardStyles = `
   background: var(--u-color-bg);
   border: 1px solid var(--u-color-border-light);
   border-radius: var(--u-radius-2xl);
-  box-shadow: 0 1px 3px rgba(0,0,0,.05);
+  box-shadow: var(--u-shadow-sm);
 }
 .card-outlined {
   background: transparent;
@@ -2023,10 +2190,10 @@ var cardStyles = `
   background: var(--u-color-bg);
   border: 1px solid transparent;
   border-radius: var(--u-radius-2xl);
-  box-shadow: 0 4px 16px rgba(0,0,0,.08);
+  box-shadow: var(--u-shadow-md);
 }
 .card-hoverable:hover {
-  box-shadow: 0 8px 24px rgba(0,0,0,.12);
+  box-shadow: var(--u-shadow-lg);
   border-color: var(--u-color-border);
   transform: translateY(-2px);
 }
@@ -2052,36 +2219,36 @@ var cardStyles = `
   border-radius: 0 0 var(--u-radius-2xl) var(--u-radius-2xl);
 }
 [part="header"] {
-  padding: 16px 20px 0;
-  font-weight: 600;
-  font-size: 1rem;
+  padding: var(--u-spacing-4) var(--u-spacing-5) 0;
+  font-weight: var(--u-font-weight-semibold);
+  font-size: var(--u-font-md);
   color: var(--u-color-text);
 }
 [part="content"] {
-  padding: 16px 20px;
+  padding: var(--u-spacing-4) var(--u-spacing-5);
   flex: 1;
   min-width: 0;
   color: var(--u-color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.6;
+  font-size: var(--u-font-sm);
+  line-height: var(--u-line-height-lg);
 }
 [part="footer"] {
-  padding: 0 20px 16px;
+  padding: 0 var(--u-spacing-5) var(--u-spacing-4);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--u-spacing-2);
 }
 .card-padding-none [part="header"] { padding: 0; }
 .card-padding-none [part="content"] { padding: 0; }
 .card-padding-none [part="footer"] { padding: 0; }
-.card-padding-sm [part="header"] { padding: 12px 14px 0; }
-.card-padding-sm [part="content"] { padding: 12px 14px; }
-.card-padding-sm [part="footer"] { padding: 0 14px 12px; }
-.card-padding-lg [part="header"] { padding: 20px 24px 0; }
-.card-padding-lg [part="content"] { padding: 20px 24px; }
-.card-padding-lg [part="footer"] { padding: 0 24px 20px; }
+.card-padding-sm [part="header"] { padding: var(--u-spacing-3) 14px 0; }
+.card-padding-sm [part="content"] { padding: var(--u-spacing-3) 14px; }
+.card-padding-sm [part="footer"] { padding: 0 14px var(--u-spacing-3); }
+.card-padding-lg [part="header"] { padding: var(--u-spacing-5) var(--u-spacing-6) 0; }
+.card-padding-lg [part="content"] { padding: var(--u-spacing-5) var(--u-spacing-6); }
+.card-padding-lg [part="footer"] { padding: 0 var(--u-spacing-6) var(--u-spacing-5); }
 `;
 
-export { UElement, accordionStyles, animateKeyframes, badgeStyles, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, cardStyles, checkboxStyles, comboboxStyles, commandPaletteStyles, containerStyles, contextMenuStyles, dataTableStyles, dialogStyles, drawerStyles, dropdownStyles, fieldStyles, formStyles, gridStyles, iconStyles, inputStyles, labelStyles, linkStyles, listStyles, modalStyles, overlayStyles, popoverStyles, presenceStyles, radioStyles, selectStyles, sortableStyles, stackStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, toastStyles, tooltipStyles, treeStyles, visuallyHiddenStyles };
-//# sourceMappingURL=chunk-2UKGVIH2.js.map
-//# sourceMappingURL=chunk-2UKGVIH2.js.map
+export { UElement, accordionStyles, animateKeyframes, badgeStyles, boxStyles, breadcrumbStyles, buttonStyles, calendarStyles, cardStyles, checkboxStyles, comboboxStyles, commandPaletteStyles, containerStyles, contextMenuStyles, dataTableStyles, dialogStyles, drawerStyles, dropdownStyles, fieldStyles, formStyles, getTheme, gridStyles, iconStyles, inputStyles, labelStyles, linkStyles, listStyles, modalStyles, overlayStyles, popoverStyles, presenceStyles, radioStyles, restoreTheme, selectStyles, setTheme, sortableStyles, stackStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, toastStyles, tooltipStyles, treeStyles, visuallyHiddenStyles };
+//# sourceMappingURL=chunk-6Y6GA2QS.js.map
+//# sourceMappingURL=chunk-6Y6GA2QS.js.map