@skalar-saas/design-system 0.1.160 → 0.2.0

package/src/styles/theme.css

@@ -1,536 +1,536 @@
-/**
- * =========================================
- * SKALAR DESIGN SYSTEM - NEW TOKEN SYSTEM
- * =========================================
- *
- * Importable theme: token definitions (:root / .dark) + @theme mapping.
- * Sin `@import "tailwindcss"` a propósito, para que un consumidor pueda
- * importar este archivo DESPUÉS de su propio `@import "tailwindcss"` sin
- * duplicarlo. El build del DS lo importa vía globals.css.
- */
-
-/* ========================================= */
-/* BASE TOKENS - LIGHT THEME (DEFAULT)      */
-/* ========================================= */
-
-:root {
-  /* Fonts */
-  --font-inter: 'Inter', sans-serif;
-  --font-space-grotesk: 'Space Grotesk', sans-serif;
-
-  /* ========================================= */
-  /* PRIMITIVE COLORS                         */
-  /* ========================================= */
-
-  --black: #000;
-  --white: #FFF;
-  --black-uniform: #000;
-  --white-uniform: #FFF;
-
-  /* ========================================= */
-  /* SURFACE TOKENS                           */
-  /* Use for backgrounds, cards, containers   */
-  /* ========================================= */
-
-  --surface-bg: #F9F9FA;
-  --surface-1: #F0F1F5;
-  --surface-2: #E8EBF0;
-  --surface-3: #D8DDE5;
-  --surface-4: #CACFDB;
-
-  /* ========================================= */
-  /* TEXT EMPHASIS TOKENS                     */
-  /* Use for text colors based on hierarchy   */
-  /* ========================================= */
-
-  --disabled: #BFC6D4;
-  --placeholder: #667085;
-  --low-em: #5A606B;
-  --med-em: #2F343C;
-  --high-em: #22262E;
-
-  /* ========================================= */
-  /* BRAND TOKENS                             */
-  /* Primary brand colors                     */
-  /* ========================================= */
-
-  --brand-primary-main: #0A0F15;
-  --brand-primary-main-special: #0A0F15;
-
-  --brand-primary-accent-special: #191E25;
-  --brand-primary-accent-3: #262C35;
-
-  --brand-secondary-main: #2563EB;
-  --brand-secondary-accent-3: #3B76F6;
-
-  /* ========================================= */
-  /* SEMANTIC STATUS TOKENS - WARNING         */
-  /* ========================================= */
-
-  --warning-em: #FB6E0A;
-  --warning-main: #FC9E0B;
-  --warning-accent-3: #FDC82C;
-  --warning-accent-1: #FEDE82;
-  --warning-accent-0: #FFF8E1;
-
-  /* ========================================= */
-  /* SEMANTIC STATUS TOKENS - SUCCESS         */
-  /* ========================================= */
-
-  --success-em: #054F31;
-  --success-main: #039855;
-  --success-accent-3: #32D583;
-  --success-accent-2: #A6F4C5;
-  --success-accent-1: #ECFDF3;
-
-  /* ========================================= */
-  /* SEMANTIC STATUS TOKENS - INFO            */
-  /* ========================================= */
-
-  --info-em: #3362C2;
-  --info-main: #3A85E8;
-  --info-accent-3: #50A3F9;
-  --info-accent-2: #94C9FC;
-  --info-accent-1: #E4F2FE;
-
-  /* ========================================= */
-  /* SEMANTIC STATUS TOKENS - DANGER          */
-  /* ========================================= */
-
-  --danger-em: #DE2424;
-  --danger-main: #F03D3D;
-  --danger-accent-3: #FF7373;
-  --danger-accent-2: #FFE0E0;
-  --danger-accent-1: #FEF2F2;
-
-  /* ========================================= */
-  /* SPACING SYSTEM                           */
-  /* ========================================= */
-
-  --spacing-0: 0px;
-  --spacing-1: 2px;
-  --spacing-2: 4px;
-  --spacing-3: 6px;
-  --spacing-4: 8px;
-  --spacing-5: 10px;
-  --spacing-6: 12px;
-  --spacing-7: 14px;
-  --spacing-8: 16px;
-  --spacing-9: 20px;
-  --spacing-10: 24px;
-  --spacing-11: 28px;
-  --spacing-12: 32px;
-  --spacing-13: 40px;
-  --spacing-14: 48px;
-  --spacing-15: 64px;
-  --spacing-16: 80px;
-  --spacing-17: 96px;
-  --spacing-18: 128px;
-  --spacing-19: 180px;
-  --spacing-20: 192px;
-  --spacing-21: 224px;
-  --spacing-22: 256px;
-  --spacing-23: 320px;
-  --spacing-24: 384px;
-  --spacing-25: 480px;
-  --spacing-26: 560px;
-
-  /* ========================================= */
-  /* SHADOW SYSTEM                            */
-  /* Use for elevations and depth             */
-  /* ========================================= */
-
-  --shadow-e1: 0px 4px 12px -2px rgba(0, 0, 0, 0.08);
-  --shadow-e2: 0px 8px 24px -4px rgba(0, 0, 0, 0.12);
-  --shadow-e3: 0px 12px 32px -6px rgba(0, 0, 0, 0.16);
-
-  /* ========================================= */
-  /* LAYOUT SYSTEM                            */
-  /* Container, Sidebar, and Navbar tokens    */
-  /* ========================================= */
-
-  /* Container Max Widths */
-  --layout-container-max-width: 1400px;
-  --layout-container-narrow: 896px;
-  --layout-container-medium: 1152px;
-  --layout-container-wide: 1600px;
-
-  /* Container Padding (responsive) */
-  --layout-container-padding-mobile: 16px;
-  --layout-container-padding-tablet: 24px;
-  --layout-container-padding-desktop: 32px;
-  --layout-container-padding-desktop-lg: 48px;
-
-  /* Sidebar Dimensions */
-  --layout-sidebar-width: 280px;
-  --layout-sidebar-collapsed: 64px;
-  --layout-sidebar-navigation: 240px;
-
-  /* Navbar Dimensions */
-  --layout-navbar-header-height: 60px;
-  --layout-navbar-tabs-height: 48px;
-  --layout-navbar-total-height: 108px;
-
-}
-
-/* ========================================= */
-/* DARK MODE THEME                          */
-/* ========================================= */
-
-.dark {
-  /* Primitive colors - INVERTED */
-  --black: #FFF;
-  --white: #000;
-
-  /* Surface tokens - Dark backgrounds */
-  --surface-bg: #0A0A0A;
-  --surface-1: #131313;
-  --surface-2: #1F1F1F;
-  --surface-3: #292929;
-  --surface-4: #333333;
-
-  /* Text emphasis - Lighter for dark backgrounds */
-  --disabled: #565656;
-  --placeholder: #C4C4C4;
-  --low-em: #7E7E7E;
-  --med-em: #C3C3C3;
-  --high-em: #FFF;
-
-  /* Brand tokens - Adjusted for dark mode */
-  --brand-primary-main: #3B414C;
-  --brand-primary-main-special: #1F1F1F;
-
-  --brand-primary-accent-special: #333333;
-  --brand-primary-accent-3: #262C35;
-
-  --brand-secondary-main: #2563EB;
-  --brand-secondary-accent-3: #3B76F6;
-
-  /* Warning tokens - Dark mode variants */
-  --warning-em: #FED350;
-  --warning-main: #FDBE12;
-  --warning-accent-3: #FDB10C;
-  --warning-accent-1: #FEDE82;
-  --warning-accent-0: #3A2A06;
-
-  /* Success tokens - Dark mode variants */
-  --success-em: #6CE9A6;
-  --success-main: #12B76A;
-  --success-accent-3: #039855;
-  --success-accent-2: #054F31;
-  --success-accent-1: #053321;
-
-  /* Info tokens - Dark mode variants */
-  --info-em: #6CB3FA;
-  --info-main: #3C93F7;
-  --info-accent-3: #3A85E8;
-  --info-accent-2: #2C43A3;
-  --info-accent-1: #3560C2;
-
-  /* Danger tokens - Dark mode variants */
-  --danger-em: #FFA9A9;
-  --danger-main: #F03D3D;
-  --danger-accent-3: #DE2424;
-  --danger-accent-2: #3F1E1E;
-  --danger-accent-1: #371C1C;
-
-  /* Canvas tokens - Dark mode */
-  --canvas-container-bg: #0a0a0a;
-  --canvas-bg: #111111;
-  --canvas-grid-bg: #0f0f0f;
-  --canvas-grid-line: #2a2a2a;
-  --canvas-grid-center-line: #181818;
-}
-
-/* ========================================= */
-/* TAILWIND THEME INTEGRATION               */
-/* ========================================= */
-
-@theme inline {
-  /* Font families */
-  --font-family-inter: var(--font-inter);
-  --font-family-space-grotesk: var(--font-space-grotesk);
-
-  /* Primitive colors */
-  --color-black: var(--black);
-  --color-white: var(--white);
-
-  --color-black-uniform: var(--black-uniform);
-  --color-white-uniform: var(--white-uniform);
-
-
-  /* Surface colors */
-  --color-surface-bg: var(--surface-bg);
-  --color-surface-1: var(--surface-1);
-  --color-surface-2: var(--surface-2);
-  --color-surface-3: var(--surface-3);
-  --color-surface-4: var(--surface-4);
-
-  /* Text emphasis */
-  --color-disabled: var(--disabled);
-  --color-placeholder: var(--placeholder);
-  --color-low-em: var(--low-em);
-  --color-med-em: var(--med-em);
-  --color-high-em: var(--high-em);
-
-  /* Brand colors */
-  --color-brand-primary-main: var(--brand-primary-main);
-  --color-brand-primary-main-special: var(--brand-primary-main-special);
-  --color-brand-primary-accent-special: var(--brand-primary-accent-special);
-  --color-brand-primary-accent-3: var(--brand-primary-accent-3);
-  --color-brand-secondary-main: var(--brand-secondary-main);
-  --color-brand-secondary-accent-3: var(--brand-secondary-accent-3);
-
-  /* Warning colors */
-  --color-warning-em: var(--warning-em);
-  --color-warning-main: var(--warning-main);
-  --color-warning-accent-3: var(--warning-accent-3);
-  --color-warning-accent-1: var(--warning-accent-1);
-  --color-warning-accent-0: var(--warning-accent-0);
-
-  /* Success colors */
-  --color-success-em: var(--success-em);
-  --color-success-main: var(--success-main);
-  --color-success-accent-3: var(--success-accent-3);
-  --color-success-accent-2: var(--success-accent-2);
-  --color-success-accent-1: var(--success-accent-1);
-
-  /* Info colors */
-  --color-info-em: var(--info-em);
-  --color-info-main: var(--info-main);
-  --color-info-accent-3: var(--info-accent-3);
-  --color-info-accent-2: var(--info-accent-2);
-  --color-info-accent-1: var(--info-accent-1);
-
-  /* Danger colors */
-  --color-danger-em: var(--danger-em);
-  --color-danger-main: var(--danger-main);
-  --color-danger-accent-3: var(--danger-accent-3);
-  --color-danger-accent-2: var(--danger-accent-2);
-  --color-danger-accent-1: var(--danger-accent-1);
-
-  /* Spacing */
-  --spacing-0: 0px;
-  --spacing-1: 2px;
-  --spacing-2: 4px;
-  --spacing-3: 6px;
-  --spacing-4: 8px;
-  --spacing-5: 10px;
-  --spacing-6: 12px;
-  --spacing-7: 14px;
-  --spacing-8: 16px;
-  --spacing-9: 20px;
-  --spacing-10: 24px;
-  --spacing-11: 28px;
-  --spacing-12: 32px;
-  --spacing-13: 40px;
-  --spacing-14: 48px;
-  --spacing-15: 64px;
-  --spacing-16: 80px;
-  --spacing-17: 96px;
-  --spacing-18: 128px;
-  --spacing-19: 180px;
-  --spacing-20: 192px;
-  --spacing-21: 224px;
-  --spacing-22: 256px;
-  --spacing-23: 320px;
-  --spacing-24: 384px;
-  --spacing-25: 480px;
-  --spacing-26: 560px;
-
-  /* Border Radius */
-  --radius-0: 0px;
-  --radius-1: 2px;
-  --radius-2: 4px;
-  --radius-3: 6px;
-  --radius-4: 8px;
-  --radius-5: 10px;
-  --radius-6: 12px;
-  --radius-7: 14px;
-  --radius-8: 16px;
-  --radius-9: 20px;
-  --radius-10: 24px;
-  --radius-11: 28px;
-  --radius-12: 32px;
-  --radius-13: 40px;
-  --radius-14: 48px;
-  --radius-15: 64px;
-  --radius-16: 80px;
-  --radius-17: 96px;
-  --radius-18: 128px;
-  --radius-19: 180px;
-  --radius-20: 192px;
-  --radius-21: 224px;
-  --radius-22: 256px;
-  --radius-23: 320px;
-  --radius-24: 384px;
-  --radius-25: 480px;
-  --radius-26: 560px;
-
-  /* Shadows */
-  --shadow-e1: var(--shadow-e1);
-  --shadow-e2: var(--shadow-e2);
-  --shadow-e3: var(--shadow-e3);
-
-  /* ========================================= */
-  /* LAYOUT SYSTEM                            */
-  /* ========================================= */
-
-  /* Container Max Widths */
-  --max-width-container: var(--layout-container-max-width);
-  --max-width-container-narrow: var(--layout-container-narrow);
-  --max-width-container-medium: var(--layout-container-medium);
-  --max-width-container-wide: var(--layout-container-wide);
-
-  /* Container Padding */
-  --padding-container-mobile: var(--layout-container-padding-mobile);
-  --padding-container-tablet: var(--layout-container-padding-tablet);
-  --padding-container-desktop: var(--layout-container-padding-desktop);
-  --padding-container-desktop-lg: var(--layout-container-padding-desktop-lg);
-
-  /* Sidebar Widths */
-  --width-sidebar: var(--layout-sidebar-width);
-  --width-sidebar-collapsed: var(--layout-sidebar-collapsed);
-  --width-sidebar-nav: var(--layout-sidebar-navigation);
-
-  /* Navbar Heights */
-  --height-navbar: var(--layout-navbar-total-height);
-  --height-navbar-header: var(--layout-navbar-header-height);
-  --height-navbar-tabs: var(--layout-navbar-tabs-height);
-
-}
-
-/* ========================================= */
-/* BASE STYLES                              */
-/* ========================================= */
-
-body {
-  background: var(--surface-bg);
-  color: var(--high-em);
-  font-family: var(--font-inter), system-ui, sans-serif;
-}
-
-/* ========================================= */
-/* ANIMATIONS                               */
-/* ========================================= */
-
-@keyframes typing-dot {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
-    transform: translateY(0) scale(0.8);
-  }
-  30% {
-    opacity: 1;
-    transform: translateY(-4px) scale(1);
-  }
-}
-
-@layer utilities {
-  .ds-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: var(--surface-3) var(--surface-1);
-  }
-
-  .ds-scrollbar::-webkit-scrollbar {
-    width: 7px;
-    height: 7px;
-  }
-
-  .ds-scrollbar::-webkit-scrollbar-track {
-    background: var(--surface-1);
-  }
-
-  .ds-scrollbar::-webkit-scrollbar-thumb {
-    background: var(--surface-3);
-    border-radius: 999px;
-  }
-
-  .ds-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: var(--surface-4);
-  }
-
-  .animate-typing-dot {
-    animation: typing-dot 1.4s infinite ease-in-out;
-  }
-
-  /* Responsive flex direction utilities with proper specificity */
-  .flex-col-to-row {
-    flex-direction: column;
-    @media (min-width: 1024px) {
-      flex-direction: row;
-    }
-  }
-
-  .flex-col-to-row-md {
-    flex-direction: column;
-    @media (min-width: 768px) {
-      flex-direction: row;
-    }
-  }
-
-  /* Panel Layout animations - LEFT side */
-  .animate-panel-enter {
-    animation: panel-enter 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  .animate-panel-exit {
-    animation: panel-exit 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
-  }
-
-  /* Panel Layout animations - RIGHT side */
-  .animate-panel-enter-right {
-    animation: panel-enter-right 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  .animate-panel-exit-right {
-    animation: panel-exit-right 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
-  }
-}
-
-/* Panel enter/exit animations - LEFT side */
-@keyframes panel-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes panel-exit {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-}
-
-/* Panel enter/exit animations - RIGHT side */
-@keyframes panel-enter-right {
-  from {
-    opacity: 0;
-    transform: translateX(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes panel-exit-right {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(10px);
-  }
-}
+/**
+ * =========================================
+ * SKALAR DESIGN SYSTEM - NEW TOKEN SYSTEM
+ * =========================================
+ *
+ * Importable theme: token definitions (:root / .dark) + @theme mapping.
+ * Sin `@import "tailwindcss"` a propósito, para que un consumidor pueda
+ * importar este archivo DESPUÉS de su propio `@import "tailwindcss"` sin
+ * duplicarlo. El build del DS lo importa vía globals.css.
+ */
+
+/* ========================================= */
+/* BASE TOKENS - LIGHT THEME (DEFAULT)      */
+/* ========================================= */
+
+:root {
+  /* Fonts */
+  --font-inter: 'Inter', sans-serif;
+  --font-space-grotesk: 'Space Grotesk', sans-serif;
+
+  /* ========================================= */
+  /* PRIMITIVE COLORS                         */
+  /* ========================================= */
+
+  --black: #000;
+  --white: #FFF;
+  --black-uniform: #000;
+  --white-uniform: #FFF;
+
+  /* ========================================= */
+  /* SURFACE TOKENS                           */
+  /* Use for backgrounds, cards, containers   */
+  /* ========================================= */
+
+  --surface-bg: #F9F9FA;
+  --surface-1: #F0F1F5;
+  --surface-2: #E8EBF0;
+  --surface-3: #D8DDE5;
+  --surface-4: #CACFDB;
+
+  /* ========================================= */
+  /* TEXT EMPHASIS TOKENS                     */
+  /* Use for text colors based on hierarchy   */
+  /* ========================================= */
+
+  --disabled: #BFC6D4;
+  --placeholder: #667085;
+  --low-em: #5A606B;
+  --med-em: #2F343C;
+  --high-em: #22262E;
+
+  /* ========================================= */
+  /* BRAND TOKENS                             */
+  /* Primary brand colors                     */
+  /* ========================================= */
+
+  --brand-primary-main: #0A0F15;
+  --brand-primary-main-special: #0A0F15;
+
+  --brand-primary-accent-special: #191E25;
+  --brand-primary-accent-3: #262C35;
+
+  --brand-secondary-main: #2563EB;
+  --brand-secondary-accent-3: #3B76F6;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - WARNING         */
+  /* ========================================= */
+
+  --warning-em: #FB6E0A;
+  --warning-main: #FC9E0B;
+  --warning-accent-3: #FDC82C;
+  --warning-accent-1: #FEDE82;
+  --warning-accent-0: #FFF8E1;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - SUCCESS         */
+  /* ========================================= */
+
+  --success-em: #054F31;
+  --success-main: #039855;
+  --success-accent-3: #32D583;
+  --success-accent-2: #A6F4C5;
+  --success-accent-1: #ECFDF3;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - INFO            */
+  /* ========================================= */
+
+  --info-em: #3362C2;
+  --info-main: #3A85E8;
+  --info-accent-3: #50A3F9;
+  --info-accent-2: #94C9FC;
+  --info-accent-1: #E4F2FE;
+
+  /* ========================================= */
+  /* SEMANTIC STATUS TOKENS - DANGER          */
+  /* ========================================= */
+
+  --danger-em: #DE2424;
+  --danger-main: #F03D3D;
+  --danger-accent-3: #FF7373;
+  --danger-accent-2: #FFE0E0;
+  --danger-accent-1: #FEF2F2;
+
+  /* ========================================= */
+  /* SPACING SYSTEM                           */
+  /* ========================================= */
+
+  --spacing-0: 0px;
+  --spacing-1: 2px;
+  --spacing-2: 4px;
+  --spacing-3: 6px;
+  --spacing-4: 8px;
+  --spacing-5: 10px;
+  --spacing-6: 12px;
+  --spacing-7: 14px;
+  --spacing-8: 16px;
+  --spacing-9: 20px;
+  --spacing-10: 24px;
+  --spacing-11: 28px;
+  --spacing-12: 32px;
+  --spacing-13: 40px;
+  --spacing-14: 48px;
+  --spacing-15: 64px;
+  --spacing-16: 80px;
+  --spacing-17: 96px;
+  --spacing-18: 128px;
+  --spacing-19: 180px;
+  --spacing-20: 192px;
+  --spacing-21: 224px;
+  --spacing-22: 256px;
+  --spacing-23: 320px;
+  --spacing-24: 384px;
+  --spacing-25: 480px;
+  --spacing-26: 560px;
+
+  /* ========================================= */
+  /* SHADOW SYSTEM                            */
+  /* Use for elevations and depth             */
+  /* ========================================= */
+
+  --shadow-e1: 0px 4px 12px -2px rgba(0, 0, 0, 0.08);
+  --shadow-e2: 0px 8px 24px -4px rgba(0, 0, 0, 0.12);
+  --shadow-e3: 0px 12px 32px -6px rgba(0, 0, 0, 0.16);
+
+  /* ========================================= */
+  /* LAYOUT SYSTEM                            */
+  /* Container, Sidebar, and Navbar tokens    */
+  /* ========================================= */
+
+  /* Container Max Widths */
+  --layout-container-max-width: 1400px;
+  --layout-container-narrow: 896px;
+  --layout-container-medium: 1152px;
+  --layout-container-wide: 1600px;
+
+  /* Container Padding (responsive) */
+  --layout-container-padding-mobile: 16px;
+  --layout-container-padding-tablet: 24px;
+  --layout-container-padding-desktop: 32px;
+  --layout-container-padding-desktop-lg: 48px;
+
+  /* Sidebar Dimensions */
+  --layout-sidebar-width: 280px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-sidebar-navigation: 240px;
+
+  /* Navbar Dimensions */
+  --layout-navbar-header-height: 60px;
+  --layout-navbar-tabs-height: 48px;
+  --layout-navbar-total-height: 108px;
+
+}
+
+/* ========================================= */
+/* DARK MODE THEME                          */
+/* ========================================= */
+
+.dark {
+  /* Primitive colors - INVERTED */
+  --black: #FFF;
+  --white: #000;
+
+  /* Surface tokens - Dark backgrounds */
+  --surface-bg: #0A0A0A;
+  --surface-1: #131313;
+  --surface-2: #1F1F1F;
+  --surface-3: #292929;
+  --surface-4: #333333;
+
+  /* Text emphasis - Lighter for dark backgrounds */
+  --disabled: #565656;
+  --placeholder: #C4C4C4;
+  --low-em: #7E7E7E;
+  --med-em: #C3C3C3;
+  --high-em: #FFF;
+
+  /* Brand tokens - Adjusted for dark mode */
+  --brand-primary-main: #3B414C;
+  --brand-primary-main-special: #1F1F1F;
+
+  --brand-primary-accent-special: #333333;
+  --brand-primary-accent-3: #262C35;
+
+  --brand-secondary-main: #2563EB;
+  --brand-secondary-accent-3: #3B76F6;
+
+  /* Warning tokens - Dark mode variants */
+  --warning-em: #FED350;
+  --warning-main: #FDBE12;
+  --warning-accent-3: #FDB10C;
+  --warning-accent-1: #FEDE82;
+  --warning-accent-0: #3A2A06;
+
+  /* Success tokens - Dark mode variants */
+  --success-em: #6CE9A6;
+  --success-main: #12B76A;
+  --success-accent-3: #039855;
+  --success-accent-2: #054F31;
+  --success-accent-1: #053321;
+
+  /* Info tokens - Dark mode variants */
+  --info-em: #6CB3FA;
+  --info-main: #3C93F7;
+  --info-accent-3: #3A85E8;
+  --info-accent-2: #2C43A3;
+  --info-accent-1: #3560C2;
+
+  /* Danger tokens - Dark mode variants */
+  --danger-em: #FFA9A9;
+  --danger-main: #F03D3D;
+  --danger-accent-3: #DE2424;
+  --danger-accent-2: #3F1E1E;
+  --danger-accent-1: #371C1C;
+
+  /* Canvas tokens - Dark mode */
+  --canvas-container-bg: #0a0a0a;
+  --canvas-bg: #111111;
+  --canvas-grid-bg: #0f0f0f;
+  --canvas-grid-line: #2a2a2a;
+  --canvas-grid-center-line: #181818;
+}
+
+/* ========================================= */
+/* TAILWIND THEME INTEGRATION               */
+/* ========================================= */
+
+@theme inline {
+  /* Font families */
+  --font-family-inter: var(--font-inter);
+  --font-family-space-grotesk: var(--font-space-grotesk);
+
+  /* Primitive colors */
+  --color-black: var(--black);
+  --color-white: var(--white);
+
+  --color-black-uniform: var(--black-uniform);
+  --color-white-uniform: var(--white-uniform);
+
+
+  /* Surface colors */
+  --color-surface-bg: var(--surface-bg);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-surface-4: var(--surface-4);
+
+  /* Text emphasis */
+  --color-disabled: var(--disabled);
+  --color-placeholder: var(--placeholder);
+  --color-low-em: var(--low-em);
+  --color-med-em: var(--med-em);
+  --color-high-em: var(--high-em);
+
+  /* Brand colors */
+  --color-brand-primary-main: var(--brand-primary-main);
+  --color-brand-primary-main-special: var(--brand-primary-main-special);
+  --color-brand-primary-accent-special: var(--brand-primary-accent-special);
+  --color-brand-primary-accent-3: var(--brand-primary-accent-3);
+  --color-brand-secondary-main: var(--brand-secondary-main);
+  --color-brand-secondary-accent-3: var(--brand-secondary-accent-3);
+
+  /* Warning colors */
+  --color-warning-em: var(--warning-em);
+  --color-warning-main: var(--warning-main);
+  --color-warning-accent-3: var(--warning-accent-3);
+  --color-warning-accent-1: var(--warning-accent-1);
+  --color-warning-accent-0: var(--warning-accent-0);
+
+  /* Success colors */
+  --color-success-em: var(--success-em);
+  --color-success-main: var(--success-main);
+  --color-success-accent-3: var(--success-accent-3);
+  --color-success-accent-2: var(--success-accent-2);
+  --color-success-accent-1: var(--success-accent-1);
+
+  /* Info colors */
+  --color-info-em: var(--info-em);
+  --color-info-main: var(--info-main);
+  --color-info-accent-3: var(--info-accent-3);
+  --color-info-accent-2: var(--info-accent-2);
+  --color-info-accent-1: var(--info-accent-1);
+
+  /* Danger colors */
+  --color-danger-em: var(--danger-em);
+  --color-danger-main: var(--danger-main);
+  --color-danger-accent-3: var(--danger-accent-3);
+  --color-danger-accent-2: var(--danger-accent-2);
+  --color-danger-accent-1: var(--danger-accent-1);
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 2px;
+  --spacing-2: 4px;
+  --spacing-3: 6px;
+  --spacing-4: 8px;
+  --spacing-5: 10px;
+  --spacing-6: 12px;
+  --spacing-7: 14px;
+  --spacing-8: 16px;
+  --spacing-9: 20px;
+  --spacing-10: 24px;
+  --spacing-11: 28px;
+  --spacing-12: 32px;
+  --spacing-13: 40px;
+  --spacing-14: 48px;
+  --spacing-15: 64px;
+  --spacing-16: 80px;
+  --spacing-17: 96px;
+  --spacing-18: 128px;
+  --spacing-19: 180px;
+  --spacing-20: 192px;
+  --spacing-21: 224px;
+  --spacing-22: 256px;
+  --spacing-23: 320px;
+  --spacing-24: 384px;
+  --spacing-25: 480px;
+  --spacing-26: 560px;
+
+  /* Border Radius */
+  --radius-0: 0px;
+  --radius-1: 2px;
+  --radius-2: 4px;
+  --radius-3: 6px;
+  --radius-4: 8px;
+  --radius-5: 10px;
+  --radius-6: 12px;
+  --radius-7: 14px;
+  --radius-8: 16px;
+  --radius-9: 20px;
+  --radius-10: 24px;
+  --radius-11: 28px;
+  --radius-12: 32px;
+  --radius-13: 40px;
+  --radius-14: 48px;
+  --radius-15: 64px;
+  --radius-16: 80px;
+  --radius-17: 96px;
+  --radius-18: 128px;
+  --radius-19: 180px;
+  --radius-20: 192px;
+  --radius-21: 224px;
+  --radius-22: 256px;
+  --radius-23: 320px;
+  --radius-24: 384px;
+  --radius-25: 480px;
+  --radius-26: 560px;
+
+  /* Shadows */
+  --shadow-e1: var(--shadow-e1);
+  --shadow-e2: var(--shadow-e2);
+  --shadow-e3: var(--shadow-e3);
+
+  /* ========================================= */
+  /* LAYOUT SYSTEM                            */
+  /* ========================================= */
+
+  /* Container Max Widths */
+  --max-width-container: var(--layout-container-max-width);
+  --max-width-container-narrow: var(--layout-container-narrow);
+  --max-width-container-medium: var(--layout-container-medium);
+  --max-width-container-wide: var(--layout-container-wide);
+
+  /* Container Padding */
+  --padding-container-mobile: var(--layout-container-padding-mobile);
+  --padding-container-tablet: var(--layout-container-padding-tablet);
+  --padding-container-desktop: var(--layout-container-padding-desktop);
+  --padding-container-desktop-lg: var(--layout-container-padding-desktop-lg);
+
+  /* Sidebar Widths */
+  --width-sidebar: var(--layout-sidebar-width);
+  --width-sidebar-collapsed: var(--layout-sidebar-collapsed);
+  --width-sidebar-nav: var(--layout-sidebar-navigation);
+
+  /* Navbar Heights */
+  --height-navbar: var(--layout-navbar-total-height);
+  --height-navbar-header: var(--layout-navbar-header-height);
+  --height-navbar-tabs: var(--layout-navbar-tabs-height);
+
+}
+
+/* ========================================= */
+/* BASE STYLES                              */
+/* ========================================= */
+
+body {
+  background: var(--surface-bg);
+  color: var(--high-em);
+  font-family: var(--font-inter), system-ui, sans-serif;
+}
+
+/* ========================================= */
+/* ANIMATIONS                               */
+/* ========================================= */
+
+@keyframes typing-dot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: translateY(0) scale(0.8);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-4px) scale(1);
+  }
+}
+
+@layer utilities {
+  .ds-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--surface-3) var(--surface-1);
+  }
+
+  .ds-scrollbar::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-track {
+    background: var(--surface-1);
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-thumb {
+    background: var(--surface-3);
+    border-radius: 999px;
+  }
+
+  .ds-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: var(--surface-4);
+  }
+
+  .animate-typing-dot {
+    animation: typing-dot 1.4s infinite ease-in-out;
+  }
+
+  /* Responsive flex direction utilities with proper specificity */
+  .flex-col-to-row {
+    flex-direction: column;
+    @media (min-width: 1024px) {
+      flex-direction: row;
+    }
+  }
+
+  .flex-col-to-row-md {
+    flex-direction: column;
+    @media (min-width: 768px) {
+      flex-direction: row;
+    }
+  }
+
+  /* Panel Layout animations - LEFT side */
+  .animate-panel-enter {
+    animation: panel-enter 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .animate-panel-exit {
+    animation: panel-exit 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+  }
+
+  /* Panel Layout animations - RIGHT side */
+  .animate-panel-enter-right {
+    animation: panel-enter-right 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  .animate-panel-exit-right {
+    animation: panel-exit-right 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
+  }
+}
+
+/* Panel enter/exit animations - LEFT side */
+@keyframes panel-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+/* Panel enter/exit animations - RIGHT side */
+@keyframes panel-enter-right {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes panel-exit-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+}