eidos-ui 4.0.0 → 4.1.0

package/dist/index.css

@@ -1,3 +1,130 @@
+:root[data-color-scheme=dark] {
+  --surface: #0f172a;
+  --surface-raised: #1e293b;
+  --text-default: #e2e8f0;
+  --text-default-rgb: 226, 232, 240;
+  --gray-50: #141d2f;
+  --gray-100: #1e293b;
+  --gray-200: #334155;
+  --gray-300: #475569;
+  --gray-400: #64748b;
+  --gray-500: #8391a7;
+  --gray-600: #a3b0c2;
+  --gray-700: #cbd5e1;
+  --gray-800: #e2e8f0;
+  --gray-900: #f8fafc;
+  --gray-rgb: 131, 145, 167;
+  --primary-color: #838dff;
+  --primary-rgb: 131, 141, 255;
+  --primary-dark: #9da8ff;
+  --primary-light: #2a1f8a;
+  --secondary-color: #8a9ab2;
+  --secondary-rgb: 138, 154, 178;
+  --secondary-dark: #9fb0c8;
+  --secondary-light: #29364a;
+  --success-color: #43a97e;
+  --success-rgb: 67, 169, 126;
+  --success-dark: #5bbf93;
+  --success-light: #003c27;
+  --danger-color: #ff6560;
+  --danger-rgb: 255, 101, 96;
+  --danger-dark: #ff9189;
+  --danger-light: #74000d;
+  --warning-color: #c78c3d;
+  --warning-rgb: 199, 140, 61;
+  --warning-dark: #dea254;
+  --warning-light: #4d2f00;
+  --info-color: #43a3ba;
+  --info-rgb: 67, 163, 186;
+  --info-dark: #5bb9d1;
+  --info-light: #003945;
+  --hyperlink-color: #45a6af;
+  --hyperlink-rgb: 69, 166, 175;
+  --hyperlink-dark: #5dbcc5;
+  --hyperlink-light: #003b40;
+  --primary-contrast: #0f172a;
+  --secondary-contrast: #0f172a;
+  --success-contrast: #0f172a;
+  --danger-contrast: #0f172a;
+  --warning-contrast: #0f172a;
+  --info-contrast: #0f172a;
+  --primary-50: #181a39;
+  --primary-100: #1e214a;
+  --primary-200: #2a2d67;
+  --primary-300: #3e4193;
+  --primary-400: #5d64cb;
+  --primary-500: #838dff;
+  --primary-600: #9ea9ff;
+  --primary-700: #b9c3ff;
+  --primary-800: #d1d8ff;
+  --primary-900: #e8ecff;
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-color-scheme=system] {
+    --surface: #0f172a;
+    --surface-raised: #1e293b;
+    --text-default: #e2e8f0;
+    --text-default-rgb: 226, 232, 240;
+    --gray-50: #141d2f;
+    --gray-100: #1e293b;
+    --gray-200: #334155;
+    --gray-300: #475569;
+    --gray-400: #64748b;
+    --gray-500: #8391a7;
+    --gray-600: #a3b0c2;
+    --gray-700: #cbd5e1;
+    --gray-800: #e2e8f0;
+    --gray-900: #f8fafc;
+    --gray-rgb: 131, 145, 167;
+    --primary-color: #838dff;
+    --primary-rgb: 131, 141, 255;
+    --primary-dark: #9da8ff;
+    --primary-light: #2a1f8a;
+    --secondary-color: #8a9ab2;
+    --secondary-rgb: 138, 154, 178;
+    --secondary-dark: #9fb0c8;
+    --secondary-light: #29364a;
+    --success-color: #43a97e;
+    --success-rgb: 67, 169, 126;
+    --success-dark: #5bbf93;
+    --success-light: #003c27;
+    --danger-color: #ff6560;
+    --danger-rgb: 255, 101, 96;
+    --danger-dark: #ff9189;
+    --danger-light: #74000d;
+    --warning-color: #c78c3d;
+    --warning-rgb: 199, 140, 61;
+    --warning-dark: #dea254;
+    --warning-light: #4d2f00;
+    --info-color: #43a3ba;
+    --info-rgb: 67, 163, 186;
+    --info-dark: #5bb9d1;
+    --info-light: #003945;
+    --hyperlink-color: #45a6af;
+    --hyperlink-rgb: 69, 166, 175;
+    --hyperlink-dark: #5dbcc5;
+    --hyperlink-light: #003b40;
+    --primary-contrast: #0f172a;
+    --secondary-contrast: #0f172a;
+    --success-contrast: #0f172a;
+    --danger-contrast: #0f172a;
+    --warning-contrast: #0f172a;
+    --info-contrast: #0f172a;
+    --primary-50: #181a39;
+    --primary-100: #1e214a;
+    --primary-200: #2a2d67;
+    --primary-300: #3e4193;
+    --primary-400: #5d64cb;
+    --primary-500: #838dff;
+    --primary-600: #9ea9ff;
+    --primary-700: #b9c3ff;
+    --primary-800: #d1d8ff;
+    --primary-900: #e8ecff;
+    color-scheme: dark;
+  }
+}
 :root {
   --primary-color: #5c5de8;
   --primary-rgb: 92, 93, 232;
@@ -62,8 +189,14 @@
   --gray-800: #1e293b;
   --gray-900: #0f172a;
   --gray-rgb: 100, 116, 139;
+  --text-default: var(--dark-color);
   --text-muted: var(--gray-600);
   --text-disabled: var(--gray-400);
+  --surface: var(--white);
+  --surface-raised: var(--white);
+  --text-default-rgb: var(--dark-rgb);
+  --code-text: #cbd5e1;
+  color-scheme: light;
   --font-family-primary:
     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
@@ -153,7 +286,8 @@ body {
   font-feature-settings: "cv02", "cv03", "cv04", "cv11";
   font-size: 14px;
   line-height: 1.4;
-  color: var(--dark-color);
+  color: var(--text-default);
+  background-color: var(--surface);
 }
 
 #root {
@@ -166,7 +300,7 @@ h1 {
   margin-bottom: var(--spacing-lg);
   letter-spacing: -0.025em;
   line-height: 1.2;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 h2 {
@@ -175,7 +309,7 @@ h2 {
   line-height: 1.3;
   margin-bottom: var(--spacing-md);
   letter-spacing: -0.025em;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 h3 {
@@ -184,7 +318,7 @@ h3 {
   line-height: 1.4;
   margin-bottom: var(--spacing-md);
   letter-spacing: -0.025em;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 h4 {
@@ -193,7 +327,7 @@ h4 {
   line-height: 1.4;
   margin-bottom: var(--spacing-sm);
   letter-spacing: -0.025em;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 h5 {
@@ -202,7 +336,7 @@ h5 {
   line-height: 1.45;
   margin-bottom: var(--spacing-sm);
   letter-spacing: -0.02em;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 h6 {
@@ -211,7 +345,7 @@ h6 {
   line-height: 1.5;
   margin-bottom: var(--spacing-sm);
   letter-spacing: -0.01em;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 small {
@@ -252,7 +386,7 @@ button {
 pre {
   font-family: var(--font-family-mono);
   background-color: var(--dark-color);
-  color: var(--gray-300);
+  color: var(--code-text);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   overflow-x: auto;
@@ -351,7 +485,7 @@ svg.lucide {
   cursor: pointer;
   background: transparent;
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
   text-align: left;
   transition: background 0.15s ease, color 0.15s ease;
 }
@@ -375,7 +509,7 @@ svg.lucide {
 }
 .eidos-accordion-trigger:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-accordion-trigger:disabled {
   cursor: not-allowed;
@@ -556,7 +690,7 @@ svg.lucide {
 }
 .eidos-alert-dismiss:hover {
   color: var(--gray-600);
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(var(--text-default-rgb), 0.05);
 }
 
 .eidos-avatar {
@@ -642,7 +776,7 @@ svg.lucide {
 }
 .eidos-avatar--clickable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-avatar-image {
@@ -674,14 +808,14 @@ svg.lucide {
   margin-left: 0;
 }
 .eidos-avatar-group-item .eidos-avatar:not(:focus-visible) {
-  box-shadow: 0 0 0 2px var(--white);
+  box-shadow: 0 0 0 2px var(--surface);
 }
 
 .eidos-avatar-group .eidos-avatar--overflow {
   margin-left: -8px;
 }
 .eidos-avatar-group .eidos-avatar--overflow:not(:focus-visible) {
-  box-shadow: 0 0 0 2px var(--white);
+  box-shadow: 0 0 0 2px var(--surface);
 }
 
 .eidos-badge-wrapper {
@@ -699,7 +833,7 @@ svg.lucide {
   box-sizing: content-box;
   padding: 0.35em 0.5em;
   border-radius: 9999px;
-  border: 2px solid var(--white);
+  border: 2px solid var(--surface);
   font-size: var(--font-size-xs);
   line-height: 1;
   white-space: nowrap;
@@ -953,7 +1087,7 @@ svg.lucide {
 }
 .eidos-breadcrumb-link:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-breadcrumb-link--button {
   background: none;
@@ -981,7 +1115,7 @@ svg.lucide {
 }
 .eidos-breadcrumb-link--button:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-breadcrumb-current {
@@ -990,7 +1124,7 @@ svg.lucide {
   gap: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-breadcrumb-separator {
@@ -1329,12 +1463,12 @@ svg.lucide {
 }
 
 .eidos-card {
-  background: var(--white);
+  background: var(--surface);
   border-radius: var(--border-radius-lg);
   box-sizing: border-box;
 }
 .eidos-card--outlined {
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--gray-200);
 }
 .eidos-card--elevated {
   border: none;
@@ -1363,7 +1497,7 @@ svg.lucide {
 }
 .eidos-card--clickable:hover {
   box-shadow: var(--box-shadow-md);
-  border-color: #cbd5e1;
+  border-color: var(--gray-300);
 }
 .eidos-card--clickable:active {
   box-shadow: var(--box-shadow-sm);
@@ -1429,7 +1563,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--primary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--indeterminate {
@@ -1439,7 +1573,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color);
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--indeterminate {
@@ -1449,7 +1583,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color);
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--indeterminate {
@@ -1459,7 +1593,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--indeterminate {
@@ -1469,7 +1603,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color);
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--indeterminate {
@@ -1479,7 +1613,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color);
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--indeterminate {
@@ -1510,7 +1644,7 @@ svg.lucide {
   flex-shrink: 0;
   border: 2px solid var(--gray-400);
   border-radius: var(--border-radius-xs);
-  background: var(--white);
+  background: var(--surface);
   will-change: transform;
   transition: all 0.2s ease;
   overflow: hidden;
@@ -1529,7 +1663,7 @@ svg.lucide {
 }
 
 .eidos-checkbox-label {
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1;
   user-select: none;
 }
@@ -1814,10 +1948,11 @@ svg.lucide {
   flex-shrink: 0;
 }
 .eidos-chip--remove-button:hover:not(:disabled) {
-  background-color: rgba(var(--dark-rgb), 0.12);
+  background-color: rgba(var(--text-default-rgb), 0.12);
 }
 .eidos-chip--filled .eidos-chip--remove-button:hover:not(:disabled) {
   background-color: rgba(var(--white-rgb), 0.25);
+  background-color: color-mix(in srgb, currentColor 25%, transparent);
 }
 .eidos-chip--remove-button:focus:not(:focus-visible) {
   outline: none;
@@ -1841,7 +1976,7 @@ svg.lucide {
 .eidos-color-picker-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-color-picker-trigger {
@@ -1857,7 +1992,7 @@ svg.lucide {
   padding: 6px var(--spacing-sm);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
-  background: var(--white);
+  background: var(--surface);
   cursor: pointer;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
@@ -1866,7 +2001,7 @@ svg.lucide {
 }
 .eidos-color-picker-trigger:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-color-picker--sm .eidos-color-picker-trigger {
   padding: 4px var(--spacing-xs);
@@ -1900,7 +2035,7 @@ svg.lucide {
 }
 
 .eidos-color-picker-panel {
-  background: var(--white);
+  background: var(--surface-raised);
   border-radius: var(--border-radius-lg);
   padding: var(--spacing-md);
   display: flex;
@@ -2110,13 +2245,13 @@ svg.lucide {
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
   background: var(--gray-50);
-  color: var(--dark-color);
+  color: var(--text-default);
   outline: none;
   transition: border-color 0.12s ease, box-shadow 0.12s ease;
 }
 .eidos-color-picker-input:focus {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-color-picker-input:disabled {
   cursor: not-allowed;
@@ -2165,11 +2300,11 @@ svg.lucide {
 
 .eidos-color-picker-hue:focus-visible::-webkit-slider-thumb,
 .eidos-color-picker-alpha:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 .eidos-color-picker-hue:focus-visible::-moz-range-thumb,
 .eidos-color-picker-alpha:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 
 .eidos-color-picker-swatch {
@@ -2228,7 +2363,7 @@ svg.lucide {
 }
 .eidos-combobox--error .eidos-input-wrapper:focus-within {
   border-color: var(--danger-color) !important;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
 }
 .eidos-combobox--error .eidos-input-label {
   color: var(--danger-color);
@@ -2277,7 +2412,7 @@ svg.lucide {
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
 }
 .eidos-combobox-option:hover {
@@ -2422,7 +2557,7 @@ svg.lucide {
 }
 
 .eidos-cmd-dialog {
-  background: var(--white);
+  background: var(--surface-raised);
   border-radius: var(--border-radius-lg);
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   width: 560px;
@@ -2482,7 +2617,7 @@ svg.lucide {
 .eidos-cmd-input {
   flex: 1;
   font-size: var(--font-size-base);
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.5;
 }
 .eidos-cmd-input::placeholder {
@@ -2579,7 +2714,7 @@ svg.lucide {
 .eidos-cmd-item-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.4;
 }
 
@@ -2658,7 +2793,7 @@ kbd.eidos-cmd-kbd {
   z-index: var(--z-index-dropdown);
   border-radius: var(--border-radius-md);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
-  background: var(--white);
+  background: var(--surface-raised);
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
@@ -2766,7 +2901,7 @@ kbd.eidos-cmd-kbd {
 .eidos-message-author {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
-  color: var(--dark-color);
+  color: var(--text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2888,7 +3023,7 @@ kbd.eidos-cmd-kbd {
   padding: var(--spacing-sm);
   border: 1px solid var(--gray-500);
   border-radius: var(--border-radius-sm);
-  background: var(--white);
+  background: var(--surface);
   font-size: var(--font-size-xs);
   color: var(--gray-600);
   text-decoration: none;
@@ -2928,12 +3063,12 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-sm);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
-  background: var(--white);
+  background: var(--surface);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 .eidos-message-composer:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-composer-reply-hint {
@@ -2986,7 +3121,7 @@ a.eidos-message-attachment-link:focus-visible {
   width: 100%;
   resize: none;
   font-size: var(--font-size-sm);
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.55;
   min-height: 2.2em;
   background: transparent;
@@ -3047,7 +3182,7 @@ a.eidos-message-attachment-link:focus-visible {
   display: flex;
   flex-direction: column;
   position: relative;
-  background: var(--white);
+  background: var(--surface);
   height: 100%;
   flex: 1 1 auto;
   min-height: 0;
@@ -3107,16 +3242,17 @@ a.eidos-message-attachment-link:focus-visible {
   color: var(--primary-contrast);
 }
 .eidos-message--chat.eidos-message--own .eidos-message-quote {
-  background: rgba(var(--white-rgb), 0.15);
+  background: var(--primary-dark);
   border-left-color: rgba(var(--white-rgb), 0.5);
+  border-left-color: color-mix(in srgb, currentColor 50%, transparent);
 }
 .eidos-message--chat.eidos-message--own .eidos-message-attachment-link {
-  background: rgba(var(--black-rgb), 0.18);
+  background: var(--primary-dark);
   border-color: var(--primary-contrast);
   color: inherit;
 }
 .eidos-message--chat.eidos-message--own a.eidos-message-attachment-link:hover {
-  background: rgba(var(--black-rgb), 0.3);
+  background: var(--primary-800);
   border-color: var(--primary-contrast);
 }
 .eidos-message--chat.eidos-message--own .eidos-message-attachment-size {
@@ -3192,7 +3328,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-chat-composer {
   padding: var(--spacing-md);
   border-top: 1px solid var(--gray-200);
-  background: var(--white);
+  background: var(--surface);
 }
 
 .eidos-chat-skeleton {
@@ -3257,7 +3393,7 @@ a.eidos-message-attachment-link:focus-visible {
   margin: 0;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-comment-thread-count {
@@ -3362,7 +3498,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 
 .eidos-data-grid-container {
-  background: var(--white);
+  background: var(--surface);
   border-radius: var(--border-radius-md);
   border: 1px solid var(--gray-200);
   box-shadow: var(--box-shadow);
@@ -3568,7 +3704,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-data-grid-cell--editing {
   position: relative;
   padding: 0;
-  background: var(--white);
+  background: var(--surface);
   box-shadow: inset 0 0 0 2px var(--primary-color);
 }
 .eidos-data-grid-cell--editing .eidos-input-container {
@@ -3902,7 +4038,7 @@ a.eidos-message-attachment-link:focus-visible {
 
 .eidos-datagrid-cell--pinned-left,
 .eidos-datagrid-cell--pinned-right {
-  background: var(--white);
+  background: var(--surface);
 }
 
 .eidos-data-grid-row:hover .eidos-datagrid-cell--pinned-left,
@@ -3956,7 +4092,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-md);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
-  background: var(--white);
+  background: var(--surface);
   transition: background-color 0.1s ease;
 }
 .eidos-datagrid-card--selected {
@@ -4003,7 +4139,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-datagrid-card-heading-title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
-  color: var(--dark-color);
+  color: var(--text-default);
   border-radius: var(--border-radius-sm);
 }
 
@@ -4117,7 +4253,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: 0;
   width: 100%;
   min-width: 300px;
-  background-color: var(--white);
+  background-color: var(--surface-raised);
   border-radius: var(--border-radius-md);
 }
 
@@ -4192,7 +4328,7 @@ a.eidos-message-attachment-link:focus-visible {
   flex-direction: column;
   gap: var(--spacing-md);
   padding: var(--spacing-md);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
   border-radius: var(--border-radius-md);
   min-width: 280px;
   user-select: none;
@@ -4295,8 +4431,8 @@ a.eidos-message-attachment-link:focus-visible {
   height: 36px;
   min-width: 36px;
   border: none;
-  background-color: var(--white);
-  color: var(--dark-color);
+  background-color: var(--surface-raised);
+  color: var(--text-default);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
@@ -4306,7 +4442,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-calendar-date-cell:hover:not(.eidos-calendar-disabled) {
   background-color: var(--gray-100);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-calendar-date-cell:active:not(.eidos-calendar-disabled) {
   background-color: var(--gray-200);
@@ -4491,7 +4627,7 @@ a.eidos-message-attachment-link:focus-visible {
 
 .eidos-drawer-panel {
   position: absolute;
-  background: var(--white);
+  background: var(--surface-raised);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -4584,7 +4720,7 @@ a.eidos-message-attachment-link:focus-visible {
   margin: 0;
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-base);
-  color: var(--dark-color);
+  color: var(--text-default);
   flex: 1;
   display: flex;
   flex-wrap: wrap;
@@ -4612,7 +4748,7 @@ a.eidos-message-attachment-link:focus-visible {
   transition: color 0.15s ease, background-color 0.15s ease;
 }
 .eidos-drawer-close:hover {
-  color: var(--dark-color);
+  color: var(--text-default);
   background-color: var(--gray-100);
 }
 .eidos-drawer-close:focus-visible {
@@ -4620,7 +4756,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-drawer-close:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-drawer-close svg {
   width: 18px;
@@ -4659,7 +4795,7 @@ a.eidos-message-attachment-link:focus-visible {
   position: fixed;
   width: max-content;
   z-index: var(--z-index-dropdown);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
   box-shadow: var(--box-shadow-lg);
@@ -4755,7 +4891,7 @@ a.eidos-message-attachment-link:focus-visible {
 
 .eidos-empty-state-title {
   margin: 0;
-  color: var(--dark-color);
+  color: var(--text-default);
   font-weight: var(--font-weight-medium);
   display: flex;
   flex-wrap: wrap;
@@ -4841,7 +4977,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-file-upload-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-file-upload-title em {
   font-style: normal;
@@ -4902,7 +5038,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-file-upload-item-name {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4938,7 +5074,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-file-upload-item-remove:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-file-upload-item-remove svg {
   width: 14px;
@@ -5089,14 +5225,14 @@ a.eidos-message-attachment-link:focus-visible {
   transition: all 0.2s ease;
   gap: var(--spacing-sm);
   border: 1.5px solid var(--gray-300);
-  background-color: var(--white);
+  background-color: var(--surface);
 }
 .eidos-input-wrapper:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-input-wrapper--focused.eidos-input-wrapper--filled {
-  background-color: var(--white);
+  background-color: var(--surface);
 }
 .eidos-input-wrapper--sm {
   height: var(--component-size-sm);
@@ -5120,44 +5256,44 @@ a.eidos-message-attachment-link:focus-visible {
   border-color: var(--gray-400);
 }
 .eidos-input-wrapper--filled:focus-within {
-  background-color: var(--white);
+  background-color: var(--surface);
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--secondary:hover:not(:disabled) {
   border-color: var(--secondary-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--success:hover:not(:disabled) {
   border-color: var(--success-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--danger:hover:not(:disabled) {
   border-color: var(--danger-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--warning:hover:not(:disabled) {
   border-color: var(--warning-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--info:hover:not(:disabled) {
   border-color: var(--info-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined {
   background-color: transparent;
@@ -5168,7 +5304,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--secondary {
   border-color: var(--secondary-color);
@@ -5178,7 +5314,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--success {
   border-color: var(--success-color);
@@ -5188,7 +5324,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--danger {
   border-color: var(--danger-color);
@@ -5198,7 +5334,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--warning {
   border-color: var(--warning-color);
@@ -5208,7 +5344,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--info {
   border-color: var(--info-color);
@@ -5218,7 +5354,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--text {
   background-color: transparent;
@@ -5305,7 +5441,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-input-wrapper--error:focus-within {
   border-color: var(--danger-color) !important;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-input-wrapper--loading {
   border-style: dashed;
@@ -5341,7 +5477,7 @@ a.eidos-message-attachment-link:focus-visible {
   appearance: textfield;
 }
 .eidos-input {
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.4;
   min-width: 0;
   text-overflow: ellipsis;
@@ -5595,7 +5731,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
 }
 .eidos-menu-item:focus-visible {
@@ -5617,16 +5753,20 @@ a.eidos-message-attachment-link:focus-visible {
   background-color: transparent;
 }
 .eidos-menu-item.eidos-menu-item--danger {
-  color: var(--danger-color, #dc2626);
+  color: var(--danger-color);
 }
 .eidos-menu-item.eidos-menu-item--danger .eidos-menu-icon {
-  color: var(--danger-color, #dc2626);
+  color: var(--danger-color);
 }
 .eidos-menu-item.eidos-menu-item--danger:hover {
-  background-color: var(--danger-subtle, #fef2f2);
+  background-color: rgba(var(--danger-rgb), 0.08);
+  color: var(--danger-dark);
+}
+.eidos-menu-item.eidos-menu-item--danger:hover .eidos-menu-icon {
+  color: var(--danger-dark);
 }
 .eidos-menu-item.eidos-menu-item--danger:active {
-  background-color: var(--danger-muted, #fee2e2);
+  background-color: rgba(var(--danger-rgb), 0.14);
 }
 
 .eidos-menu-component-item {
@@ -5653,7 +5793,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   transition: background-color 0.15s ease;
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
 }
 .eidos-menu-nested-trigger:focus-visible {
@@ -5726,7 +5866,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 
 .eidos-modal-content {
-  background: var(--white);
+  background: var(--surface-raised);
   border-radius: var(--border-radius-md);
   box-shadow: var(--box-shadow-lg);
   max-height: 90vh;
@@ -5855,7 +5995,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-number-input-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-number-input-control {
@@ -5863,19 +6003,19 @@ a.eidos-message-attachment-link:focus-visible {
   align-items: center;
   border: 1.5px solid var(--gray-300);
   border-radius: var(--border-radius-sm);
-  background: var(--white);
+  background: var(--surface);
   overflow: hidden;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .eidos-number-input-control:focus-within:not(.eidos-number-input-control--disabled) {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-number-input--error .eidos-number-input-control {
   border-color: var(--danger-color);
 }
 .eidos-number-input--error .eidos-number-input-control:focus-within {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-number-input-control--disabled {
   background: var(--gray-100);
@@ -5921,7 +6061,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-number-input-btn:hover:not(:disabled) {
   background: var(--gray-100);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-number-input-btn:disabled {
   opacity: 0.4;
@@ -5955,7 +6095,7 @@ a.eidos-message-attachment-link:focus-visible {
   flex: 1;
   text-align: center;
   font-size: var(--font-size-sm);
-  color: var(--dark-color);
+  color: var(--text-default);
   background: transparent;
   border: none;
   outline: none;
@@ -6019,7 +6159,7 @@ a.eidos-message-attachment-link:focus-visible {
   height: var(--component-size-md);
   border: 1.5px solid var(--gray-300);
   border-radius: var(--border-radius-md);
-  background-color: var(--white);
+  background-color: var(--surface);
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }
 .eidos-otp .eidos-otp-slot input {
@@ -6045,7 +6185,7 @@ a.eidos-message-attachment-link:focus-visible {
   height: 100%;
   text-align: center;
   background: transparent;
-  color: var(--dark-color);
+  color: var(--text-default);
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-base);
   cursor: text;
@@ -6060,15 +6200,15 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-otp .eidos-otp-slot--focused {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
-  background-color: var(--white);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
+  background-color: var(--surface);
 }
 .eidos-otp .eidos-otp-slot--error {
   border-color: var(--danger-color);
   background-color: rgba(var(--danger-rgb), 0.04);
 }
 .eidos-otp .eidos-otp-slot--error.eidos-otp-slot--focused {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-otp .eidos-otp-slot--disabled {
   opacity: 0.5;
@@ -6180,7 +6320,7 @@ a.eidos-message-attachment-link:focus-visible {
   outline: none;
 }
 .eidos-pagination-page:focus-visible {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-pagination-page {
   padding: 0;
@@ -6214,7 +6354,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-pagination-page:hover:not(:disabled):not(.eidos-pagination-page--active) {
   background: var(--gray-50);
   border-color: var(--gray-300);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-pagination-page:disabled {
   opacity: 0.4;
@@ -6249,7 +6389,7 @@ a.eidos-message-attachment-link:focus-visible {
   color: var(--info-contrast);
 }
 .eidos-pagination-page--active:focus {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-pagination-page--active:disabled {
   opacity: 0.6;
@@ -6291,7 +6431,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-popover-content {
   position: fixed;
   z-index: var(--z-index-dropdown);
-  background: var(--white);
+  background: var(--surface-raised);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
@@ -6330,7 +6470,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-popover-title {
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-sm);
-  color: var(--dark-color);
+  color: var(--text-default);
   flex: 1;
   display: flex;
   flex-wrap: wrap;
@@ -6358,12 +6498,12 @@ a.eidos-message-attachment-link:focus-visible {
   flex-shrink: 0;
 }
 .eidos-popover-close:hover {
-  color: var(--dark-color);
+  color: var(--text-default);
   background: var(--gray-100);
 }
 .eidos-popover-close:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-popover-close svg {
   width: 14px;
@@ -6510,7 +6650,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--primary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-radio-wrapper--primary .eidos-radio-control--checked {
   background: var(--primary-color);
@@ -6519,7 +6659,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--secondary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color);
 }
 .eidos-radio-wrapper--secondary .eidos-radio-control--checked {
   background: var(--secondary-color);
@@ -6528,7 +6668,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--success .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color);
 }
 .eidos-radio-wrapper--success .eidos-radio-control--checked {
   background: var(--success-color);
@@ -6537,7 +6677,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--danger .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-radio-wrapper--danger .eidos-radio-control--checked {
   background: var(--danger-color);
@@ -6546,7 +6686,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--warning .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color);
 }
 .eidos-radio-wrapper--warning .eidos-radio-control--checked {
   background: var(--warning-color);
@@ -6555,7 +6695,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-radio-wrapper--info .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color);
 }
 .eidos-radio-wrapper--info .eidos-radio-control--checked {
   background: var(--info-color);
@@ -6585,7 +6725,7 @@ a.eidos-message-attachment-link:focus-visible {
   flex-shrink: 0;
   border: 2px solid var(--gray-400);
   border-radius: 50%;
-  background: var(--white);
+  background: var(--surface);
   will-change: transform;
   transition: all 0.2s ease;
 }
@@ -6606,7 +6746,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 
 .eidos-radio-label {
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1;
   user-select: none;
 }
@@ -6695,7 +6835,7 @@ a.eidos-message-attachment-link:focus-visible {
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
-  background: rgba(var(--white-rgb), 0.95);
+  background: var(--surface);
   border: 1px solid var(--gray-200);
   border-radius: 50%;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -6789,7 +6929,7 @@ a.eidos-message-attachment-link:focus-visible {
   outline: none;
 }
 .eidos-segmented-item--active {
-  background: var(--white);
+  background: var(--surface);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 .eidos-segmented--primary .eidos-segmented-item--active {
@@ -6889,7 +7029,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
 }
 .eidos-select-option:hover {
@@ -7026,7 +7166,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-slider-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-slider-value {
@@ -7063,7 +7203,7 @@ a.eidos-message-attachment-link:focus-visible {
   appearance: none;
   border-radius: 50%;
   background: var(--primary-color);
-  border: 2px solid var(--white);
+  border: 2px solid var(--surface);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   cursor: grab;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
@@ -7090,7 +7230,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-slider-input::-moz-range-thumb {
   border-radius: 50%;
   background: var(--primary-color);
-  border: 2px solid var(--white);
+  border: 2px solid var(--surface);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
   cursor: grab;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
@@ -7116,10 +7256,10 @@ a.eidos-message-attachment-link:focus-visible {
   background: linear-gradient(to right, var(--s-color) var(--s-fill), var(--s-empty) var(--s-fill), var(--s-empty) var(--s-block, 100%), var(--danger-color) var(--s-block, 100%), var(--danger-color) 100%);
 }
 .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 .eidos-slider--disabled .eidos-slider-input {
   opacity: 0.5;
@@ -7206,51 +7346,51 @@ a.eidos-message-attachment-link:focus-visible {
 }
 
 .eidos-slider--primary .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 
 .eidos-slider--secondary .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--secondary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--secondary-color);
 }
 
 .eidos-slider--success .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--success-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--success-color);
 }
 
 .eidos-slider--danger .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--danger-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--danger-color);
 }
 
 .eidos-slider--warning .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--warning-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--warning-color);
 }
 
 .eidos-slider--info .eidos-slider-input:focus-visible::-webkit-slider-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--info-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--info-color);
 }
 
 .eidos-slider--primary .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--primary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary-color);
 }
 
 .eidos-slider--secondary .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--secondary-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--secondary-color);
 }
 
 .eidos-slider--success .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--success-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--success-color);
 }
 
 .eidos-slider--danger .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--danger-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--danger-color);
 }
 
 .eidos-slider--warning .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--warning-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--warning-color);
 }
 
 .eidos-slider--info .eidos-slider-input:focus-visible::-moz-range-thumb {
-  box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--info-color);
+  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--info-color);
 }
 
 .eidos-slider-minmax {
@@ -7268,7 +7408,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-md) var(--spacing-lg);
   border-radius: var(--border-radius-md);
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
   border: 1px solid var(--gray-200);
   min-width: 300px;
   max-width: 500px;
@@ -7306,7 +7446,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-snackbar--success {
   border-color: var(--success-color);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
 }
 .eidos-snackbar--success::before {
   content: "";
@@ -7322,7 +7462,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-snackbar--danger {
   border-color: var(--danger-color);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
 }
 .eidos-snackbar--danger::before {
   content: "";
@@ -7338,7 +7478,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-snackbar--warning {
   border-color: var(--warning-color);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
 }
 .eidos-snackbar--warning::before {
   content: "";
@@ -7354,7 +7494,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-snackbar--info {
   border-color: var(--info-color);
-  background-color: var(--white);
+  background-color: var(--surface-raised);
 }
 .eidos-snackbar--info::before {
   content: "";
@@ -7378,7 +7518,7 @@ a.eidos-message-attachment-link:focus-visible {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   line-height: 1.4;
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-snackbar .eidos-snackbar-actions {
   display: flex;
@@ -7416,7 +7556,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-snackbar .eidos-snackbar-close-button:focus:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gray-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gray-color);
 }
 .eidos-snackbar .eidos-snackbar-close-icon {
   width: 16px;
@@ -7688,7 +7828,7 @@ a.eidos-message-attachment-link:focus-visible {
   font-weight: var(--font-weight-medium);
   flex-shrink: 0;
   border: 2px solid var(--gray-300);
-  background: var(--white);
+  background: var(--surface);
   color: var(--text-muted);
   transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
 }
@@ -7810,7 +7950,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-stepper-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-stepper-step--pending .eidos-stepper-label {
   color: var(--text-muted);
@@ -7878,46 +8018,46 @@ a.eidos-message-attachment-link:focus-visible {
   color: var(--primary-contrast);
 }
 .eidos-switch-wrapper--primary .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-track--checked {
   background: var(--secondary-color);
   color: var(--secondary-contrast);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color);
 }
 .eidos-switch-wrapper--success .eidos-switch-track--checked {
   background: var(--success-color);
   color: var(--success-contrast);
 }
 .eidos-switch-wrapper--success .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color);
 }
 .eidos-switch-wrapper--danger .eidos-switch-track--checked {
   background: var(--danger-color);
   color: var(--danger-contrast);
 }
 .eidos-switch-wrapper--danger .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-switch-wrapper--warning .eidos-switch-track--checked {
   background: var(--warning-color);
   color: var(--warning-contrast);
 }
 .eidos-switch-wrapper--warning .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color);
 }
 .eidos-switch-wrapper--info .eidos-switch-track--checked {
   background: var(--info-color);
   color: var(--info-contrast);
 }
 .eidos-switch-wrapper--info .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color);
 }
 
 .eidos-switch-label {
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
   line-height: 1;
 }
@@ -7965,7 +8105,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 
 .eidos-table-container {
-  background: var(--white);
+  background: var(--surface);
   border-radius: var(--border-radius-md);
   border: 1px solid var(--gray-200);
   box-shadow: var(--box-shadow);
@@ -8272,7 +8412,7 @@ a.eidos-message-attachment-link:focus-visible {
   right: -4px;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
+  background: linear-gradient(to right, rgba(var(--text-default-rgb), 0.06), transparent);
   pointer-events: none;
   z-index: 1;
 }
@@ -8289,14 +8429,14 @@ a.eidos-message-attachment-link:focus-visible {
   left: -4px;
   bottom: 0;
   width: 4px;
-  background: linear-gradient(to left, rgba(0, 0, 0, 0.06), transparent);
+  background: linear-gradient(to left, rgba(var(--text-default-rgb), 0.06), transparent);
   pointer-events: none;
   z-index: 1;
 }
 
 .eidos-table-cell--pinned-left,
 .eidos-table-cell--pinned-right {
-  background: var(--white);
+  background: var(--surface);
 }
 
 .eidos-table-row:hover .eidos-table-cell--pinned-left,
@@ -8391,7 +8531,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
   font-size: var(--font-size-sm);
-  color: var(--dark-color);
+  color: var(--text-default);
   transition: background-color 0.15s ease, color 0.15s ease;
   user-select: none;
   text-align: left;
@@ -8454,7 +8594,7 @@ a.eidos-message-attachment-link:focus-visible {
   padding: var(--spacing-md);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-md);
-  background: var(--white);
+  background: var(--surface);
   transition: background-color 0.1s ease;
 }
 .eidos-table-card--clickable {
@@ -8505,7 +8645,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-table-card-heading-title {
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-table-card-heading-subtitle {
@@ -8610,7 +8750,7 @@ a.eidos-message-attachment-link:focus-visible {
   }
 }
 .eidos-table-filters-dropdown {
-  background: var(--white);
+  background: var(--surface-raised);
   border-radius: var(--border-radius-md);
   padding: var(--spacing-lg);
   width: min(480px, 100vw - 32px);
@@ -8753,7 +8893,7 @@ a.eidos-message-attachment-link:focus-visible {
   border-radius: var(--border-radius-sm);
 }
 .eidos-tabs--enclosed .eidos-tab--active {
-  background: var(--white);
+  background: var(--surface);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
 }
 .eidos-tabs--pills .eidos-tabs-list {
@@ -8792,7 +8932,7 @@ a.eidos-message-attachment-link:focus-visible {
   transform: translateY(-50%);
   z-index: 1;
   padding: var(--spacing-sm);
-  background: rgb(var(--white-rgb), 0.9);
+  background: var(--surface);
   border: 1px solid var(--gray-200);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
@@ -9047,7 +9187,7 @@ a.eidos-message-attachment-link:focus-visible {
   gap: var(--spacing-xs);
   border: 1px solid var(--gray-300);
   border-radius: var(--border-radius-md);
-  background-color: var(--white);
+  background-color: var(--surface);
   cursor: text;
   box-sizing: border-box;
   will-change: transform;
@@ -9074,7 +9214,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-tag-input-field--focused {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
   outline: none;
 }
 .eidos-tag-input-field--error {
@@ -9082,7 +9222,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-tag-input-field--error.eidos-tag-input-field--focused {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-tag-input-field--disabled {
   opacity: 0.5;
@@ -9112,7 +9252,7 @@ a.eidos-message-attachment-link:focus-visible {
   flex: 1;
   min-width: 6ch;
   padding: 2px 0;
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.4;
 }
 .eidos-tag-input-input::placeholder {
@@ -9138,7 +9278,7 @@ a.eidos-message-attachment-link:focus-visible {
   font-size: var(--font-size-sm);
   padding: var(--spacing-sm) var(--spacing-md);
   cursor: pointer;
-  color: var(--dark-color);
+  color: var(--text-default);
   user-select: none;
   transition: background-color 0.15s ease;
 }
@@ -9241,7 +9381,7 @@ a.eidos-message-attachment-link:focus-visible {
   transition: all 0.2s ease;
   gap: var(--spacing-xs);
   border: 1.5px solid var(--gray-300);
-  background-color: var(--white);
+  background-color: var(--surface);
   padding: var(--spacing-sm) var(--spacing-md);
 }
 .eidos-textarea-wrapper:focus-within {
@@ -9260,44 +9400,44 @@ a.eidos-message-attachment-link:focus-visible {
   border-color: var(--gray-400);
 }
 .eidos-textarea-wrapper--filled:focus-within {
-  background-color: var(--white);
+  background-color: var(--surface);
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--secondary:hover:not(:disabled) {
   border-color: var(--secondary-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--success:hover:not(:disabled) {
   border-color: var(--success-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--danger:hover:not(:disabled) {
   border-color: var(--danger-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--warning:hover:not(:disabled) {
   border-color: var(--warning-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--info:hover:not(:disabled) {
   border-color: var(--info-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined {
   background-color: transparent;
@@ -9308,7 +9448,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--secondary {
   border-color: var(--secondary-color);
@@ -9318,7 +9458,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--success {
   border-color: var(--success-color);
@@ -9328,7 +9468,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--danger {
   border-color: var(--danger-color);
@@ -9338,7 +9478,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--warning {
   border-color: var(--warning-color);
@@ -9348,7 +9488,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--info {
   border-color: var(--info-color);
@@ -9358,7 +9498,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--text {
   background-color: transparent;
@@ -9432,7 +9572,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-textarea-wrapper--error:focus-within {
   border-color: var(--danger-color) !important;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger-color);
 }
 .eidos-textarea-wrapper--loading {
   border-style: dashed;
@@ -9459,7 +9599,7 @@ a.eidos-message-attachment-link:focus-visible {
   appearance: textfield;
 }
 .eidos-textarea {
-  color: var(--dark-color);
+  color: var(--text-default);
   line-height: 1.6;
   min-height: 80px;
 }
@@ -9559,7 +9699,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-theme-editor-section__title {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-theme-editor-section__hint {
@@ -9589,7 +9729,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-theme-editor-row__label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
   flex: 0 0 auto;
   min-width: 6.5em;
 }
@@ -9691,7 +9831,7 @@ a.eidos-message-attachment-link:focus-visible {
   border-radius: 50%;
   flex-shrink: 0;
   border: 2px solid var(--gray-300);
-  background: var(--white);
+  background: var(--surface);
   will-change: transform;
   position: relative;
 }
@@ -9777,7 +9917,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-timeline-title {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 
 .eidos-timeline-description {
@@ -9797,7 +9937,7 @@ a.eidos-message-attachment-link:focus-visible {
 .eidos-tooltip {
   position: fixed;
   z-index: var(--z-index-tooltip);
-  background-color: rgba(var(--white-rgb), 0.95);
+  background-color: var(--surface-raised);
   border: 1px solid var(--gray-50);
   opacity: 0;
   visibility: hidden;
@@ -9868,7 +10008,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-tree-node:focus-visible > .eidos-tree-node-row {
   border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-tree-node-row {
@@ -10020,7 +10160,7 @@ a.eidos-message-attachment-link:focus-visible {
   grid-template-areas: "navigation toolbar" "navigation content";
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
-  background-color: var(--white);
+  background-color: var(--surface);
 }
 .eidos-pagelayout__toolbar {
   grid-area: toolbar;
@@ -10254,7 +10394,7 @@ a.eidos-message-attachment-link:focus-visible {
   font-weight: var(--font-weight-extrabold);
   line-height: 1.2;
   letter-spacing: -0.025em;
-  color: var(--dark-color);
+  color: var(--text-default);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -10342,7 +10482,7 @@ a.eidos-message-attachment-link:focus-visible {
   height: 100%;
   box-sizing: border-box;
   padding: var(--spacing-md) var(--spacing-md);
-  background-color: var(--white);
+  background-color: var(--surface);
   position: relative;
   width: 100%;
   min-width: var(--navigation-min-width);
@@ -10373,7 +10513,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-navigation__brand--clickable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
+  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-color);
 }
 .eidos-navigation__brand--logo-only {
   justify-content: center;
@@ -10387,7 +10527,7 @@ a.eidos-message-attachment-link:focus-visible {
   min-width: 0;
   font-weight: var(--font-weight-semibold);
   letter-spacing: -0.01em;
-  color: var(--dark-color);
+  color: var(--text-default);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -10443,7 +10583,7 @@ a.eidos-message-attachment-link:focus-visible {
 }
 .eidos-navigation__item:hover:not(:disabled) {
   background: var(--primary-50);
-  color: var(--dark-color);
+  color: var(--text-default);
 }
 .eidos-navigation__item:disabled {
   opacity: 0.5;
@@ -10501,7 +10641,7 @@ a.eidos-message-attachment-link:focus-visible {
   right: 0;
   transform: translateX(50%);
   z-index: 1;
-  background: var(--white);
+  background: var(--surface);
   border-radius: 50%;
   border: 1px solid var(--gray-200);
 }