juxscript 1.0.114 → 1.0.116

package/create/style.css

@@ -1,1952 +1,57 @@
-/**
- * Default Preset - Grid Layout System
- * Comprehensive component styling
- */
-
-/* ============================================
-   CSS VARIABLES
-   ============================================ */
+/** Base */
 :root {
   /* Typography */
-  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-family-mono: 'SF Mono', Monaco, Menlo, 'Courier New', monospace;
-  
-  /* Spacing */
+  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --line-height-normal: 1.6;
+
+  /* Spacing Scale */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
-  --space-md: 0.75rem;
-  --space-lg: 1rem;
-  --space-xl: 1.5rem;
-  --space-2xl: 2rem;
-  --space-3xl: 3rem;
-  
-  /* Colors - Light Theme */
-  --color-text-primary: #111111;
-  --color-text-secondary: #65676b;
-  --color-text-tertiary: #8b8d94;
-  
-  --color-background: #ffffff;
-  --color-surface-base: #f7f7f7;
-  --color-surface-elevated: #ffffff;
-  --color-surface-hover: #f1f1f1;
-  --color-surface-active: #e8e8e8;
-  
-  --color-border: #e8e8e8;
-  --color-border-hover: #d1d1d1;
-  
-  --color-brand: #0ea5e9;
-  --color-brand-hover: #0284c7;
-  
-  /* Borders & Radius */
-  --border-width: 1px;
-  --radius-sm: 3px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-full: 9999px;
-  
-  /* Transitions */
-  --transition-base: 150ms ease;
-  --transition-fast: 100ms ease;
-}
-
-/* ============================================
-   GLOBAL RESET
-   ============================================ */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--font-family-base);
-  color: var(--color-text-primary);
-  background: var(--color-background);
-  -webkit-font-smoothing: antialiased;
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-/* ============================================
-   GRID LAYOUT
-   ============================================ */
-#app {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas:
-    "header header"
-    "sidebar main"
-    "footer footer";
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* ============================================
-   HEADER
-   ============================================ */
-#appheader {
-  grid-area: header;
-  background: var(--color-surface-elevated);
-  border-bottom: var(--border-width) solid var(--color-border);
-  display: flex;
-  align-items: center;
-  padding: 0 var(--space-2xl);
-  height: 48px;
-  z-index: 100;
-}
-
-#appheader-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: var(--space-xl);
-}
-
-#appheader-logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  font-weight: 600;
-  cursor: pointer;
-}
-
-#appheader-logo h1 {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin: 0;
-  line-height: 1;
-  letter-spacing: -0.02em;
-}
-
-#appheader-nav {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-#appheader-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-/* ============================================
-   SIDEBAR
-   ============================================ */
-#appaside {
-  grid-area: sidebar;
-  width: 240px;
-  background: var(--color-surface-base);
-  border-right: var(--border-width) solid var(--color-border);
-  overflow-y: auto;
-  padding: var(--space-lg);
-}
-
-/* ============================================
-   MAIN CONTENT
-   ============================================ */
-#appmain {
-  grid-area: main;
-  background: var(--color-background);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-#appmain-content {
-  max-width: 900px;
-  margin: 0 auto;
-  padding: var(--space-3xl) var(--space-2xl);
-}
-
-/* ============================================
-   FOOTER
-   ============================================ */
-#appfooter {
-  grid-area: footer;
-  background: var(--color-surface-elevated);
-  border-top: var(--border-width) solid var(--color-border);
-  padding: var(--space-md) var(--space-2xl);
-  font-size: 0.8125rem;
-  color: var(--color-text-tertiary);
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-}
-
-#appfooter-content {
-  display: flex;
-  align-items: center;
-  gap: var(--space-lg);
-}
-
-/* ============================================
-   TYPOGRAPHY
-   ============================================ */
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-h1 { font-size: 2rem; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.125rem; margin-bottom: var(--space-md); }
-h4 { font-size: 1rem; }
-h5 { font-size: 0.875rem; }
-h6 { font-size: 0.75rem; }
-
-p {
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-/* ============================================
-   HEADINGS
-   ============================================ */
-.jux-heading {
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--color-text-primary);
-  margin: 0 0 var(--space-md) 0;
-}
-
-.jux-heading-1 { font-size: 2rem; }
-.jux-heading-2 { font-size: 1.5rem; }
-.jux-heading-3 { font-size: 1.125rem; font-weight: 700; }
-.jux-heading-4 { font-size: 1rem; }
-.jux-heading-5 { font-size: 0.875rem; }
-.jux-heading-6 { font-size: 0.75rem; }
-
-/* ============================================
-   HERO COMPONENT
-   ============================================ */
-.jux-hero {
-  padding: var(--space-3xl) 0;
-  margin-bottom: var(--space-2xl);
-}
-
-.jux-hero-centered {
-  text-align: center;
-}
-
-.jux-hero-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.jux-hero-centered .jux-hero-content {
-  align-items: center;
-}
-
-.jux-hero-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.2;
-  margin: 0;
-  letter-spacing: -0.02em;
-  color: var(--color-text-primary);
-}
-
-.jux-hero-subtitle {
-  font-size: 1.25rem;
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.jux-hero-body {
-  font-size: 1rem;
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  max-width: 600px;
-}
-
-.jux-hero-cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-md) var(--space-2xl);
-  font-size: 1rem;
-  font-weight: 600;
-  color: white;
-  background: var(--color-brand);
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  transition: background-color var(--transition-base);
-}
-
-.jux-hero-cta:hover {
-  background: var(--color-brand-hover);
-}
-
-/* ============================================
-   ALERT COMPONENT
-   ============================================ */
-.jux-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--space-lg);
-  position: relative;
-  animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.jux-alert-info {
-  background: #dbeafe;
-  border-left: 4px solid #3b82f6;
-  color: #1e40af;
-}
-
-.jux-alert-success {
-  background: #d1fae5;
-  border-left: 4px solid #10b981;
-  color: #065f46;
-}
-
-.jux-alert-warning {
-  background: #fef3c7;
-  border-left: 4px solid #f59e0b;
-  color: #92400e;
-}
-
-.jux-alert-error {
-  background: #fee2e2;
-  border-left: 4px solid #ef4444;
-  color: #991b1b;
-}
-
-.jux-alert-content {
-  flex: 1;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.jux-alert-close {
-  flex-shrink: 0;
-  background: transparent;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-  opacity: 0.5;
-  transition: opacity var(--transition-base);
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-
-.jux-alert-close:hover {
-  opacity: 1;
-}
-
-/* ============================================
-   BADGE COMPONENT
-   ============================================ */
-.jux-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--space-xs) var(--space-md);
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-base);
-}
-
-.jux-badge-default {
-  color: #374151;
-  background-color: #e5e7eb;
-}
-
-.jux-badge-success {
-  color: #065f46;
-  background-color: #d1fae5;
-}
-
-.jux-badge-warning {
-  color: #92400e;
-  background-color: #fef3c7;
-}
-
-.jux-badge-error {
-  color: #991b1b;
-  background-color: #fee2e2;
-}
-
-.jux-badge-info {
-  color: #1e40af;
-  background-color: #dbeafe;
-}
-
-/* ============================================
-   BUTTON COMPONENT
-   ============================================ */
-.jux-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--space-xl);
-  height: 36px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  font-family: var(--font-family-base);
-  color: white;
-  background: var(--color-brand);
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background-color var(--transition-base), transform var(--transition-fast);
-  user-select: none;
-  white-space: nowrap;
-}
-
-.jux-button:hover {
-  background: var(--color-brand-hover);
-}
-
-.jux-button:active {
-  transform: scale(0.98);
-}
-
-.jux-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.jux-button-primary {
-  background: var(--color-brand);
-}
-
-.jux-button-primary:hover {
-  background: var(--color-brand-hover);
-}
-
-.jux-button-secondary {
-  background: var(--color-surface-hover);
-  color: var(--color-text-primary);
-  border: var(--border-width) solid var(--color-border);
-}
-
-.jux-button-secondary:hover {
-  background: var(--color-surface-active);
-}
-
-.jux-button-small {
-  height: 28px;
-  padding: 0 var(--space-md);
-  font-size: 0.8125rem;
-}
-
-.jux-button-medium {
-  height: 36px;
-}
-
-.jux-button-large {
-  height: 44px;
-  padding: 0 var(--space-2xl);
-  font-size: 1rem;
-}
-
-/* ============================================
-   CARD COMPONENT
-   ============================================ */
-.jux-card {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--space-lg);
-}
-
-.jux-card-default {
-  /* Base card styles */
-}
-
-.jux-card-header {
-  padding: var(--space-lg) var(--space-xl);
-  border-bottom: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-}
-
-.jux-card-title {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.jux-card-body {
-  padding: var(--space-xl);
-  color: var(--color-text-secondary);
-  line-height: 1.6;
-}
-
-.jux-card-footer {
-  padding: var(--space-lg) var(--space-xl);
-  border-top: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-  font-size: 0.875rem;
-  color: var(--color-text-tertiary);
-}
-
-/* ============================================
-   CHECKBOX COMPONENT
-   ============================================ */
-.jux-checkbox {
-  margin-bottom: var(--space-md);
-}
-
-.jux-checkbox-container {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-md);
-  cursor: pointer;
-  user-select: none;
-}
-
-.jux-checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.jux-checkbox-checkmark {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-base);
-  background: var(--color-surface-elevated);
-}
-
-.jux-checkbox-input:checked + .jux-checkbox-checkmark {
-  background: var(--color-brand);
-  border-color: var(--color-brand);
-}
-
-.jux-checkbox-checkmark svg {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: white;
-  stroke-width: 2;
-  opacity: 0;
-  transition: opacity var(--transition-base);
-}
-
-.jux-checkbox-input:checked + .jux-checkbox-checkmark svg {
-  opacity: 1;
-}
-
-.jux-checkbox-label-text {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-.jux-input-error {
-  color: #ef4444;
-  font-size: 0.75rem;
-  margin-top: var(--space-xs);
-}
-
-/* ============================================
-   CODE COMPONENT
-   ============================================ */
-.jux-code {
-  background: #1e1e1e;
-  border: var(--border-width) solid #2d2d2d;
-  border-radius: var(--radius-lg);
-  padding: var(--space-lg);
-  margin: var(--space-xl) 0;
-  overflow-x: auto;
-}
-
-.jux-code pre {
-  margin: 0;
-  font-family: var(--font-family-mono);
-  font-size: 0.8125rem;
-  line-height: 1.6;
-}
-
-.jux-code code {
-  color: #d4d4d4;
-  font-family: inherit;
-}
-
-/* ============================================
-   CONTAINER COMPONENT
-   ============================================ */
-.jux-container {
-  display: block;
-}
-
-/* ============================================
-   DATEPICKER COMPONENT
-   ============================================ */
-.jux-datepicker {
-  position: relative;
-}
-
-.jux-datepicker-container {
-  position: relative;
-}
-
-.jux-datepicker-input {
-  padding-left: var(--space-3xl);
-}
-
-/* ============================================
-   DIVIDER COMPONENT
-   ============================================ */
-.jux-divider {
-  border: none;
-  margin: var(--space-2xl) 0;
-}
-
-.jux-divider-default {
-  border-top: var(--border-width) solid var(--color-border);
-}
-
-/* ============================================
-   DROPDOWN COMPONENT
-   ============================================ */
-.jux-dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.jux-dropdown-trigger {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-lg);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: background-color var(--transition-base);
-}
-
-.jux-dropdown-trigger:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  margin-top: var(--space-xs);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  min-width: 200px;
-  z-index: 1000;
-  display: none;
-}
-
-.jux-dropdown-menu.show {
-  display: block;
-}
-
-.jux-dropdown-bottom-left {
-  left: 0;
-}
-
-.jux-dropdown-item {
-  width: 100%;
-  padding: var(--space-md) var(--space-lg);
-  background: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: background-color var(--transition-base);
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.jux-dropdown-item:hover {
-  background: var(--color-surface-hover);
-}
-
-/* ============================================
-   INPUT COMPONENT
-   ============================================ */
-.jux-input {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-input-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-sm);
-}
-
-.jux-input-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.jux-input-icon {
-  position: absolute;
-  left: var(--space-md);
-  color: var(--color-text-tertiary);
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-
-.jux-input-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.jux-input-element {
-  width: 100%;
-  padding: var(--space-md);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  transition: border-color var(--transition-base), box-shadow var(--transition-base);
-  font-family: var(--font-family-base);
-}
-
-.jux-input-element:focus {
-  outline: none;
-  border-color: var(--color-brand);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
-/* ============================================
-   FILE UPLOAD COMPONENT
-   ============================================ */
-.jux-fileupload {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-fileupload-input {
-  display: none;
-}
-
-.jux-fileupload-button-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-3xl);
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: border-color var(--transition-base), background-color var(--transition-base);
-}
-
-.jux-fileupload-button-container:hover {
-  border-color: var(--color-brand);
-  background: var(--color-surface-base);
-}
-
-.jux-fileupload-icon svg {
-  width: 48px;
-  height: 48px;
-  color: var(--color-text-tertiary);
-}
-
-.jux-fileupload-button {
-  padding: var(--space-sm) var(--space-xl);
-  background: var(--color-brand);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: background-color var(--transition-base);
-}
-
-.jux-fileupload-button:hover {
-  background: var(--color-brand-hover);
-}
-
-.jux-fileupload-list {
-  margin-top: var(--space-lg);
-}
-
-/* ============================================
-   KPI CARD COMPONENT
-   ============================================ */
-.jux-kpicard {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  margin-bottom: var(--space-lg);
-}
-
-.jux-kpicard-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.jux-kpicard-title {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-
-.jux-kpicard-value {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  line-height: 1;
-}
-
-.jux-kpicard-delta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #10b981;
-}
-
-.jux-kpicard-delta svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* ============================================
-   LIST COMPONENT
-   ============================================ */
-.jux-list-wrapper {
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--space-lg);
-}
-
-.jux-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.jux-list-unordered {
-  /* Base list styles */
-}
-
-.jux-list-item {
-  padding: var(--space-lg);
-  border-bottom: var(--border-width) solid var(--color-border);
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.jux-list-item:last-child {
-  border-bottom: none;
-}
-
-.jux-list-item-hoverable {
-  transition: background-color var(--transition-base);
-  cursor: pointer;
-}
-
-.jux-list-item-hoverable:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-list-item-content {
-  flex: 1;
-}
-
-.jux-list-item-text {
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.jux-list-item-title {
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-xs);
-}
-
-/* ============================================
-   LOADING COMPONENT
-   ============================================ */
-.jux-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space-xl);
-}
-
-.jux-loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--color-border);
-  border-top-color: var(--color-brand);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.jux-loading-lg .jux-loading-spinner {
-  width: 48px;
-  height: 48px;
-  border-width: 4px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ============================================
-   MENU COMPONENT
-   ============================================ */
-.jux-menu {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.jux-menu-vertical {
-  flex-direction: column;
-}
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
 
-.jux-menu-item {
-  /* Menu item wrapper */
-}
-
-.jux-menu-button {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  background: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-base);
-}
-
-.jux-menu-button:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-menu-label {
-  flex: 1;
-}
-
-/* ============================================
-   NAV COMPONENT
-   ============================================ */
-.jux-nav {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.jux-nav-default {
-  /* Base nav styles */
-}
-
-.jux-nav-items {
-  display: flex;
-  gap: var(--space-sm);
-  align-items: center;
-}
-
-.jux-nav-item-wrapper {
-  /* Nav item wrapper */
-}
-
-.jux-nav-link {
-  padding: var(--space-sm) var(--space-lg);
-  color: var(--color-text-primary);
-  text-decoration: none;
-  font-size: 0.875rem;
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-
-.jux-nav-link:hover {
-  background: var(--color-surface-hover);
-  color: var(--color-brand);
-}
-
-/* ============================================
-   PARAGRAPH COMPONENT
-   ============================================ */
-.jux-paragraph {
-  line-height: 1.6;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-lg);
-  font-size: 0.875rem;
-}
-
-/* ============================================
-   PROGRESS COMPONENT
-   ============================================ */
-.jux-progress {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-progress-track {
-  width: 100%;
-  height: 8px;
-  background: var(--color-surface-base);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-}
-
-.jux-progress-bar {
-  height: 100%;
-  background: var(--color-brand);
-  transition: width 0.3s ease;
-  border-radius: var(--radius-full);
-}
-
-.jux-progress-bar-success {
-  background: #10b981;
-}
-
-.jux-progress-bar-warning {
-  background: #f59e0b;
-}
-
-.jux-progress-bar-error {
-  background: #ef4444;
-}
-
-/* ============================================
-   RADIO COMPONENT
-   ============================================ */
-.jux-radio {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-radio-options {
-  display: flex;
-  gap: var(--space-lg);
-}
-
-.jux-radio-vertical {
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.jux-radio-option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  cursor: pointer;
-  user-select: none;
-}
-
-.jux-radio-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.jux-radio-mark {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-base);
-  background: var(--color-surface-elevated);
-}
-
-.jux-radio-input:checked + .jux-radio-mark {
-  border-color: var(--color-brand);
-}
-
-.jux-radio-mark::after {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--color-brand);
-  opacity: 0;
-  transform: scale(0);
-  transition: all var(--transition-base);
-}
-
-.jux-radio-input:checked + .jux-radio-mark::after {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.jux-radio-label-text {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* ============================================
-   SELECT COMPONENT
-   ============================================ */
-.jux-select {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-select-container {
-  position: relative;
-}
-
-.jux-select-element {
-  width: 100%;
-  padding: var(--space-md);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right var(--space-md) center;
-  background-size: 20px;
-  padding-right: var(--space-3xl);
-}
-
-.jux-select-element:focus {
-  outline: none;
-  border-color: var(--color-brand);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
-/* ============================================
-   SIDEBAR COMPONENT
-   ============================================ */
-.jux-sidebar {
-  position: relative;
-  background: var(--color-surface-base);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: var(--space-lg);
-  margin-bottom: var(--space-lg);
-}
-
-.jux-sidebar-left {
-  /* Left-aligned sidebar */
-}
-
-.jux-sidebar-toggle {
-  position: absolute;
-  top: var(--space-md);
-  right: var(--space-md);
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: var(--space-xs);
-  color: var(--color-text-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ============================================
-   SWITCH COMPONENT
-   ============================================ */
-.jux-switch {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-switch-container {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-md);
-  cursor: pointer;
-  user-select: none;
-}
-
-.jux-switch-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.jux-switch-slider {
-  width: 44px;
-  height: 24px;
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-  position: relative;
-  transition: background-color var(--transition-base);
-}
-
-.jux-switch-slider::before {
-  content: '';
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  left: 3px;
-  top: 3px;
-  background: white;
-  border-radius: 50%;
-  transition: transform var(--transition-base);
-}
-
-.jux-switch-input:checked + .jux-switch-slider {
-  background: var(--color-brand);
-}
-
-.jux-switch-input:checked + .jux-switch-slider::before {
-  transform: translateX(20px);
-}
-
-.jux-switch-label-text {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* ============================================
-   TABLE COMPONENT
-   ============================================ */
-.jux-table-wrapper {
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--space-lg);
-}
-
-.jux-table-filter {
-  width: 100%;
-  padding: var(--space-md) var(--space-lg);
-  font-size: 0.875rem;
-  border: none;
-  border-bottom: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-  color: var(--color-text-primary);
-}
-
-.jux-table-filter:focus {
-  outline: none;
-  background: var(--color-surface-elevated);
-}
-
-.jux-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.jux-table-bordered {
-  /* Bordered table variant */
-}
-
-.jux-table thead {
-  background: var(--color-surface-base);
-  border-bottom: var(--border-width) solid var(--color-border);
-}
-
-.jux-table th {
-  padding: var(--space-md) var(--space-lg);
-  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.jux-table td {
-  padding: var(--space-md) var(--space-lg);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  border-top: var(--border-width) solid var(--color-border);
-}
-
-.jux-table tbody tr:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-table-pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-md);
-  padding: var(--space-md) var(--space-lg);
-  border-top: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-}
-
-.jux-table-pagination button {
-  padding: var(--space-xs) var(--space-md);
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: background-color var(--transition-base);
-}
-
-.jux-table-pagination button:hover:not(:disabled) {
-  background: var(--color-surface-hover);
-}
-
-.jux-table-pagination button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.jux-table-pagination span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* ============================================
-   TABS COMPONENT
-   ============================================ */
-.jux-tabs {
-  margin-bottom: var(--space-lg);
-}
-
-.jux-tabs-default {
-  /* Base tabs styles */
-}
-
-.jux-tabs-list {
-  display: flex;
-  gap: var(--space-xs);
-  border-bottom: var(--border-width) solid var(--color-border);
-  margin-bottom: var(--space-lg);
-}
-
-.jux-tabs-button {
-  padding: var(--space-md) var(--space-xl);
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  transition: color var(--transition-base), border-color var(--transition-base);
-  position: relative;
-  bottom: -1px;
-}
-
-.jux-tabs-button:hover {
-  color: var(--color-text-primary);
-}
-
-.jux-tabs-button-active {
-  color: var(--color-brand);
-  border-bottom-color: var(--color-brand);
-}
-
-.jux-tabs-panels {
-  /* Tabs panels container */
-}
-
-.jux-tabs-panel {
-  display: none;
-  animation: fadeIn 0.2s ease-in;
-}
-
-.jux-tabs-panel-active {
-  display: block;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* ============================================
-   VIEW COMPONENT
-   ============================================ */
-.jux-view {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--space-lg);
-}
-
-.jux-view-header {
-  padding: var(--space-xl);
-  border-bottom: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-}
-
-.jux-view-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.jux-view-content {
-  padding: var(--space-xl);
-}
-
-/* ============================================
-   SCROLLBARS
-   ============================================ */
-#appmain::-webkit-scrollbar,
-#appaside::-webkit-scrollbar {
-  width: 6px;
-}
-
-#appmain::-webkit-scrollbar-track,
-#appaside::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-#appmain::-webkit-scrollbar-thumb,
-#appaside::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 3px;
-}
-
-#appmain::-webkit-scrollbar-thumb:hover,
-#appaside::-webkit-scrollbar-thumb:hover {
-  background: var(--color-border-hover);
-}
-
-/* ============================================
-   RESPONSIVE
-   ============================================ */
-@media (max-width: 768px) {
-  #app {
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main"
-      "footer";
-  }
-  
-  #appaside {
-    display: none;
-  }
-  
-  #appheader {
-    padding: 0 var(--space-lg);
-  }
-  
-  #appmain-content {
-    padding: var(--space-2xl) var(--space-lg);
-  }
-  
-  #appfooter {
-    padding: var(--space-md) var(--space-lg);
-  }
-  
-  .jux-hero-title {
-    font-size: 2rem;
-  }
-  
-  .jux-radio-options {
-    flex-direction: column;
-  }
-}
-
-/* ============================================
-   GRID COMPONENT
-   ============================================ */
-.jux-grid {
-  display: grid;
-  position: relative;
-}
-
-.jux-grid-cell {
-  position: relative;
-  overflow: auto;
-  min-width: 0;  /* Prevent grid blowout */
-  min-height: 0;
-}
-
-/* ============================================
-   GRID GRIDDER MODE (Blueprint Visualization)
-   ============================================ */
-.jux-grid-gridder {
-  /* Blueprint-style background */
-  background-color: #0a1929;
-  background-image: 
-    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
-  background-size: 20px 20px;
-  padding: 2px;
-  border: 2px solid #3b82f6;
-  box-shadow: 
-    0 0 0 1px rgba(59, 130, 246, 0.2),
-    inset 0 0 20px rgba(59, 130, 246, 0.1);
-}
-
-.jux-grid-gridder .jux-grid-cell {
-  /* Cell styling in gridder mode */
-  background: rgba(15, 23, 42, 0.8);
-  border: 1px solid rgba(59, 130, 246, 0.4);
-  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.05);
-  min-height: 80px;  /* Ensure cells are visible */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.jux-grid-gridder .jux-grid-cell:hover {
-  background: rgba(30, 41, 59, 0.9);
-  border-color: rgba(59, 130, 246, 0.8);
-  box-shadow: 
-    inset 0 0 15px rgba(59, 130, 246, 0.15),
-    0 0 10px rgba(59, 130, 246, 0.3);
-}
-
-/* Coordinate label (top-left corner) */
-.jux-grid-gridder .jux-grid-cell::before {
-  content: attr(data-row) ',' attr(data-col);
-  position: absolute;
-  top: 4px;
-  left: 4px;
-  font-size: 10px;
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  font-weight: 600;
-  color: rgba(59, 130, 246, 0.8);
-  background: rgba(15, 23, 42, 0.95);
-  padding: 2px 6px;
-  border-radius: 3px;
-  border: 1px solid rgba(59, 130, 246, 0.3);
-  letter-spacing: 0.5px;
-  z-index: 10;
-}
-
-/* ID label (bottom-right corner) */
-.jux-grid-gridder .jux-grid-cell::after {
-  content: '#' attr(id);
-  position: absolute;
-  bottom: 4px;
-  right: 4px;
-  font-size: 9px;
-  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
-  color: rgba(148, 163, 184, 0.6);
-  background: rgba(15, 23, 42, 0.8);
-  padding: 2px 5px;
-  border-radius: 2px;
-  border: 1px solid rgba(71, 85, 105, 0.3);
-  max-width: calc(100% - 12px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Grid lines (column separators) */
-.jux-grid-gridder .jux-grid-cell:not(:nth-child(1))::before {
-  box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
-}
-
-/* Remove default debug styles when gridder is active */
-.jux-grid-gridder.jux-grid-debug .jux-grid-cell {
-  /* Gridder overrides debug mode */
-  border-color: rgba(59, 130, 246, 0.4);
-  background: rgba(15, 23, 42, 0.8);
-}
-
-/* ============================================
-   GRID DEBUG MODE (Legacy - simpler version)
-   ============================================ */
-.jux-grid-debug .jux-grid-cell {
-  border: 1px dashed var(--color-border);
-  background: var(--color-surface-base);
-}
-
-.jux-grid-debug .jux-grid-cell::before {
-  content: attr(data-row) '-' attr(data-col);
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  font-size: 10px;
-  color: var(--color-text-tertiary);
-  opacity: 0.5;
-}
-
-/* ============================================
-   CALENDAR COMPONENT
-   ============================================ */
-.jux-calendar {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  margin-bottom: var(--space-lg);
-}
-
-.jux-calendar-header {
-  padding: var(--space-lg);
-  border-bottom: var(--border-width) solid var(--color-border);
-  background: var(--color-surface-base);
-}
-
-.jux-calendar-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-md);
-}
-
-.jux-calendar-nav-btn {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 1.25rem;
-  color: var(--color-text-primary);
-  transition: all var(--transition-base);
-}
-
-.jux-calendar-nav-btn:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-brand);
-}
-
-.jux-calendar-today-btn {
-  padding: var(--space-xs) var(--space-lg);
-  background: var(--color-brand);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: background-color var(--transition-base);
-}
-
-.jux-calendar-today-btn:hover {
-  background: var(--color-brand-hover);
-}
-
-.jux-calendar-title {
-  flex: 1;
-  text-align: center;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.jux-calendar-grid {
-  padding: var(--space-md);
-}
-
-.jux-calendar-days-header {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--space-xs);
-  margin-bottom: var(--space-md);
-}
-
-.jux-calendar-day-name {
-  text-align: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: var(--space-sm);
-}
-
-.jux-calendar-days-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--space-xs);
-}
-
-.jux-calendar-day-cell {
-  min-height: 100px;
-  padding: var(--space-sm);
-  background: var(--color-surface-base);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  display: flex;
-  flex-direction: column;
-}
-
-.jux-calendar-day-cell:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-brand);
-}
-
-.jux-calendar-day-cell.other-month {
-  opacity: 0.4;
-}
-
-.jux-calendar-day-cell.today {
-  border-color: var(--color-brand);
-  background: rgba(14, 165, 233, 0.05);
-}
-
-.jux-calendar-day-number {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-xs);
-}
-
-.jux-calendar-day-cell.today .jux-calendar-day-number {
-  color: var(--color-brand);
-}
-
-.jux-calendar-day-events {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  flex: 1;
-  overflow: hidden;
-}
-
-.jux-calendar-event {
-  padding: var(--space-xs) var(--space-sm);
-  background: var(--color-brand);
-  color: white;
-  font-size: 0.75rem;
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: opacity var(--transition-base);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.jux-calendar-event:hover {
-  opacity: 0.8;
-}
-
-/* Popover */
-.jux-calendar-popover {
-  background: var(--color-surface-elevated);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-lg);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  padding: var(--space-lg);
-  min-width: 320px;
-  max-width: 400px;
-  z-index: 1000;
-}
-
-.jux-calendar-event-form h4 {
-  margin: 0 0 var(--space-lg) 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.jux-calendar-event-form label {
-  display: block;
-  margin-bottom: var(--space-md);
-}
-
-.jux-calendar-event-form label span {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: var(--space-xs);
-}
-
-.jux-calendar-event-form input,
-.jux-calendar-event-form textarea {
-  width: 100%;
-  padding: var(--space-sm);
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-base);
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-family: var(--font-family-base);
-}
-
-.jux-calendar-event-form input:focus,
-.jux-calendar-event-form textarea:focus {
-  outline: none;
-  border-color: var(--color-brand);
-  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
-}
-
-.jux-calendar-form-actions {
-  display: flex;
-  gap: var(--space-sm);
-  margin-top: var(--space-lg);
-}
-
-.jux-calendar-btn-primary,
-.jux-calendar-btn-secondary,
-.jux-calendar-btn-danger {
-  padding: var(--space-sm) var(--space-lg);
-  border: none;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all var(--transition-base);
-}
-
-.jux-calendar-btn-primary {
-  background: var(--color-brand);
-  color: white;
-}
-
-.jux-calendar-btn-primary:hover {
-  background: var(--color-brand-hover);
-}
-
-.jux-calendar-btn-secondary {
-  background: var(--color-surface-base);
-  color: var(--color-text-primary);
-  border: var(--border-width) solid var(--color-border);
-}
-
-.jux-calendar-btn-secondary:hover {
-  background: var(--color-surface-hover);
-}
-
-.jux-calendar-btn-danger {
-  background: #ef4444;
-  color: white;
-}
-
-.jux-calendar-btn-danger:hover {
-  background: #dc2626;
-}
-
-/* ✅ ADD: Week view styles */
-.jux-calendar-week-view {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: var(--space-xs);
-  padding: var(--space-md);
-}
-
-.jux-calendar-week-day-col {
-  min-height: 400px;
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-}
-
-/* ✅ ADD: Day view styles */
-.jux-calendar-day-view {
-  padding: var(--space-md);
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.jux-calendar-hour-slot {
-  height: 60px;
-  border-bottom: var(--border-width) solid var(--color-border);
-  padding: var(--space-sm);
-  position: relative;
-}
-
-/* ✅ ADD: Year view styles */
-.jux-calendar-year-view {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-lg);
-  padding: var(--space-lg);
-}
-
-.jux-calendar-mini-month {
-  border: var(--border-width) solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-md);
-  min-height: 150px;
-}
-
-
-/* componentsv2/list*/
-.jux-list {
-    font-family: system-ui, -apple-system, sans-serif;
-    padding: 1rem;
-    border: 1px solid #eee;
-    border-radius: 4px;
-    transition: opacity 0.2s;
-}
-
-.jux-list[aria-disabled="true"] {
-    opacity: 0.5;
-    pointer-events: none;
-    background-color: #f9f9f9;
-}
-
-.jux-list[aria-busy="true"] {
-    cursor: wait;
-    opacity: 0.7;
-}
-
-/* Internal List Element */
-.jux-list-element {
-    margin: 0;
-    padding-left: 1.5rem;
-}
-
-.jux-list li {
-    padding: 0.25rem 0.5rem;
-    cursor: default;
-    border-radius: 2px;
-}
-
-.jux-list li:hover {
-    background-color: #f0f0f0;
-}
+  /* Layout */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --border-width: 1px;
 
-.jux-list li.jux-selected {
-    background-color: #e3f2fd;
-    color: #1565c0;
-    font-weight: 500;
+  /* Animation */
+  --transition-fast: 150ms ease;
+  --transition-normal: 300ms ease;
+
+  /* Color Palette - RxTrail Brand Colors */
+  --color-brand: #e57373;
+  --color-brand-hover: #ef5350;
+  --color-brand-subtle: rgba(229, 115, 115, 0.08);
+
+  --color-text-primary: #2c2f3e;
+  --color-text-secondary: #6b7280;
+  --color-text-inverse: #ffffff;
+
+  --color-background: #fafbfc;
+  --color-surface-base: #ffffff;
+  --color-surface-hover: #fef5f5;
+  --color-surface-active: #fce8e8;
+  
+  --color-border: #e5e7eb;
+  --color-border-hover: #d1d5db;
+
+  /* Accent colors for clinical data */
+  --color-success: #00a878;
+  --color-warning: #f39c12;
+  --color-danger: #e74c3c;
+}
+
+/* Dark Mode Overrides */
+[data-theme="dark"] {
+  --color-text-primary: #e8edf3;
+  --color-text-secondary: #9aa6b5;
+  --color-background: #0f1419;
+  --color-surface-base: #1a2332;
+  --color-surface-hover: #243447;
+  --color-border: #384456;
 }