@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/utils/themeConfigs.js

@@ -0,0 +1,1483 @@
+const designTokens = {
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+  },
+  borderRadius: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '20px',
+    round: '50%',
+  },
+  borderWidth: {
+    none: '0px',
+    thin: '1px',
+    thick: '2px',
+  },
+  shadows: {
+    none: 'none',
+    light: '0 2px 4px rgba(0,0,0,0.1)',
+    medium: '0 4px 8px rgba(0,0,0,0.15)',
+    dark: '0 2px 6px rgba(0,0,0,0.3)',
+    soft: '0 4px 20px rgba(0,0,0,0.05)',
+  },
+  glass: {
+    backdropFilter: 'blur(10px)',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    border: '1px solid rgba(255, 255, 255, 0.18)',
+    boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
+  },
+};
+
+export const themeConfigs = {
+  DEFAULT: {
+    design: {
+      ...designTokens,
+    },
+    dashboard: {
+      backgroundColor: '#ffffff',
+      fontFamily: 'Roboto, sans-serif',
+      primaryColor: '#2f3e46',
+      secondaryColor: '#f50057',
+      textColor: '#333333',
+      borderColor: '#e0e0e0',
+      borderWidth: '1px',
+      borderRadius: '8px',
+      padding: '16px',
+      margin: '0px',
+      gap: '12px',
+      boxShadow: designTokens.shadows.light,
+      headerBgColor: '#f5f5f5',
+      headerTextColor: '#333333',
+      cardBgColor: '#ffffff',
+      cardTextColor: '#333333',
+      cardShadow: designTokens.shadows.light,
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'DEFAULT',
+      axis: {
+        backgroundColor: '#ffffff',
+        axisColor: '#666666',
+        gridColor: '#e0e0e0',
+        labelColor: '#333333',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#333333',
+
+        fillColors: [
+          '#8884d8',
+          '#82ca9d',
+          '#ffc658',
+          '#ff8042',
+          '#d0ed57',
+          '#a4de6c',
+          '#83a6ed',
+          '#8dd1e1',
+          '#0088FE',
+          '#00C49F',
+        ],
+      },
+      pie: {
+        backgroundColor: '#ffffff',
+        labelColor: '#333333',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#333333',
+        fillColors: [
+          '#0088FE',
+          '#00C49F',
+          '#FFBB28',
+          '#FF8042',
+          '#8884d8',
+          '#82ca9d',
+          '#ffc658',
+          '#d0ed57',
+          '#a4de6c',
+          '#83a6ed',
+        ],
+      },
+      flow: {
+        backgroundColor: '#ffffff',
+        linkColor: '#2f3e46',
+        nodeColor: '#f50057',
+        labelColor: '#333333',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#333333',
+        fillColors: [
+          '#8884d8',
+          '#82ca9d',
+          '#ffc658',
+          '#ff8042',
+          '#d0ed57',
+          '#a4de6c',
+          '#83a6ed',
+          '#8dd1e1',
+          '#0088FE',
+          '#00C49F',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#ffffff',
+      headerBg: '#ffffff',
+      headerHoverBg: '#f8fafc',
+      headerText: '#1e293b',
+      borderColor: '#e2e8f0',
+      sectionTitleColor: '#2f3e46',
+      tileBg: '#ffffff',
+      tileBorderColor: '#e2e8f0',
+      tileText: '#1e293b',
+      tileSubText: '#94a3b8',
+      tagBg: '#eff6ff',
+      tagText: '#3b82f6',
+      filterPillBg: '#ffffff',
+      filterPillBorder: '#e2e8f0',
+      filterPillText: '#475569',
+      filterPillHoverBg: '#f0fdf4',
+      filterPillHoverBorder: '#86efac',
+      filterPillHoverText: '#16a34a',
+      filterIconColor: '#94a3b8',
+      filterIconHoverColor: '#16a34a',
+      alertBg: '#eff6ff',
+      alertText: '#1d4ed8',
+      iconPalette: [
+        { bg: '#eff6ff', color: '#3b82f6', hoverBg: '#3b82f6', hoverColor: '#ffffff' },
+        { bg: '#eef2ff', color: '#6366f1', hoverBg: '#6366f1', hoverColor: '#ffffff' },
+        { bg: '#faf5ff', color: '#a855f7', hoverBg: '#a855f7', hoverColor: '#ffffff' },
+        { bg: '#fdf2f8', color: '#ec4899', hoverBg: '#ec4899', hoverColor: '#ffffff' },
+        { bg: '#fff1f2', color: '#f43f5e', hoverBg: '#f43f5e', hoverColor: '#ffffff' },
+        { bg: '#fff7ed', color: '#f97316', hoverBg: '#f97316', hoverColor: '#ffffff' },
+        { bg: '#f0fdf4', color: '#22c55e', hoverBg: '#22c55e', hoverColor: '#ffffff' },
+        { bg: '#f1f5f9', color: '#64748b', hoverBg: '#475569', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+
+  DARK: {
+    design: {
+      ...designTokens,
+    },
+    dashboard: {
+      backgroundColor: '#0f0f13',
+      fontFamily: 'Roboto, sans-serif',
+      primaryColor: '#90caf9',
+      secondaryColor: '#f48fb1',
+      textColor: '#e0e0e0',
+      borderColor: '#424242',
+      borderWidth: '1px',
+      borderRadius: '8px',
+      padding: '16px',
+      margin: '0px',
+      gap: '12px',
+      boxShadow: designTokens.shadows.dark,
+      headerBgColor: '#1f1f1f',
+      headerTextColor: '#ffffff',
+      cardBgColor: '#1f1f1f',
+      cardTextColor: '#e0e0e0',
+      cardShadow: designTokens.shadows.medium,
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'DARK',
+      axis: {
+        backgroundColor: '#1f1f1f',
+        axisColor: '#90caf9',
+        gridColor: '#424242',
+        labelColor: '#e0e0e0',
+        tooltipBgColor: '#1e1e1e',
+        tooltipTextColor: '#ffffff',
+
+        fillColors: [
+          '#90caf9',
+          '#f48fb1',
+          '#ce93d8',
+          '#ffcc80',
+          '#81c784',
+          '#fff176',
+          '#ffb74d',
+          '#e57373',
+          '#ba68c8',
+          '#4fc3f7',
+        ],
+      },
+      pie: {
+        backgroundColor: '#1f1f1f',
+        labelColor: '#e0e0e0',
+        tooltipBgColor: '#1e1e1e',
+        tooltipTextColor: '#ffffff',
+
+        fillColors: [
+          '#90caf9',
+          '#f48fb1',
+          '#ce93d8',
+          '#ffab91',
+          '#81c784',
+          '#fff176',
+          '#ffb74d',
+          '#e57373',
+          '#ba68c8',
+          '#4fc3f7',
+        ],
+      },
+      flow: {
+        backgroundColor: '#1f1f1f',
+        linkColor: '#90caf9',
+        nodeColor: '#f48fb1',
+        labelColor: '#e0e0e0',
+        tooltipBgColor: '#1e1e1e',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#90caf9',
+          '#f48fb1',
+          '#ce93d8',
+          '#ffcc80',
+          '#81c784',
+          '#fff176',
+          '#ffb74d',
+          '#e57373',
+          '#ba68c8',
+          '#4fc3f7',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#1f1f1f',
+      headerBg: '#1f1f1f',
+      headerHoverBg: '#2a2a2a',
+      headerText: '#e0e0e0',
+      borderColor: '#424242',
+      sectionTitleColor: '#90caf9',
+      tileBg: '#2a2a2a',
+      tileBorderColor: '#424242',
+      tileText: '#e0e0e0',
+      tileSubText: '#757575',
+      tagBg: 'rgba(144,202,249,0.15)',
+      tagText: '#90caf9',
+      filterPillBg: '#2a2a2a',
+      filterPillBorder: '#424242',
+      filterPillText: '#bdbdbd',
+      filterPillHoverBg: 'rgba(144,202,249,0.1)',
+      filterPillHoverBorder: '#90caf9',
+      filterPillHoverText: '#90caf9',
+      filterIconColor: '#757575',
+      filterIconHoverColor: '#90caf9',
+      alertBg: 'rgba(144,202,249,0.1)',
+      alertText: '#90caf9',
+      iconPalette: [
+        { bg: 'rgba(144,202,249,0.15)', color: '#90caf9', hoverBg: '#90caf9', hoverColor: '#0f0f13' },
+        { bg: 'rgba(244,143,177,0.15)', color: '#f48fb1', hoverBg: '#f48fb1', hoverColor: '#0f0f13' },
+        { bg: 'rgba(206,147,216,0.15)', color: '#ce93d8', hoverBg: '#ce93d8', hoverColor: '#0f0f13' },
+        { bg: 'rgba(255,204,128,0.15)', color: '#ffcc80', hoverBg: '#ffcc80', hoverColor: '#0f0f13' },
+        { bg: 'rgba(128,203,196,0.15)', color: '#80cbc4', hoverBg: '#80cbc4', hoverColor: '#0f0f13' },
+        { bg: 'rgba(165,214,167,0.15)', color: '#a5d6a7', hoverBg: '#a5d6a7', hoverColor: '#0f0f13' },
+        { bg: 'rgba(239,154,154,0.15)', color: '#ef9a9a', hoverBg: '#ef9a9a', hoverColor: '#0f0f13' },
+        { bg: 'rgba(255,255,255,0.08)', color: '#bdbdbd', hoverBg: '#616161', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+
+  NATURE: {
+    design: {
+      ...designTokens,
+    },
+    dashboard: {
+      backgroundColor: '#e0f7fa',
+      fontFamily: 'Roboto, sans-serif',
+      primaryColor: '#00796b',
+      secondaryColor: '#004d40',
+      textColor: '#004d40',
+      borderColor: '#b2dfdb',
+      borderWidth: '1px',
+      borderRadius: '8px',
+      padding: '16px',
+      margin: '0px',
+      gap: '12px',
+      boxShadow: designTokens.shadows.light,
+      headerBgColor: '#004d40',
+      headerTextColor: '#ffffff',
+      cardBgColor: '#ffffff',
+      cardTextColor: '#004d40',
+      cardShadow: designTokens.shadows.light,
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'NATURE',
+      axis: {
+        backgroundColor: '#e0f7fa',
+        axisColor: '#00796b',
+        gridColor: '#b2dfdb',
+        labelColor: '#004d40',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#004d40',
+        fillColors: [
+          '#004d40',
+          '#00695c',
+          '#00796b',
+          '#00897b',
+          '#009688',
+          '#26a69a',
+          '#4db6ac',
+          '#80cbc4',
+          '#b2dfdb',
+          '#e0f2f1',
+        ],
+      },
+      pie: {
+        backgroundColor: '#e0f7fa',
+        labelColor: '#004d40',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#004d40',
+        fillColors: [
+          '#004d40',
+          '#00695c',
+          '#00796b',
+          '#00897b',
+          '#009688',
+          '#26a69a',
+          '#4db6ac',
+          '#80cbc4',
+          '#b2dfdb',
+          '#e0f2f1',
+        ],
+      },
+      flow: {
+        backgroundColor: '#e0f7fa',
+        linkColor: '#00796b',
+        nodeColor: '#004d40',
+        labelColor: '#004d40',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#004d40',
+        fillColors: [
+          '#004d40',
+          '#00695c',
+          '#00796b',
+          '#00897b',
+          '#009688',
+          '#26a69a',
+          '#4db6ac',
+          '#80cbc4',
+          '#b2dfdb',
+          '#e0f2f1',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#ffffff',
+      headerBg: '#ffffff',
+      headerHoverBg: '#e0f7fa',
+      headerText: '#004d40',
+      borderColor: '#b2dfdb',
+      sectionTitleColor: '#00796b',
+      tileBg: '#ffffff',
+      tileBorderColor: '#b2dfdb',
+      tileText: '#004d40',
+      tileSubText: '#4db6ac',
+      tagBg: '#e0f2f1',
+      tagText: '#00796b',
+      filterPillBg: '#ffffff',
+      filterPillBorder: '#b2dfdb',
+      filterPillText: '#004d40',
+      filterPillHoverBg: '#e0f2f1',
+      filterPillHoverBorder: '#00796b',
+      filterPillHoverText: '#004d40',
+      filterIconColor: '#4db6ac',
+      filterIconHoverColor: '#00796b',
+      alertBg: '#e0f7fa',
+      alertText: '#004d40',
+      iconPalette: [
+        { bg: '#e0f2f1', color: '#004d40', hoverBg: '#004d40', hoverColor: '#ffffff' },
+        { bg: '#b2dfdb', color: '#00796b', hoverBg: '#00796b', hoverColor: '#ffffff' },
+        { bg: '#e0f7fa', color: '#0097a7', hoverBg: '#0097a7', hoverColor: '#ffffff' },
+        { bg: '#e8f5e9', color: '#388e3c', hoverBg: '#388e3c', hoverColor: '#ffffff' },
+        { bg: '#f1f8e9', color: '#689f38', hoverBg: '#689f38', hoverColor: '#ffffff' },
+        { bg: '#fff8e1', color: '#f9a825', hoverBg: '#f9a825', hoverColor: '#ffffff' },
+        { bg: '#fce4ec', color: '#c2185b', hoverBg: '#c2185b', hoverColor: '#ffffff' },
+        { bg: '#ede7f6', color: '#512da8', hoverBg: '#512da8', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  OCEAN: {
+    design: {
+      ...designTokens,
+    },
+    dashboard: {
+      backgroundColor: '#e1f5fe',
+      fontFamily: 'Roboto, sans-serif',
+      primaryColor: '#0288d1',
+      secondaryColor: '#01579b',
+      textColor: '#01579b',
+      borderColor: '#b3e5fc',
+      borderWidth: '1px',
+      borderRadius: '8px',
+      padding: '16px',
+      margin: '0px',
+      gap: '12px',
+      boxShadow: designTokens.shadows.light,
+      headerBgColor: '#01579b',
+      headerTextColor: '#ffffff',
+      cardBgColor: '#ffffff',
+      cardTextColor: '#01579b',
+      cardShadow: designTokens.shadows.light,
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'OCEAN',
+      axis: {
+        backgroundColor: '#e1f5fe',
+        axisColor: '#0288d1',
+        gridColor: '#b3e5fc',
+        labelColor: '#01579b',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#01579b',
+        fillColors: [
+          '#012a4a',
+          '#013a63',
+          '#01497c',
+          '#014f86',
+          '#2a6f97',
+          '#2c7da0',
+          '#468faf',
+          '#61a5c2',
+          '#89c2d9',
+          '#a9d6e5',
+        ],
+      },
+      pie: {
+        backgroundColor: '#e1f5fe',
+        labelColor: '#01579b',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#01579b',
+        fillColors: [
+          '#012a4a',
+          '#013a63',
+          '#01497c',
+          '#014f86',
+          '#2a6f97',
+          '#2c7da0',
+          '#468faf',
+          '#61a5c2',
+          '#89c2d9',
+          '#a9d6e5',
+        ],
+      },
+      flow: {
+        backgroundColor: '#e1f5fe',
+        linkColor: '#0288d1',
+        nodeColor: '#01579b',
+        labelColor: '#01579b',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#01579b',
+        fillColors: [
+          '#012a4a',
+          '#013a63',
+          '#01497c',
+          '#014f86',
+          '#2a6f97',
+          '#2c7da0',
+          '#468faf',
+          '#61a5c2',
+          '#89c2d9',
+          '#a9d6e5',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#ffffff',
+      headerBg: '#ffffff',
+      headerHoverBg: '#e1f5fe',
+      headerText: '#01579b',
+      borderColor: '#b3e5fc',
+      sectionTitleColor: '#0288d1',
+      tileBg: '#ffffff',
+      tileBorderColor: '#b3e5fc',
+      tileText: '#01579b',
+      tileSubText: '#4fc3f7',
+      tagBg: '#e1f5fe',
+      tagText: '#0288d1',
+      filterPillBg: '#ffffff',
+      filterPillBorder: '#b3e5fc',
+      filterPillText: '#01579b',
+      filterPillHoverBg: '#e1f5fe',
+      filterPillHoverBorder: '#0288d1',
+      filterPillHoverText: '#01579b',
+      filterIconColor: '#4fc3f7',
+      filterIconHoverColor: '#0288d1',
+      alertBg: '#e1f5fe',
+      alertText: '#01579b',
+      iconPalette: [
+        { bg: '#e1f5fe', color: '#0288d1', hoverBg: '#0288d1', hoverColor: '#ffffff' },
+        { bg: '#b3e5fc', color: '#01579b', hoverBg: '#01579b', hoverColor: '#ffffff' },
+        { bg: '#e3f2fd', color: '#1565c0', hoverBg: '#1565c0', hoverColor: '#ffffff' },
+        { bg: '#e0f7fa', color: '#0097a7', hoverBg: '#0097a7', hoverColor: '#ffffff' },
+        { bg: '#ede7f6', color: '#5e35b1', hoverBg: '#5e35b1', hoverColor: '#ffffff' },
+        { bg: '#f3e5f5', color: '#7b1fa2', hoverBg: '#7b1fa2', hoverColor: '#ffffff' },
+        { bg: '#e8eaf6', color: '#3949ab', hoverBg: '#3949ab', hoverColor: '#ffffff' },
+        { bg: '#f1f5f9', color: '#64748b', hoverBg: '#475569', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  VINTAGE: {
+    design: {
+      ...designTokens,
+    },
+    dashboard: {
+      backgroundColor: '#fdf6e3',
+      fontFamily: '"Courier New", Courier, monospace',
+      primaryColor: '#cb4b16',
+      secondaryColor: '#859900',
+      textColor: '#657b83',
+      borderColor: '#d33682',
+      borderWidth: '2px',
+      borderRadius: '4px',
+      padding: '16px',
+      margin: '0px',
+      gap: '12px',
+      boxShadow: designTokens.shadows.light,
+      headerBgColor: '#eee8d5',
+      headerTextColor: '#cb4b16',
+      cardBgColor: '#fdf6e3',
+      cardTextColor: '#657b83',
+      cardShadow: '2px 2px 0px #d33682',
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'VINTAGE',
+      axis: {
+        backgroundColor: '#fdf6e3',
+        axisColor: '#657b83',
+        gridColor: '#93a1a1',
+        labelColor: '#586e75',
+        tooltipBgColor: '#eee8d5',
+        tooltipTextColor: '#657b83',
+        fillColors: [
+          '#d33682',
+          '#cb4b16',
+          '#b58900',
+          '#859900',
+          '#2aa198',
+          '#268bd2',
+          '#6c71c4',
+          '#586e75',
+          '#93a1a1',
+          '#073642',
+        ],
+      },
+      pie: {
+        backgroundColor: '#fdf6e3',
+        labelColor: '#657b83',
+        tooltipBgColor: '#eee8d5',
+        tooltipTextColor: '#657b83',
+        fillColors: [
+          '#d33682',
+          '#cb4b16',
+          '#b58900',
+          '#859900',
+          '#2aa198',
+          '#268bd2',
+          '#6c71c4',
+          '#586e75',
+          '#93a1a1',
+          '#073642',
+        ],
+      },
+      flow: {
+        backgroundColor: '#fdf6e3',
+        linkColor: '#d33682',
+        nodeColor: '#cb4b16',
+        labelColor: '#657b83',
+        tooltipBgColor: '#eee8d5',
+        tooltipTextColor: '#657b83',
+        fillColors: [
+          '#cb4b16',
+          '#dc322f',
+          '#d33682',
+          '#6c71c4',
+          '#268bd2',
+          '#2aa198',
+          '#859900',
+          '#b58900',
+          '#586e75',
+          '#93a1a1',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#fdf6e3',
+      headerBg: '#fdf6e3',
+      headerHoverBg: '#eee8d5',
+      headerText: '#657b83',
+      borderColor: '#93a1a1',
+      sectionTitleColor: '#cb4b16',
+      tileBg: '#fdf6e3',
+      tileBorderColor: '#93a1a1',
+      tileText: '#586e75',
+      tileSubText: '#93a1a1',
+      tagBg: '#eee8d5',
+      tagText: '#b58900',
+      filterPillBg: '#fdf6e3',
+      filterPillBorder: '#93a1a1',
+      filterPillText: '#657b83',
+      filterPillHoverBg: '#eee8d5',
+      filterPillHoverBorder: '#cb4b16',
+      filterPillHoverText: '#cb4b16',
+      filterIconColor: '#93a1a1',
+      filterIconHoverColor: '#cb4b16',
+      alertBg: '#eee8d5',
+      alertText: '#cb4b16',
+      iconPalette: [
+        { bg: '#fce4ec', color: '#d33682', hoverBg: '#d33682', hoverColor: '#ffffff' },
+        { bg: '#fff3e0', color: '#cb4b16', hoverBg: '#cb4b16', hoverColor: '#ffffff' },
+        { bg: '#fff8e1', color: '#b58900', hoverBg: '#b58900', hoverColor: '#ffffff' },
+        { bg: '#f1f8e9', color: '#859900', hoverBg: '#859900', hoverColor: '#ffffff' },
+        { bg: '#e0f7fa', color: '#2aa198', hoverBg: '#2aa198', hoverColor: '#ffffff' },
+        { bg: '#e8eaf6', color: '#6c71c4', hoverBg: '#6c71c4', hoverColor: '#ffffff' },
+        { bg: '#e3f2fd', color: '#268bd2', hoverBg: '#268bd2', hoverColor: '#ffffff' },
+        { bg: '#eee8d5', color: '#586e75', hoverBg: '#586e75', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  CYBERPUNK: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#0a0a0f',
+      backgroundImage: 'linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)',
+      fontFamily: 'Orbitron, sans-serif',
+      primaryColor: '#00f2ff',
+      secondaryColor: '#ff00ff',
+      textColor: '#ffffff',
+      borderColor: 'rgba(0, 242, 255, 0.3)',
+      borderWidth: '1px',
+      borderRadius: '4px',
+      padding: '24px',
+      margin: '0px',
+      gap: '20px',
+      boxShadow: '0 0 15px rgba(0, 242, 255, 0.2)',
+      headerBgColor: 'rgba(26, 26, 46, 0.8)',
+      headerTextColor: '#00f2ff',
+      cardBgColor: 'rgba(26, 26, 46, 0.4)',
+      backdropFilter: 'blur(12px) brightness(1.2) saturate(150%)',
+      cardTextColor: '#ffffff',
+      cardShadow: '0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 242, 255, 0.1)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'CYBERPUNK',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: '#00f2ff',
+        gridColor: 'rgba(0, 242, 255, 0.1)',
+        labelColor: 'rgba(255, 255, 255, 0.8)',
+        tooltipBgColor: 'rgba(10, 10, 15, 0.95)',
+        tooltipTextColor: '#00f2ff',
+        fillColors: [
+          '#00f2ff',
+          '#ff00ff',
+          '#39ff14',
+          '#ffff00',
+          '#ff4d4d',
+          '#7b2cff',
+          '#ff8c00',
+          '#00ced1',
+          '#ff1493',
+          '#adff2f',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(10, 10, 15, 0.95)',
+        tooltipTextColor: '#00f2ff',
+        fillColors: [
+          '#00f2ff',
+          '#ff00ff',
+          '#39ff14',
+          '#ffff00',
+          '#ff4d4d',
+          '#7b2cff',
+          '#ff8c00',
+          '#00ced1',
+          '#ff1493',
+          '#adff2f',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(0, 242, 255, 0.5)',
+        nodeColor: '#ff00ff',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(10, 10, 15, 0.95)',
+        tooltipTextColor: '#00f2ff',
+        fillColors: [
+          '#00f2ff',
+          '#ff00ff',
+          '#39ff14',
+          '#ffff00',
+          '#ff4d4d',
+          '#7b2cff',
+          '#ff8c00',
+          '#00ced1',
+          '#ff1493',
+          '#adff2f',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#0a0a0f',
+      headerBg: 'rgba(26, 26, 46, 0.8)',
+      headerHoverBg: 'rgba(26, 26, 46, 1)',
+      headerText: '#00f2ff',
+      borderColor: 'rgba(0, 242, 255, 0.3)',
+      sectionTitleColor: '#00f2ff',
+      tileBg: 'rgba(26, 26, 46, 0.6)',
+      tileBorderColor: 'rgba(0, 242, 255, 0.3)',
+      tileText: '#ffffff',
+      tileSubText: 'rgba(0, 242, 255, 0.6)',
+      tagBg: 'rgba(0, 242, 255, 0.1)',
+      tagText: '#00f2ff',
+      filterPillBg: 'rgba(26, 26, 46, 0.6)',
+      filterPillBorder: 'rgba(0, 242, 255, 0.3)',
+      filterPillText: '#ffffff',
+      filterPillHoverBg: 'rgba(0, 242, 255, 0.1)',
+      filterPillHoverBorder: '#00f2ff',
+      filterPillHoverText: '#00f2ff',
+      filterIconColor: 'rgba(0, 242, 255, 0.5)',
+      filterIconHoverColor: '#00f2ff',
+      alertBg: 'rgba(0, 242, 255, 0.05)',
+      alertText: '#00f2ff',
+      iconPalette: [
+        { bg: 'rgba(0,242,255,0.15)', color: '#00f2ff', hoverBg: '#00f2ff', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(255,0,255,0.15)', color: '#ff00ff', hoverBg: '#ff00ff', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(57,255,20,0.15)', color: '#39ff14', hoverBg: '#39ff14', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(255,255,0,0.15)', color: '#ffff00', hoverBg: '#ffff00', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(255,77,77,0.15)', color: '#ff4d4d', hoverBg: '#ff4d4d', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(0,242,255,0.1)', color: '#80f9ff', hoverBg: '#80f9ff', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(255,0,255,0.1)', color: '#ff80ff', hoverBg: '#ff80ff', hoverColor: '#0a0a0f' },
+        { bg: 'rgba(255,255,255,0.08)', color: '#ffffff', hoverBg: '#ffffff', hoverColor: '#0a0a0f' },
+      ],
+    },
+  },
+  SUNSET: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#2d1b2d',
+      backgroundImage: 'linear-gradient(135deg, #4b1248 0%, #f0c27b 100%)',
+      fontFamily: 'Inter, sans-serif',
+      primaryColor: '#ffffff',
+      secondaryColor: 'rgba(255, 255, 255, 0.7)',
+      textColor: '#ffffff',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      borderWidth: '1px',
+      borderRadius: '20px',
+      padding: '24px',
+      margin: '0px',
+      gap: '24px',
+      boxShadow: 'none',
+      headerBgColor: 'rgba(75, 18, 72, 0.3)',
+      headerTextColor: '#ffffff',
+      cardBgColor: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(20px) saturate(160%)',
+      cardTextColor: '#ffffff',
+      cardShadow: '0 8px 32px 0 rgba(75, 18, 72, 0.3)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'SUNSET',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: 'rgba(255, 255, 255, 0.7)',
+        gridColor: 'rgba(255, 255, 255, 0.1)',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(75, 18, 72, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#ff9a9e',
+          '#fad0c4',
+          '#fbc2eb',
+          '#a18cd1',
+          '#ffecd2',
+          '#fcb69f',
+          '#ff7eb3',
+          '#f78ca0',
+          '#fe9a8b',
+          '#f83600',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(75, 18, 72, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#ff9a9e',
+          '#fad0c4',
+          '#fbc2eb',
+          '#a18cd1',
+          '#ffecd2',
+          '#fcb69f',
+          '#ff7eb3',
+          '#f78ca0',
+          '#fe9a8b',
+          '#f83600',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(255, 255, 255, 0.5)',
+        nodeColor: '#ff9a9e',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(75, 18, 72, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#ff9a9e',
+          '#fad0c4',
+          '#fbc2eb',
+          '#a18cd1',
+          '#ffecd2',
+          '#fcb69f',
+          '#ff7eb3',
+          '#f78ca0',
+          '#fe9a8b',
+          '#f83600',
+        ],
+      },
+    },
+    drawer: {
+      bg: 'rgba(75, 18, 72, 0.85)',
+      headerBg: 'rgba(75, 18, 72, 0.6)',
+      headerHoverBg: 'rgba(75, 18, 72, 0.8)',
+      headerText: '#ffffff',
+      borderColor: 'rgba(255,255,255,0.2)',
+      sectionTitleColor: '#fad0c4',
+      tileBg: 'rgba(255,255,255,0.1)',
+      tileBorderColor: 'rgba(255,255,255,0.2)',
+      tileText: '#ffffff',
+      tileSubText: 'rgba(255,255,255,0.6)',
+      tagBg: 'rgba(255,154,158,0.2)',
+      tagText: '#ff9a9e',
+      filterPillBg: 'rgba(255,255,255,0.1)',
+      filterPillBorder: 'rgba(255,255,255,0.2)',
+      filterPillText: '#ffffff',
+      filterPillHoverBg: 'rgba(255,154,158,0.2)',
+      filterPillHoverBorder: '#ff9a9e',
+      filterPillHoverText: '#ff9a9e',
+      filterIconColor: 'rgba(255,255,255,0.5)',
+      filterIconHoverColor: '#ff9a9e',
+      alertBg: 'rgba(255,154,158,0.1)',
+      alertText: '#ff9a9e',
+      iconPalette: [
+        { bg: 'rgba(255,154,158,0.2)', color: '#ff9a9e', hoverBg: '#ff9a9e', hoverColor: '#4b1248' },
+        { bg: 'rgba(250,208,196,0.2)', color: '#fad0c4', hoverBg: '#fad0c4', hoverColor: '#4b1248' },
+        { bg: 'rgba(251,194,235,0.2)', color: '#fbc2eb', hoverBg: '#fbc2eb', hoverColor: '#4b1248' },
+        { bg: 'rgba(161,140,209,0.2)', color: '#a18cd1', hoverBg: '#a18cd1', hoverColor: '#4b1248' },
+        { bg: 'rgba(255,236,210,0.2)', color: '#ffecd2', hoverBg: '#ffecd2', hoverColor: '#4b1248' },
+        { bg: 'rgba(255,255,255,0.15)', color: '#ffffff', hoverBg: '#ffffff', hoverColor: '#4b1248' },
+        { bg: 'rgba(255,154,158,0.15)', color: '#ffb3b6', hoverBg: '#ffb3b6', hoverColor: '#4b1248' },
+        { bg: 'rgba(161,140,209,0.15)', color: '#c7bde8', hoverBg: '#c7bde8', hoverColor: '#4b1248' },
+      ],
+    },
+  },
+  FLAT: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#ecf0f1',
+      fontFamily: 'Roboto, sans-serif',
+      primaryColor: '#e74c3c',
+      secondaryColor: '#3498db',
+      textColor: '#2c3e50',
+      borderColor: '#bdc3c7',
+      borderWidth: '0px',
+      borderRadius: '0px',
+      padding: '20px',
+      margin: '0px',
+      gap: '20px',
+      boxShadow: 'none',
+      headerBgColor: '#34495e',
+      headerTextColor: '#ecf0f1',
+      cardBgColor: '#ffffff',
+      cardTextColor: '#2c3e50',
+      cardShadow: 'none',
+      cardPadding: '16px',
+    },
+    charts: {
+      colorScheme: 'FLAT',
+      axis: {
+        backgroundColor: '#ecf0f1',
+        axisColor: '#95a5a6',
+        gridColor: '#bdc3c7',
+        labelColor: '#7f8c8d',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#e74c3c',
+          '#3498db',
+          '#f1c40f',
+          '#2ecc71',
+          '#9b59b6',
+          '#34495e',
+          '#1abc9c',
+          '#d35400',
+          '#7f8c8d',
+          '#2c3e50',
+        ],
+      },
+      pie: {
+        backgroundColor: '#ecf0f1',
+        labelColor: '#2c3e50',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#e74c3c',
+          '#3498db',
+          '#f1c40f',
+          '#2ecc71',
+          '#9b59b6',
+          '#34495e',
+          '#1abc9c',
+          '#d35400',
+          '#7f8c8d',
+          '#2c3e50',
+        ],
+      },
+      flow: {
+        backgroundColor: '#ecf0f1',
+        linkColor: '#3498db',
+        nodeColor: '#e74c3c',
+        labelColor: '#2c3e50',
+        tooltipBgColor: '#ffffff',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#1abc9c',
+          '#3498db',
+          '#9b59b6',
+          '#34495e',
+          '#f1c40f',
+          '#e74c3c',
+          '#2ecc71',
+          '#d35400',
+          '#7f8c8d',
+          '#2c3e50',
+        ],
+      },
+    },
+    drawer: {
+      bg: '#ecf0f1',
+      headerBg: '#ffffff',
+      headerHoverBg: '#ecf0f1',
+      headerText: '#2c3e50',
+      borderColor: '#bdc3c7',
+      sectionTitleColor: '#e74c3c',
+      tileBg: '#ffffff',
+      tileBorderColor: '#bdc3c7',
+      tileText: '#2c3e50',
+      tileSubText: '#95a5a6',
+      tagBg: '#eaf4fb',
+      tagText: '#2980b9',
+      filterPillBg: '#ffffff',
+      filterPillBorder: '#bdc3c7',
+      filterPillText: '#2c3e50',
+      filterPillHoverBg: '#fef9e7',
+      filterPillHoverBorder: '#f1c40f',
+      filterPillHoverText: '#d68910',
+      filterIconColor: '#95a5a6',
+      filterIconHoverColor: '#e74c3c',
+      alertBg: '#eaf4fb',
+      alertText: '#2980b9',
+      iconPalette: [
+        { bg: '#fdecea', color: '#e74c3c', hoverBg: '#e74c3c', hoverColor: '#ffffff' },
+        { bg: '#eaf4fb', color: '#3498db', hoverBg: '#3498db', hoverColor: '#ffffff' },
+        { bg: '#fef9e7', color: '#f39c12', hoverBg: '#f39c12', hoverColor: '#ffffff' },
+        { bg: '#eafaf1', color: '#2ecc71', hoverBg: '#2ecc71', hoverColor: '#ffffff' },
+        { bg: '#f5eef8', color: '#9b59b6', hoverBg: '#9b59b6', hoverColor: '#ffffff' },
+        { bg: '#e8f8f5', color: '#1abc9c', hoverBg: '#1abc9c', hoverColor: '#ffffff' },
+        { bg: '#eaecee', color: '#34495e', hoverBg: '#34495e', hoverColor: '#ffffff' },
+        { bg: '#f0f3f4', color: '#95a5a6', hoverBg: '#7f8c8d', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  GLASS: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#2c3e50',
+      backgroundImage: 'radial-gradient(circle at top left, #537895 0%, #09203f 100%)',
+      fontFamily: 'Inter, sans-serif',
+      primaryColor: '#ffffff',
+      secondaryColor: 'rgba(255,255,255,0.7)',
+      textColor: '#ffffff',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      borderWidth: '1px',
+      borderRadius: '16px',
+      padding: '24px',
+      margin: '0px',
+      gap: '24px',
+      boxShadow: 'none',
+      headerBgColor: 'rgba(255, 255, 255, 0.1)',
+      headerTextColor: '#ffffff',
+      cardBgColor: 'rgba(255, 255, 255, 0.1)',
+      backdropFilter: 'blur(16px) saturate(140%)',
+      cardTextColor: '#ffffff',
+      cardShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.2)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'GLASS',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: 'rgba(255,255,255,0.7)',
+        gridColor: 'rgba(255,255,255,0.15)',
+        labelColor: 'rgba(255,255,255,0.9)',
+        tooltipBgColor: 'rgba(20, 30, 40, 0.95)',
+        tooltipTextColor: '#ffffff',
+        // Vibrant palette to stand out against mid-tone blue
+        fillColors: [
+          '#48dbfb',
+          '#ff9f43',
+          '#1dd1a1',
+          '#5f27cd',
+          '#ff6b6b',
+          '#c56cf0',
+          '#7d5fff',
+          '#32ff7e',
+          '#ff3838',
+          '#18dcff',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: 'rgba(255,255,255,0.9)',
+        tooltipBgColor: 'rgba(20, 30, 40, 0.95)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#48dbfb',
+          '#ff9f43',
+          '#1dd1a1',
+          '#5f27cd',
+          '#ff6b6b',
+          '#c56cf0',
+          '#7d5fff',
+          '#32ff7e',
+          '#ff3838',
+          '#18dcff',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(255,255,255,0.7)',
+        nodeColor: '#ffffff',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(20, 30, 40, 0.95)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#48dbfb',
+          '#ff9f43',
+          '#1dd1a1',
+          '#5f27cd',
+          '#ff6b6b',
+          '#c56cf0',
+          '#7d5fff',
+          '#32ff7e',
+          '#ff3838',
+          '#18dcff',
+        ],
+      },
+    },
+    drawer: {
+      bg: 'rgba(9, 32, 63, 0.9)',
+      headerBg: 'rgba(255,255,255,0.08)',
+      headerHoverBg: 'rgba(255,255,255,0.13)',
+      headerText: '#ffffff',
+      borderColor: 'rgba(255,255,255,0.15)',
+      sectionTitleColor: '#48dbfb',
+      tileBg: 'rgba(255,255,255,0.08)',
+      tileBorderColor: 'rgba(255,255,255,0.15)',
+      tileText: '#ffffff',
+      tileSubText: 'rgba(255,255,255,0.55)',
+      tagBg: 'rgba(72,219,251,0.15)',
+      tagText: '#48dbfb',
+      filterPillBg: 'rgba(255,255,255,0.08)',
+      filterPillBorder: 'rgba(255,255,255,0.15)',
+      filterPillText: '#ffffff',
+      filterPillHoverBg: 'rgba(72,219,251,0.15)',
+      filterPillHoverBorder: '#48dbfb',
+      filterPillHoverText: '#48dbfb',
+      filterIconColor: 'rgba(255,255,255,0.5)',
+      filterIconHoverColor: '#48dbfb',
+      alertBg: 'rgba(72,219,251,0.08)',
+      alertText: '#48dbfb',
+      iconPalette: [
+        { bg: 'rgba(72,219,251,0.2)', color: '#48dbfb', hoverBg: '#48dbfb', hoverColor: '#09203f' },
+        { bg: 'rgba(255,159,67,0.2)', color: '#ff9f43', hoverBg: '#ff9f43', hoverColor: '#09203f' },
+        { bg: 'rgba(29,209,161,0.2)', color: '#1dd1a1', hoverBg: '#1dd1a1', hoverColor: '#09203f' },
+        { bg: 'rgba(95,39,205,0.2)', color: '#a29bfe', hoverBg: '#a29bfe', hoverColor: '#09203f' },
+        { bg: 'rgba(255,107,107,0.2)', color: '#ff6b6b', hoverBg: '#ff6b6b', hoverColor: '#09203f' },
+        { bg: 'rgba(255,255,255,0.12)', color: '#ffffff', hoverBg: '#ffffff', hoverColor: '#09203f' },
+        { bg: 'rgba(72,219,251,0.12)', color: '#a0eef9', hoverBg: '#a0eef9', hoverColor: '#09203f' },
+        { bg: 'rgba(255,159,67,0.12)', color: '#ffc68a', hoverBg: '#ffc68a', hoverColor: '#09203f' },
+      ],
+    },
+  },
+  FROST: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#e0eafc',
+      backgroundImage: 'linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%)',
+      fontFamily: 'Inter, sans-serif',
+      primaryColor: '#2c3e50',
+      secondaryColor: '#34495e',
+      textColor: '#2c3e50',
+      borderColor: 'rgba(255, 255, 255, 0.4)',
+      borderWidth: '1px',
+      borderRadius: '12px',
+      padding: '24px',
+      margin: '0px',
+      gap: '20px',
+      boxShadow: 'none',
+      headerBgColor: 'rgba(255, 255, 255, 0.5)',
+      headerTextColor: '#2c3e50',
+      cardBgColor: 'rgba(255, 255, 255, 0.3)',
+      backdropFilter: 'blur(15px) saturate(120%)',
+      cardTextColor: '#2c3e50',
+      cardShadow: '0 4px 30px rgba(0, 0, 0, 0.05)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'FROST',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: '#2c3e50',
+        gridColor: 'rgba(44, 62, 80, 0.1)',
+        labelColor: '#2c3e50',
+        tooltipBgColor: 'rgba(255, 255, 255, 0.95)',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#4facfe',
+          '#00f2fe',
+          '#38f9d7',
+          '#43e97b',
+          '#a8edea',
+          '#cfdef3',
+          '#e0eafc',
+          '#2c3e50',
+          '#70a1ff',
+          '#5352ed',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: '#2c3e50',
+        tooltipBgColor: 'rgba(255, 255, 255, 0.95)',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#4facfe',
+          '#00f2fe',
+          '#38f9d7',
+          '#43e97b',
+          '#a8edea',
+          '#cfdef3',
+          '#e0eafc',
+          '#2c3e50',
+          '#70a1ff',
+          '#5352ed',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(44, 62, 80, 0.3)',
+        nodeColor: '#4facfe',
+        labelColor: '#2c3e50',
+        tooltipBgColor: 'rgba(255, 255, 255, 0.95)',
+        tooltipTextColor: '#2c3e50',
+        fillColors: [
+          '#4facfe',
+          '#00f2fe',
+          '#38f9d7',
+          '#43e97b',
+          '#a8edea',
+          '#cfdef3',
+          '#e0eafc',
+          '#2c3e50',
+          '#70a1ff',
+          '#5352ed',
+        ],
+      },
+    },
+    drawer: {
+      bg: 'rgba(255,255,255,0.6)',
+      headerBg: 'rgba(255,255,255,0.5)',
+      headerHoverBg: 'rgba(255,255,255,0.7)',
+      headerText: '#2c3e50',
+      borderColor: 'rgba(255,255,255,0.4)',
+      sectionTitleColor: '#2c3e50',
+      tileBg: 'rgba(255,255,255,0.4)',
+      tileBorderColor: 'rgba(255,255,255,0.4)',
+      tileText: '#2c3e50',
+      tileSubText: '#6b7c93',
+      tagBg: 'rgba(79,172,254,0.15)',
+      tagText: '#2c6acc',
+      filterPillBg: 'rgba(255,255,255,0.4)',
+      filterPillBorder: 'rgba(255,255,255,0.4)',
+      filterPillText: '#2c3e50',
+      filterPillHoverBg: 'rgba(79,172,254,0.15)',
+      filterPillHoverBorder: '#4facfe',
+      filterPillHoverText: '#2c6acc',
+      filterIconColor: '#6b7c93',
+      filterIconHoverColor: '#4facfe',
+      alertBg: 'rgba(79,172,254,0.1)',
+      alertText: '#2c6acc',
+      iconPalette: [
+        { bg: 'rgba(79,172,254,0.2)', color: '#2c6acc', hoverBg: '#4facfe', hoverColor: '#ffffff' },
+        { bg: 'rgba(0,242,254,0.2)', color: '#0097a7', hoverBg: '#00f2fe', hoverColor: '#ffffff' },
+        { bg: 'rgba(56,249,215,0.2)', color: '#009688', hoverBg: '#38f9d7', hoverColor: '#ffffff' },
+        { bg: 'rgba(67,233,123,0.2)', color: '#2e7d32', hoverBg: '#43e97b', hoverColor: '#ffffff' },
+        { bg: 'rgba(168,237,234,0.2)', color: '#00838f', hoverBg: '#a8edea', hoverColor: '#ffffff' },
+        { bg: 'rgba(44,62,80,0.1)', color: '#2c3e50', hoverBg: '#2c3e50', hoverColor: '#ffffff' },
+        { bg: 'rgba(107,124,147,0.15)', color: '#546e7a', hoverBg: '#546e7a', hoverColor: '#ffffff' },
+        { bg: 'rgba(255,255,255,0.4)', color: '#34495e', hoverBg: '#34495e', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  AURORA: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#0f172a',
+      backgroundImage:
+        'radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%)',
+      fontFamily: 'Outfit, sans-serif',
+      primaryColor: '#ffffff',
+      secondaryColor: 'rgba(255, 255, 255, 0.6)',
+      textColor: '#ffffff',
+      borderColor: 'rgba(255, 255, 255, 0.1)',
+      borderWidth: '1px',
+      borderRadius: '24px',
+      padding: '24px',
+      margin: '0px',
+      gap: '24px',
+      boxShadow: 'none',
+      headerBgColor: 'rgba(15, 23, 42, 0.3)',
+      headerTextColor: '#ffffff',
+      cardBgColor: 'rgba(255, 255, 255, 0.03)',
+      backdropFilter: 'blur(40px) saturate(180%)',
+      cardTextColor: '#ffffff',
+      cardShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.3)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'AURORA',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: 'rgba(255, 255, 255, 0.5)',
+        gridColor: 'rgba(255, 255, 255, 0.05)',
+        labelColor: 'rgba(255, 255, 255, 0.8)',
+        tooltipBgColor: 'rgba(15, 23, 42, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#a855f7',
+          '#ec4899',
+          '#3b82f6',
+          '#10b981',
+          '#f59e0b',
+          '#ef4444',
+          '#14b8a6',
+          '#6366f1',
+          '#8b5cf6',
+          '#d946ef',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(15, 23, 42, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#a855f7',
+          '#ec4899',
+          '#3b82f6',
+          '#10b981',
+          '#f59e0b',
+          '#ef4444',
+          '#14b8a6',
+          '#6366f1',
+          '#8b5cf6',
+          '#d946ef',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(168, 85, 247, 0.4)',
+        nodeColor: '#a855f7',
+        labelColor: '#ffffff',
+        tooltipBgColor: 'rgba(15, 23, 42, 0.9)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#a855f7',
+          '#ec4899',
+          '#3b82f6',
+          '#10b981',
+          '#f59e0b',
+          '#ef4444',
+          '#14b8a6',
+          '#6366f1',
+          '#8b5cf6',
+          '#d946ef',
+        ],
+      },
+    },
+    drawer: {
+      bg: 'rgba(15, 23, 42, 0.9)',
+      headerBg: 'rgba(15, 23, 42, 0.5)',
+      headerHoverBg: 'rgba(15, 23, 42, 0.7)',
+      headerText: '#ffffff',
+      borderColor: 'rgba(255,255,255,0.1)',
+      sectionTitleColor: '#a855f7',
+      tileBg: 'rgba(255,255,255,0.03)',
+      tileBorderColor: 'rgba(255,255,255,0.1)',
+      tileText: '#ffffff',
+      tileSubText: 'rgba(255,255,255,0.5)',
+      tagBg: 'rgba(168,85,247,0.15)',
+      tagText: '#a855f7',
+      filterPillBg: 'rgba(255,255,255,0.05)',
+      filterPillBorder: 'rgba(255,255,255,0.1)',
+      filterPillText: '#ffffff',
+      filterPillHoverBg: 'rgba(168,85,247,0.15)',
+      filterPillHoverBorder: '#a855f7',
+      filterPillHoverText: '#a855f7',
+      filterIconColor: 'rgba(255,255,255,0.4)',
+      filterIconHoverColor: '#a855f7',
+      alertBg: 'rgba(168,85,247,0.08)',
+      alertText: '#a855f7',
+      iconPalette: [
+        { bg: 'rgba(168,85,247,0.2)', color: '#a855f7', hoverBg: '#a855f7', hoverColor: '#0f172a' },
+        { bg: 'rgba(236,72,153,0.2)', color: '#ec4899', hoverBg: '#ec4899', hoverColor: '#0f172a' },
+        { bg: 'rgba(59,130,246,0.2)', color: '#3b82f6', hoverBg: '#3b82f6', hoverColor: '#0f172a' },
+        { bg: 'rgba(16,185,129,0.2)', color: '#10b981', hoverBg: '#10b981', hoverColor: '#0f172a' },
+        { bg: 'rgba(245,158,11,0.2)', color: '#f59e0b', hoverBg: '#f59e0b', hoverColor: '#0f172a' },
+        { bg: 'rgba(239,68,68,0.2)', color: '#ef4444', hoverBg: '#ef4444', hoverColor: '#0f172a' },
+        { bg: 'rgba(20,184,166,0.2)', color: '#14b8a6', hoverBg: '#14b8a6', hoverColor: '#0f172a' },
+        { bg: 'rgba(255,255,255,0.06)', color: '#94a3b8', hoverBg: '#64748b', hoverColor: '#ffffff' },
+      ],
+    },
+  },
+  EMERALD: {
+    design: { ...designTokens },
+    dashboard: {
+      backgroundColor: '#064e3b',
+      backgroundImage: 'linear-gradient(135deg, #064e3b 0%, #022c22 100%)',
+      fontFamily: 'Inter, sans-serif',
+      primaryColor: '#10b981',
+      secondaryColor: '#34d399',
+      textColor: '#ecfdf5',
+      borderColor: 'rgba(16, 185, 129, 0.2)',
+      borderWidth: '1px',
+      borderRadius: '12px',
+      padding: '24px',
+      margin: '0px',
+      gap: '20px',
+      boxShadow: 'none',
+      headerBgColor: 'rgba(2, 44, 34, 0.8)',
+      headerTextColor: '#10b981',
+      cardBgColor: 'rgba(6, 78, 59, 0.4)',
+      backdropFilter: 'blur(12px)',
+      cardTextColor: '#ecfdf5',
+      cardShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+      cardPadding: '20px',
+    },
+    charts: {
+      colorScheme: 'EMERALD',
+      axis: {
+        backgroundColor: 'transparent',
+        axisColor: '#10b981',
+        gridColor: 'rgba(16, 185, 129, 0.1)',
+        labelColor: '#34d399',
+        tooltipBgColor: 'rgba(2, 44, 34, 0.95)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#10b981',
+          '#34d399',
+          '#6ee7b7',
+          '#a7f3d0',
+          '#d1fae5',
+          '#059669',
+          '#047857',
+          '#065f46',
+          '#064e3b',
+          '#ecfdf5',
+        ],
+      },
+      pie: {
+        backgroundColor: 'transparent',
+        labelColor: '#ecfdf5',
+        tooltipBgColor: 'rgba(2, 44, 34, 0.95)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#10b981',
+          '#059669',
+          '#047857',
+          '#065f46',
+          '#064e3b',
+          '#34d399',
+          '#6ee7b7',
+          '#a7f3d0',
+          '#d1fae5',
+          '#ecfdf5',
+        ],
+      },
+      flow: {
+        backgroundColor: 'transparent',
+        linkColor: 'rgba(16, 185, 129, 0.4)',
+        nodeColor: '#10b981',
+        labelColor: '#ecfdf5',
+        tooltipBgColor: 'rgba(2, 44, 34, 0.95)',
+        tooltipTextColor: '#ffffff',
+        fillColors: [
+          '#10b981',
+          '#34d399',
+          '#6ee7b7',
+          '#059669',
+          '#047857',
+          '#065f46',
+          '#064e3b',
+          '#a7f3d0',
+          '#d1fae5',
+          '#ecfdf5',
+        ],
+      },
+    },
+    drawer: {
+      bg: 'rgba(2, 44, 34, 0.95)',
+      headerBg: 'rgba(6, 78, 59, 0.6)',
+      headerHoverBg: 'rgba(6, 78, 59, 0.8)',
+      headerText: '#10b981',
+      borderColor: 'rgba(16,185,129,0.25)',
+      sectionTitleColor: '#34d399',
+      tileBg: 'rgba(6, 78, 59, 0.4)',
+      tileBorderColor: 'rgba(16,185,129,0.2)',
+      tileText: '#ecfdf5',
+      tileSubText: '#6ee7b7',
+      tagBg: 'rgba(16,185,129,0.15)',
+      tagText: '#34d399',
+      filterPillBg: 'rgba(6,78,59,0.4)',
+      filterPillBorder: 'rgba(16,185,129,0.2)',
+      filterPillText: '#ecfdf5',
+      filterPillHoverBg: 'rgba(16,185,129,0.15)',
+      filterPillHoverBorder: '#10b981',
+      filterPillHoverText: '#10b981',
+      filterIconColor: 'rgba(16,185,129,0.5)',
+      filterIconHoverColor: '#10b981',
+      alertBg: 'rgba(16,185,129,0.08)',
+      alertText: '#34d399',
+      iconPalette: [
+        { bg: 'rgba(16,185,129,0.2)', color: '#10b981', hoverBg: '#10b981', hoverColor: '#022c22' },
+        { bg: 'rgba(52,211,153,0.2)', color: '#34d399', hoverBg: '#34d399', hoverColor: '#022c22' },
+        { bg: 'rgba(110,231,183,0.2)', color: '#6ee7b7', hoverBg: '#6ee7b7', hoverColor: '#022c22' },
+        { bg: 'rgba(5,150,105,0.2)', color: '#059669', hoverBg: '#059669', hoverColor: '#022c22' },
+        { bg: 'rgba(167,243,208,0.15)', color: '#a7f3d0', hoverBg: '#a7f3d0', hoverColor: '#022c22' },
+        { bg: 'rgba(209,250,229,0.1)', color: '#d1fae5', hoverBg: '#d1fae5', hoverColor: '#022c22' },
+        { bg: 'rgba(4,120,87,0.3)', color: '#047857', hoverBg: '#047857', hoverColor: '#ecfdf5' },
+        { bg: 'rgba(6,95,70,0.3)', color: '#065f46', hoverBg: '#065f46', hoverColor: '#ecfdf5' },
+      ],
+    },
+  },
+};