@qwickapps/react-framework 1.4.8 → 1.5.0

package/src/components/QwickApp.css

@@ -1,385 +1,42 @@
 /**
  * Global Theme Variables - Modular Palette-based Color System
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
+ *
  * This file implements a modular two-tier color system:
- * 1. Palette Variables: Define the core color values (--palette-*) in separate files
+ * 1. Palette Variables: Define the core color values (--palette-*) loaded on-demand from separate files
  * 2. Theme Variables: Semantic colors that reference palette values (--theme-*)
- * 
+ *
  * Benefits:
  * - Modular palette files for easy organization
+ * - On-demand loading to reduce bundle size
  * - Easy theme customization by switching palettes
  * - Consistent color usage across components
  * - Reduced duplication and easier maintenance
  * - Semantic naming for better understanding
- * 
- * Available palettes:
- * - default: Classic blue and neutral (original QwickApps palette)
+ *
+ * Available palettes (loaded on-demand):
+ * - default: Classic blue and neutral (inlined below for immediate availability)
  * - winter: Cool blues, icy whites, and frosty grays
  * - autumn: Warm oranges, golden yellows, and earthy browns
  * - spring: Fresh greens, soft pinks, and bright yellows
  * - ocean: Deep blues, aqua teals, and seafoam greens
+ * - cosmic: Modern purple gradient for creative and tech brands
+ *
+ * Note: Only the default palette is inlined for immediate availability.
+ * Other palettes are loaded dynamically when selected to reduce initial bundle size.
  */
 
-/* All available color palettes - inlined to avoid build issues */
-/**
- * Autumn Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
- * Warm oranges, golden yellows, and earthy browns - inspired by fall foliage
- */
-
-/* ===== AUTUMN PALETTE - LIGHT THEME ===== */
-html[data-palette="autumn"]:not([data-theme="dark"]), 
-html[data-palette="autumn"][data-theme="light"] {
-  /* Primary palette - Burnt orange */
-  --palette-primary-main: #ea580c;
-  --palette-primary-light: #fb923c;
-  --palette-primary-dark: #c2410c;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Rich amber */
-  --palette-secondary-main: #b45309;
-  --palette-secondary-light: #d97706;
-  --palette-secondary-dark: #92400e;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Cream */
-  --palette-surface-main: #fffbeb;
-  --palette-surface-variant: #fef3c7;
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #451a03;
-
-  /* Background palette - Warm ivory */
-  --palette-background-main: #fefce8;
-  --palette-background-dark: #fef3c7;
-  --palette-background-overlay: rgba(254, 252, 232, 0.95);
-  --palette-on-background: #78350f;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(254, 252, 232, 0.98);
-  --palette-header-bg-end: rgba(254, 252, 232, 0.95);
-  --palette-header-collapsed-bg-start: rgba(254, 252, 232, 0.99);
-  --palette-header-collapsed-bg-end: rgba(254, 252, 232, 0.96);
-  
-  /* Text palette - Rich brown */
-  --palette-text-primary: #451a03;
-  --palette-text-secondary: #78350f;
-  --palette-text-disabled: rgba(69, 26, 3, 0.38);
-  --palette-text-inverted: #ffffff;
-  
-  /* Border palette - Tan */
-  --palette-border-main: #d4d4aa;
-  --palette-border-light: rgba(69, 26, 3, 0.12);
-  --palette-border-lighter: rgba(69, 26, 3, 0.05);
-  --palette-border-medium: #a8a29e;
-  
-  /* Success palette - Forest green */
-  --palette-success-main: #16a34a;
-  --palette-success-light: #dcfce7;
-  --palette-success-dark: #14532d;
-  --palette-success-border: #bbf7d0;
-  
-  /* Error palette - Crimson */
-  --palette-error-main: #dc2626;
-  --palette-error-light: #fee2e2;
-  --palette-error-dark: #7f1d1d;
-  --palette-error-border: #fecaca;
-  
-  /* Warning palette - Amber */
-  --palette-warning-main: #f59e0b;
-  --palette-warning-light: #fef3c7;
-  --palette-warning-dark: #78350f;
-  --palette-warning-border: #fde68a;
-  
-  /* Info palette - Teal */
-  --palette-info-main: #0891b2;
-  --palette-info-light: #e6fffa;
-  --palette-info-dark: #164e63;
-  --palette-on-info: #ffffff;
-  --palette-info-border: #67e8f9;
-  
-  /* Accent palette - Deep crimson */
-  --palette-accent-main: #dc2626;
-  --palette-accent-light: #f87171;
-  --palette-accent-dark: #991b1b;
-  --palette-on-accent: #ffffff;
-
-  /* Control palette - Walnut */
-  --palette-control-main: #451a03;
-  --palette-control-light: #78350f;
-  --palette-control-text: #fef3c7;
-  --palette-control-border: #92400e;
-}
-
-/* ===== AUTUMN PALETTE - DARK THEME ===== */
-html[data-palette="autumn"][data-theme="dark"] {
-  /* Primary palette - Glowing ember */
-  --palette-primary-main: #fb923c;
-  --palette-primary-light: #fdba74;
-  --palette-primary-dark: #ea580c;
-  --palette-on-primary: #1c1917;
-
-  /* Secondary palette - Golden glow */
-  --palette-secondary-main: #fbbf24;
-  --palette-secondary-light: #fcd34d;
-  --palette-secondary-dark: #f59e0b;
-  --palette-on-secondary: #1c1917;
-
-  /* Surface palette - Dark wood */
-  --palette-surface-main: #1c1917;
-  --palette-surface-variant: #292524;
-  --palette-surface-elevated: #44403c;
-  --palette-on-surface: #fef3c7;
-
-  /* Background palette - Deep earth */
-  --palette-background-main: #0c0a09;
-  --palette-background-dark: #1c1917;
-  --palette-background-overlay: rgba(28, 25, 23, 0.95);
-  --palette-on-background: #d6d3d1;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(12, 10, 9, 0.98);
-  --palette-header-bg-end: rgba(12, 10, 9, 0.95);
-  --palette-header-collapsed-bg-start: rgba(12, 10, 9, 0.99);
-  --palette-header-collapsed-bg-end: rgba(12, 10, 9, 0.96);
-  
-  /* Text palette - Warm light */
-  --palette-text-primary: #fef3c7;
-  --palette-text-secondary: #d6d3d1;
-  --palette-text-disabled: rgba(254, 243, 199, 0.38);
-  --palette-text-inverted: #0c0a09;
-  
-  /* Border palette - Copper */
-  --palette-border-main: #78716c;
-  --palette-border-light: rgba(254, 243, 199, 0.12);
-  --palette-border-lighter: rgba(254, 243, 199, 0.05);
-  --palette-border-medium: #57534e;
-  
-  /* Success palette - Pine */
-  --palette-success-main: #4ade80;
-  --palette-success-light: #14532d;
-  --palette-success-dark: #22c55e;
-  --palette-success-border: #166534;
-  
-  /* Error palette - Fire */
-  --palette-error-main: #f87171;
-  --palette-error-light: #7f1d1d;
-  --palette-error-dark: #ef4444;
-  --palette-error-border: #991b1b;
-  
-  /* Warning palette - Harvest gold */
-  --palette-warning-main: #eab308;
-  --palette-warning-light: #78350f;
-  --palette-warning-dark: #ca8a04;
-  --palette-warning-border: #a16207;
-  
-  /* Info palette - River teal */
-  --palette-info-main: #22d3ee;
-  --palette-info-light: #164e63;
-  --palette-info-dark: #06b6d4;
-  --palette-on-info: #0c0a09;
-  --palette-info-border: #0891b2;
-  
-  /* Accent palette - Harvest crimson */
-  --palette-accent-main: #b91c1c;
-  --palette-accent-light: #dc2626;
-  --palette-accent-dark: #7f1d1d;
-  --palette-on-accent: #fef3c7;
-
-  /* Control palette - Charcoal */
-  --palette-control-main: #292524;
-  --palette-control-light: #44403c;
-  --palette-control-text: #f5f5f4;
-  --palette-control-border: #57534e;
-}
-
-
-/**
- * Cosmic Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
- * Modern purple gradient for creative and tech brands - inspired by cosmic nebulae
- */
-
-/* ===== COSMIC PALETTE - LIGHT THEME ===== */
-html[data-palette="cosmic"]:not([data-theme="dark"]), 
-html[data-palette="cosmic"][data-theme="light"] {
-  /* Primary palette - Deep cosmic purple */
-  --palette-primary-main: #8b5cf6;
-  --palette-primary-light: #a78bfa;
-  --palette-primary-dark: #7c3aed;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Violet accents */
-  --palette-secondary-main: #8b5cf6;
-  --palette-secondary-light: #c4b5fd;
-  --palette-secondary-dark: #6d28d9;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Stardust */
-  --palette-surface-main: #faf7ff;
-  --palette-surface-variant: #f3e8ff;
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #4c1d95;
-
-  /* Background palette - Galaxy mist */
-  --palette-background-main: #fef7ff;
-  --palette-background-dark: #fae8ff;
-  --palette-background-overlay: rgba(254, 247, 255, 0.95);
-  --palette-on-background: #6b21a8;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(254, 247, 255, 0.98);
-  --palette-header-bg-end: rgba(254, 247, 255, 0.95);
-  --palette-header-collapsed-bg-start: rgba(254, 247, 255, 0.99);
-  --palette-header-collapsed-bg-end: rgba(254, 247, 255, 0.96);
-  
-  /* Text palette - Deep space */
-  --palette-text-primary: #4c1d95;
-  --palette-text-secondary: #7c3aed;
-  --palette-text-disabled: rgba(76, 29, 149, 0.38);
-  --palette-text-inverted: #ffffff;
-  
-  /* Border palette - Aurora */
-  --palette-border-main: #c4b5fd;
-  --palette-border-light: rgba(76, 29, 149, 0.12);
-  --palette-border-lighter: rgba(76, 29, 149, 0.05);
-  --palette-border-medium: #a78bfa;
-  
-  /* Success palette - Emerald nebula */
-  --palette-success-main: #10b981;
-  --palette-success-light: #d1fae5;
-  --palette-success-dark: #047857;
-  --palette-success-border: #6ee7b7;
-  
-  /* Error palette - Red giant */
-  --palette-error-main: #ef4444;
-  --palette-error-light: #fee2e2;
-  --palette-error-dark: #b91c1c;
-  --palette-error-border: #fecaca;
-  
-  /* Warning palette - Solar flare */
-  --palette-warning-main: #f59e0b;
-  --palette-warning-light: #fef3c7;
-  --palette-warning-dark: #b45309;
-  --palette-warning-border: #fde68a;
-  
-  /* Info palette - Cosmic blue */
-  --palette-info-main: #3b82f6;
-  --palette-info-light: #dbeafe;
-  --palette-info-dark: #1d4ed8;
-  --palette-on-info: #ffffff;
-  --palette-info-border: #93c5fd;
-  
-  /* Accent palette - Pink nebula */
-  --palette-accent-main: #ec4899;
-  --palette-accent-light: #f472b6;
-  --palette-accent-dark: #be185d;
-  --palette-on-accent: #ffffff;
-  
-  /* Control palette - Void */
-  --palette-control-main: #1e1b4b;
-  --palette-control-light: #3730a3;
-  --palette-control-text: #e0e7ff;
-  --palette-control-border: #8b5cf6;
-}
-
-/* ===== COSMIC PALETTE - DARK THEME ===== */
-html[data-palette="cosmic"][data-theme="dark"] {
-  /* Primary palette - Neon purple */
-  --palette-primary-main: #a78bfa;
-  --palette-primary-light: #c4b5fd;
-  --palette-primary-dark: #8b5cf6;
-  --palette-on-primary: #1e1b4b;
-
-  /* Secondary palette - Electric violet */
-  --palette-secondary-main: #c4b5fd;
-  --palette-secondary-light: #ddd6fe;
-  --palette-secondary-dark: #a78bfa;
-  --palette-on-secondary: #1e1b4b;
-
-  /* Surface palette - Dark matter */
-  --palette-surface-main: #1e1b4b;
-  --palette-surface-variant: #312e81;
-  --palette-surface-elevated: #3730a3;
-  --palette-on-surface: #e0e7ff;
-
-  /* Background palette - Deep space */
-  --palette-background-main: #0f0c29;
-  --palette-background-dark: #1a1625;
-  --palette-background-overlay: rgba(15, 12, 41, 0.95);
-  --palette-on-background: #c4b5fd;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(15, 12, 41, 0.98);
-  --palette-header-bg-end: rgba(15, 12, 41, 0.95);
-  --palette-header-collapsed-bg-start: rgba(15, 12, 41, 0.99);
-  --palette-header-collapsed-bg-end: rgba(15, 12, 41, 0.96);
-  
-  /* Text palette - Starlight */
-  --palette-text-primary: #e0e7ff;
-  --palette-text-secondary: #c4b5fd;
-  --palette-text-disabled: rgba(224, 231, 255, 0.38);
-  --palette-text-inverted: #0f0c29;
-  
-  /* Border palette - Cosmic rays */
-  --palette-border-main: #4338ca;
-  --palette-border-light: rgba(224, 231, 255, 0.12);
-  --palette-border-lighter: rgba(224, 231, 255, 0.05);
-  --palette-border-medium: #312e81;
-  
-  /* Success palette - Green pulsar */
-  --palette-success-main: #34d399;
-  --palette-success-light: #047857;
-  --palette-success-dark: #10b981;
-  --palette-success-border: #065f46;
-  
-  /* Error palette - Red dwarf */
-  --palette-error-main: #f87171;
-  --palette-error-light: #b91c1c;
-  --palette-error-dark: #ef4444;
-  --palette-error-border: #991b1b;
-  
-  /* Warning palette - Orange giant */
-  --palette-warning-main: #fb7185;
-  --palette-warning-light: #881337;
-  --palette-warning-dark: #e11d48;
-  --palette-warning-border: #be123c;
-  
-  /* Info palette - Blue supergiant */
-  --palette-info-main: #60a5fa;
-  --palette-info-light: #1d4ed8;
-  --palette-info-dark: #3b82f6;
-  --palette-on-info: #0f0c29;
-  --palette-info-border: #2563eb;
-  
-  /* Accent palette - Magenta quasar */
-  --palette-accent-main: #f472b6;
-  --palette-accent-light: #f9a8d4;
-  --palette-accent-dark: #ec4899;
-  --palette-on-accent: #0f0c29;
-  
-  /* Control palette - Black hole */
-  --palette-control-main: #312e81;
-  --palette-control-light: #4338ca;
-  --palette-control-text: #f3f4f6;
-  --palette-control-border: #4338ca;
-}
+/* ===== DEFAULT PALETTE (inlined for immediate availability) ===== */
 
 /**
  * Default Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
+ *
  * Classic blue and neutral color scheme - the original QwickApps palette
  */
 
 /* ===== DEFAULT PALETTE - LIGHT THEME ===== */
-html[data-palette="default"]:not([data-theme="dark"]), 
+html[data-palette="default"]:not([data-theme="dark"]),
 html[data-palette="default"][data-theme="light"] {
   /* Primary */
   --palette-primary-main: #007bff;
@@ -549,693 +206,6 @@ html[data-palette="default"][data-theme="dark"] {
   --palette-control-border: #555;
 }
 
-
-/**
- * Ocean Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
- * Deep blues, aqua teals, and seafoam greens - inspired by ocean depths
- */
-
-/* ===== OCEAN PALETTE - LIGHT THEME ===== */
-html[data-palette="ocean"]:not([data-theme="dark"]), 
-html[data-palette="ocean"][data-theme="light"] {
-  /* Primary palette - Deep ocean */
-  --palette-primary-main: #0891b2;
-  --palette-primary-light: #22d3ee;
-  --palette-primary-dark: #164e63;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Deep teal */
-  --palette-secondary-main: #0f766e;
-  --palette-secondary-light: #14b8a6;
-  --palette-secondary-dark: #134e4a;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Sea foam */
-  --palette-surface-main: #f0fdfa;
-  --palette-surface-variant: #ccfbf1;
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #164e63;
-
-  /* Background palette - Shallow water */
-  --palette-background-main: #ecfeff;
-  --palette-background-dark: #cffafe;
-  --palette-background-overlay: rgba(236, 254, 255, 0.95);
-  --palette-on-background: #0f766e;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(236, 254, 255, 0.98);
-  --palette-header-bg-end: rgba(236, 254, 255, 0.95);
-  --palette-header-collapsed-bg-start: rgba(236, 254, 255, 0.99);
-  --palette-header-collapsed-bg-end: rgba(236, 254, 255, 0.96);
-  
-  /* Text palette - Deep sea */
-  --palette-text-primary: #164e63;
-  --palette-text-secondary: #0891b2;
-  --palette-text-disabled: rgba(22, 78, 99, 0.38);
-  --palette-text-inverted: #ffffff;
-  
-  /* Border palette - Tide line */
-  --palette-border-main: #a7f3d0;
-  --palette-border-light: rgba(22, 78, 99, 0.12);
-  --palette-border-lighter: rgba(22, 78, 99, 0.05);
-  --palette-border-medium: #67e8f9;
-  
-  /* Success palette - Kelp green */
-  --palette-success-main: #059669;
-  --palette-success-light: #d1fae5;
-  --palette-success-dark: #065f46;
-  --palette-success-border: #a7f3d0;
-  
-  /* Error palette - Coral */
-  --palette-error-main: #ef4444;
-  --palette-error-light: #fee2e2;
-  --palette-error-dark: #7f1d1d;
-  --palette-error-border: #fecaca;
-  
-  /* Warning palette - Sandy yellow */
-  --palette-warning-main: #f59e0b;
-  --palette-warning-light: #fef3c7;
-  --palette-warning-dark: #78350f;
-  --palette-warning-border: #fde68a;
-  
-  /* Info palette - Crystal blue */
-  --palette-info-main: #0ea5e9;
-  --palette-info-light: #e0f2fe;
-  --palette-info-dark: #0c4a6e;
-  --palette-on-info: #ffffff;
-  --palette-info-border: #7dd3fc;
-  
-  /* Accent palette - Coral reef */
-  --palette-accent-main: #f97316;
-  --palette-accent-light: #fb923c;
-  --palette-accent-dark: #ea580c;
-  --palette-on-accent: #ffffff;
-  
-  /* Control palette - Depth */
-  --palette-control-main: #0c4a6e;
-  --palette-control-light: #075985;
-  --palette-control-text: #cffafe;
-  --palette-control-border: #0891b2;
-}
-
-/* ===== OCEAN PALETTE - DARK THEME ===== */
-html[data-palette="ocean"][data-theme="dark"] {
-  /* Primary palette - Bioluminescent */
-  --palette-primary-main: #22d3ee;
-  --palette-primary-light: #67e8f9;
-  --palette-primary-dark: #0891b2;
-  --palette-on-primary: #0a1a1f;
-
-  /* Secondary palette - Deep current */
-  --palette-secondary-main: #5eead4;
-  --palette-secondary-light: #99f6e4;
-  --palette-secondary-dark: #14b8a6;
-  --palette-on-secondary: #0a1a1f;
-
-  /* Surface palette - Abyss */
-  --palette-surface-main: #0a1a1f;
-  --palette-surface-variant: #164e63;
-  --palette-surface-elevated: #0e7490;
-  --palette-on-surface: #cffafe;
-
-  /* Background palette - Ocean floor */
-  --palette-background-main: #020617;
-  --palette-background-dark: #0c1821;
-  --palette-background-overlay: rgba(10, 26, 31, 0.95);
-  --palette-on-background: #5eead4;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(2, 6, 23, 0.98);
-  --palette-header-bg-end: rgba(2, 6, 23, 0.95);
-  --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
-  --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
-  
-  /* Text palette - Phosphorescent */
-  --palette-text-primary: #cffafe;
-  --palette-text-secondary: #a5f3fc;
-  --palette-text-disabled: rgba(207, 250, 254, 0.38);
-  --palette-text-inverted: #020617;
-  
-  /* Border palette - Deep current */
-  --palette-border-main: #155e75;
-  --palette-border-light: rgba(207, 250, 254, 0.12);
-  --palette-border-lighter: rgba(207, 250, 254, 0.05);
-  --palette-border-medium: #0c4a6e;
-  
-  /* Success palette - Algae glow */
-  --palette-success-main: #34d399;
-  --palette-success-light: #065f46;
-  --palette-success-dark: #10b981;
-  --palette-success-border: #047857;
-  
-  /* Error palette - Red tide */
-  --palette-error-main: #f87171;
-  --palette-error-light: #7f1d1d;
-  --palette-error-dark: #ef4444;
-  --palette-error-border: #991b1b;
-  
-  /* Warning palette - Sunset reflection */
-  --palette-warning-main: #fb7185;
-  --palette-warning-light: #881337;
-  --palette-warning-dark: #e11d48;
-  --palette-warning-border: #be123c;
-  
-  /* Info palette - Electric blue */
-  --palette-info-main: #0ea5e9;
-  --palette-info-light: #0c4a6e;
-  --palette-info-dark: #38bdf8;
-  --palette-on-info: #020617;
-  --palette-info-border: #0284c7;
-  
-  /* Accent palette - Warm coral */
-  --palette-accent-main: #ea580c;
-  --palette-accent-light: #fb923c;
-  --palette-accent-dark: #c2410c;
-  --palette-on-accent: #cffafe;
-  
-  /* Control palette - Midnight depth */
-  --palette-control-main: #164e63;
-  --palette-control-light: #0e7490;
-  --palette-control-text: #ecfeff;
-  --palette-control-border: #155e75;
-}
-
-
-/**
- * Spring Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
- * Fresh greens, soft pinks, and bright yellows - inspired by spring blooms
- */
-
-/* ===== SPRING PALETTE - LIGHT THEME ===== */
-html[data-palette="spring"]:not([data-theme="dark"]), 
-html[data-palette="spring"][data-theme="light"] {
-  /* Primary palette - Fresh green */
-  --palette-primary-main: #16a34a;
-  --palette-primary-light: #4ade80;
-  --palette-primary-dark: #15803d;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Blossom pink */
-  --palette-secondary-main: #ec4899;
-  --palette-secondary-light: #f472b6;
-  --palette-secondary-dark: #be185d;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Soft white */
-  --palette-surface-main: #f7fee7;
-  --palette-surface-variant: #d9f7be; /* Improved contrast with subtle green tint */
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #14532d;
-
-  /* Background palette - Morning dew */
-  --palette-background-main: #f0fdf4;
-  --palette-background-dark: #dcfce7;
-  --palette-background-overlay: rgba(240, 253, 244, 0.95);
-  --palette-on-background: #166534;
-
-  /* Text palette - Deep forest */
-  --palette-text-primary: #14532d;
-  --palette-text-secondary: #166534;
-  --palette-text-disabled: rgba(20, 83, 45, 0.38);
-  --palette-text-inverted: #ffffff;
-  
-  /* Border palette - Sage */
-  --palette-border-main: #bbf7d0;
-  --palette-border-light: rgba(20, 83, 45, 0.12);
-  --palette-border-lighter: rgba(20, 83, 45, 0.05);
-  --palette-border-medium: #86efac;
-  
-  /* Success palette - Vibrant green */
-  --palette-success-main: #22c55e;
-  --palette-success-light: #dcfce7;
-  --palette-success-dark: #15803d;
-  --palette-success-border: #bbf7d0;
-  
-  /* Error palette - Cherry blossom */
-  --palette-error-main: #f43f5e;
-  --palette-error-light: #ffe4e6;
-  --palette-error-dark: #881337;
-  --palette-error-border: #fecdd3;
-  
-  /* Warning palette - Daffodil */
-  --palette-warning-main: #eab308;
-  --palette-warning-light: #fefce8;
-  --palette-warning-dark: #713f12;
-  --palette-warning-border: #fef08a;
-  
-  /* Info palette - Sky blue */
-  --palette-info-main: #0ea5e9;
-  --palette-info-light: #e0f2fe;
-  --palette-info-dark: #0c4a6e;
-  --palette-on-info: #14532d;
-  --palette-info-border: #7dd3fc;
-  
-  /* Accent palette - Cherry blossom */
-  --palette-accent-main: #ec4899;
-  --palette-accent-light: #fce7f3;
-  --palette-accent-dark: #be185d;
-  --palette-on-accent: #ffffff;
-  
-  /* Control palette - Rich earth */
-  --palette-control-main: #365314;
-  --palette-control-light: #4d7c0f;
-  --palette-control-text: #ecfdf5;
-  --palette-control-border: #65a30d;
-}
-
-/* ===== SPRING PALETTE - DARK THEME ===== */
-html[data-palette="spring"][data-theme="dark"] {
-  /* Primary palette - Neon leaf */
-  --palette-primary-main: #4ade80;
-  --palette-primary-light: #86efac;
-  --palette-primary-dark: #16a34a;
-  --palette-on-primary: #0f1f0f;
-
-  /* Secondary palette - Neon bloom */
-  --palette-secondary-main: #f472b6;
-  --palette-secondary-light: #f9a8d4;
-  --palette-secondary-dark: #ec4899;
-  --palette-on-secondary: #0f1f0f;
-
-  /* Surface palette - Dark moss */
-  --palette-surface-main: #0f1f0f;
-  --palette-surface-variant: #1a2e1a;
-  --palette-surface-elevated: #2d4a2d;
-  --palette-on-surface: #dcfce7;
-
-  /* Background palette - Deep forest */
-  --palette-background-main: #0a120a;
-  --palette-background-dark: #0f1f0f;
-  --palette-background-overlay: rgba(15, 31, 15, 0.95);
-  --palette-on-background: #bbf7d0;
-
-  /* Text palette - Moonlit green */
-  --palette-text-primary: #dcfce7;
-  --palette-text-secondary: #bbf7d0;
-  --palette-text-disabled: rgba(220, 252, 231, 0.38);
-  --palette-text-inverted: #0a120a;
-  
-  /* Border palette - Night vine */
-  --palette-border-main: #166534;
-  --palette-border-light: rgba(220, 252, 231, 0.12);
-  --palette-border-lighter: rgba(220, 252, 231, 0.05);
-  --palette-border-medium: #14532d;
-  
-  /* Success palette - Electric green */
-  --palette-success-main: #22c55e;
-  --palette-success-light: #14532d;
-  --palette-success-dark: #4ade80;
-  --palette-success-border: #166534;
-  
-  /* Error palette - Neon pink */
-  --palette-error-main: #f472b6;
-  --palette-error-light: #881337;
-  --palette-error-dark: #ec4899;
-  --palette-error-border: #be185d;
-  
-  /* Warning palette - Electric yellow */
-  --palette-warning-main: #facc15;
-  --palette-warning-light: #713f12;
-  --palette-warning-dark: #eab308;
-  --palette-warning-border: #a16207;
-  
-  /* Info palette - Electric cyan */
-  --palette-info-main: #06b6d4;
-  --palette-info-light: #164e63;
-  --palette-info-dark: #22d3ee;
-  --palette-on-info: #0a120a;
-  --palette-info-border: #0891b2;
-  
-  /* Accent palette - Electric bloom */
-  --palette-accent-main: #f472b6;
-  --palette-accent-light: #fce7f3;
-  --palette-accent-dark: #db2777;
-  --palette-on-accent: #dcfce7;
-  
-  /* Control palette - Deep forest */
-  --palette-control-main: #1a2e1a;
-  --palette-control-light: #2d4a2d;
-  --palette-control-text: #dcfce7;
-  --palette-control-border: #166534;
-}
-
-
-/**
- * Winter Color Palette
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- * 
- * Cool blues, icy whites, and frosty grays - inspired by winter landscapes
- */
-
-/* ===== WINTER PALETTE - LIGHT THEME ===== */
-html[data-palette="winter"]:not([data-theme="dark"]), 
-html[data-palette="winter"][data-theme="light"] {
-  /* Primary palette - Ice blue */
-  --palette-primary-main: #0077be;
-  --palette-primary-light: #5ba3d0;
-  --palette-primary-dark: #005082;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Steel blue */
-  --palette-secondary-main: #4682b4;
-  --palette-secondary-light: #7ba7cc;
-  --palette-secondary-dark: #2e5984;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Snow white */
-  --palette-surface-main: #fafbfc;
-  --palette-surface-variant: #e2e8f0; /* Improved contrast with cooler tone */
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #0f172a;
-
-  /* Background palette - Frosty */
-  --palette-background-main: #f8fafc;
-  --palette-background-dark: #f1f5f9;
-  --palette-background-overlay: rgba(248, 250, 252, 0.95);
-  --palette-on-background: #475569;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(248, 250, 252, 0.98);
-  --palette-header-bg-end: rgba(248, 250, 252, 0.95);
-  --palette-header-collapsed-bg-start: rgba(248, 250, 252, 0.99);
-  --palette-header-collapsed-bg-end: rgba(248, 250, 252, 0.96);
-  
-  /* Text palette - Winter tones */
-  --palette-text-primary: #0f172a;
-  --palette-text-secondary: #475569;
-  --palette-text-disabled: rgba(15, 23, 42, 0.38);
-  --palette-text-inverted: #ffffff;
-  
-  /* Border palette - Icy */
-  --palette-border-main: #cbd5e1;
-  --palette-border-light: rgba(15, 23, 42, 0.12);
-  --palette-border-lighter: rgba(15, 23, 42, 0.05);
-  --palette-border-medium: #94a3b8;
-  
-  /* Success palette - Pine green */
-  --palette-success-main: #059669;
-  --palette-success-light: #d1fae5;
-  --palette-success-dark: #064e3b;
-  --palette-success-border: #a7f3d0;
-  
-  /* Error palette - Winter berry */
-  --palette-error-main: #dc2626;
-  --palette-error-light: #fee2e2;
-  --palette-error-dark: #7f1d1d;
-  --palette-error-border: #fecaca;
-  
-  /* Warning palette - Amber frost */
-  --palette-warning-main: #d97706;
-  --palette-warning-light: #fef3c7;
-  --palette-warning-dark: #92400e;
-  --palette-warning-border: #fde68a;
-  
-  /* Info palette - Arctic blue */
-  --palette-info-main: #0284c7;
-  --palette-info-light: #e0f2fe;
-  --palette-info-dark: #0c4a6e;
-  --palette-on-info: #ffffff;
-  --palette-info-border: #7dd3fc;
-  
-  /* Accent palette - Aurora colors */
-  --palette-accent-main: #ec4899;
-  --palette-accent-light: #fce7f3;
-  --palette-accent-dark: #be185d;
-  --palette-on-accent: #ffffff;
-  
-  /* Control palette - Charcoal */
-  --palette-control-main: #1e293b;
-  --palette-control-light: #334155;
-  --palette-control-text: #e2e8f0;
-  --palette-control-border: #475569;
-}
-
-/* ===== WINTER PALETTE - DARK THEME ===== */
-html[data-palette="winter"][data-theme="dark"] {
-  /* Primary palette - Arctic glow */
-  --palette-primary-main: #7dd3fc;
-  --palette-primary-light: #bae6fd;
-  --palette-primary-dark: #0369a1;
-  --palette-on-primary: #020617;
-
-  /* Secondary palette - Moonlight */
-  --palette-secondary-main: #94a3b8;
-  --palette-secondary-light: #cbd5e1;
-  --palette-secondary-dark: #64748b;
-  --palette-on-secondary: #020617;
-
-  /* Surface palette - Dark frost */
-  --palette-surface-main: #0f172a;
-  --palette-surface-variant: #1e293b;
-  --palette-surface-elevated: #334155;
-  --palette-on-surface: #f8fafc;
-
-  /* Background palette - Winter night */
-  --palette-background-main: #020617;
-  --palette-background-dark: #0f172a;
-  --palette-background-overlay: rgba(15, 23, 42, 0.95);
-  --palette-on-background: #cbd5e1;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(2, 6, 23, 0.98);
-  --palette-header-bg-end: rgba(2, 6, 23, 0.95);
-  --palette-header-collapsed-bg-start: rgba(2, 6, 23, 0.99);
-  --palette-header-collapsed-bg-end: rgba(2, 6, 23, 0.96);
-  
-  /* Text palette - Snow and ice */
-  --palette-text-primary: #f8fafc;
-  --palette-text-secondary: #cbd5e1;
-  --palette-text-disabled: rgba(248, 250, 252, 0.38);
-  --palette-text-inverted: #020617;
-  
-  /* Border palette - Dark ice */
-  --palette-border-main: #475569;
-  --palette-border-light: rgba(248, 250, 252, 0.12);
-  --palette-border-lighter: rgba(248, 250, 252, 0.05);
-  --palette-border-medium: #334155;
-  
-  /* Success palette - Aurora green */
-  --palette-success-main: #34d399;
-  --palette-success-light: #064e3b;
-  --palette-success-dark: #10b981;
-  --palette-success-border: #065f46;
-  
-  /* Error palette - Northern lights red */
-  --palette-error-main: #f87171;
-  --palette-error-light: #7f1d1d;
-  --palette-error-dark: #ef4444;
-  --palette-error-border: #991b1b;
-  
-  /* Warning palette - Aurora orange */
-  --palette-warning-main: #fb923c;
-  --palette-warning-light: #9a3412;
-  --palette-warning-dark: #f97316;
-  --palette-warning-border: #c2410c;
-  
-  /* Info palette - Polar blue */
-  --palette-info-main: #38bdf8;
-  --palette-info-light: #0c4a6e;
-  --palette-info-dark: #0ea5e9;
-  --palette-on-info: #020617;
-  --palette-info-border: #0284c7;
-  
-  /* Accent palette - Northern lights */
-  --palette-accent-main: #f472b6;
-  --palette-accent-light: #fce7f3;
-  --palette-accent-dark: #db2777;
-  --palette-on-accent: #f8fafc;
-  
-  /* Control palette - Midnight */
-  --palette-control-main: #1e293b;
-  --palette-control-light: #334155;
-  --palette-control-text: #e2e8f0;
-  --palette-control-border: #475569;
-}
-
-
-/**
- * All Available Color Palettes
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- */
-
-/* Palette CSS has been inlined below to avoid import resolution issues */
-
-
-/**
- * Autumn Color Palette
- *
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
- *
- * Warm oranges, golden yellows, and earthy browns - inspired by fall foliage
- */
-
-/* ===== AUTUMN PALETTE - LIGHT THEME ===== */
-html[data-palette="autumn"]:not([data-theme="dark"]),
-html[data-palette="autumn"][data-theme="light"] {
-  /* Primary palette - Burnt orange */
-  --palette-primary-main: #ea580c;
-  --palette-primary-light: #fb923c;
-  --palette-primary-dark: #c2410c;
-  --palette-on-primary: #ffffff;
-
-  /* Secondary palette - Rich amber */
-  --palette-secondary-main: #b45309;
-  --palette-secondary-light: #d97706;
-  --palette-secondary-dark: #92400e;
-  --palette-on-secondary: #ffffff;
-
-  /* Surface palette - Cream */
-  --palette-surface-main: #fffbeb;
-  --palette-surface-variant: #fef3c7;
-  --palette-surface-elevated: #ffffff;
-  --palette-on-surface: #451a03;
-
-  /* Background palette - Warm ivory */
-  --palette-background-main: #fefce8;
-  --palette-background-dark: #fef3c7;
-  --palette-background-overlay: rgba(254, 252, 232, 0.95);
-  --palette-on-background: #78350f;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(254, 252, 232, 0.98);
-  --palette-header-bg-end: rgba(254, 252, 232, 0.95);
-  --palette-header-collapsed-bg-start: rgba(254, 252, 232, 0.99);
-  --palette-header-collapsed-bg-end: rgba(254, 252, 232, 0.96);
-
-  /* Text palette - Rich brown */
-  --palette-text-primary: #451a03;
-  --palette-text-secondary: #78350f;
-  --palette-text-disabled: rgba(69, 26, 3, 0.38);
-  --palette-text-inverted: #ffffff;
-
-  /* Border palette - Tan */
-  --palette-border-main: #d4d4aa;
-  --palette-border-light: rgba(69, 26, 3, 0.12);
-  --palette-border-lighter: rgba(69, 26, 3, 0.05);
-  --palette-border-medium: #a8a29e;
-
-  /* Status colors */
-  --palette-success-main: #16a34a;
-  --palette-success-light: #dcfce7;
-  --palette-success-dark: #14532d;
-  --palette-success-border: #bbf7d0;
-
-  --palette-error-main: #dc2626;
-  --palette-error-light: #fee2e2;
-  --palette-error-dark: #7f1d1d;
-  --palette-error-border: #fecaca;
-
-  --palette-warning-main: #f59e0b;
-  --palette-warning-light: #fef3c7;
-  --palette-warning-dark: #78350f;
-  --palette-warning-border: #fde68a;
-
-  --palette-info-main: #0891b2;
-  --palette-info-light: #e6fffa;
-  --palette-info-dark: #164e63;
-  --palette-on-info: #ffffff;
-  --palette-info-border: #67e8f9;
-
-  /* Accent palette */
-  --palette-accent-main: #dc2626;
-  --palette-accent-light: #f87171;
-  --palette-accent-dark: #991b1b;
-  --palette-on-accent: #ffffff;
-
-  /* Control elements (buttons, form fields) */
-  --palette-control-main: #451a03;
-  --palette-control-light: #78350f;
-  --palette-control-text: #fef3c7;
-  --palette-control-border: #92400e;
-}
-
-/* ===== AUTUMN PALETTE - DARK THEME ===== */
-html[data-palette="autumn"][data-theme="dark"] {
-  /* Primary palette */
-  --palette-primary-main: #fb923c;
-  --palette-primary-light: #fdba74;
-  --palette-primary-dark: #ea580c;
-  --palette-on-primary: #1c1917;
-
-  /* Secondary palette */
-  --palette-secondary-main: #fbbf24;
-  --palette-secondary-light: #fcd34d;
-  --palette-secondary-dark: #f59e0b;
-  --palette-on-secondary: #1c1917;
-
-  /* Surface palette */
-  --palette-surface-main: #1c1917;
-  --palette-surface-variant: #292524;
-  --palette-surface-elevated: #44403c;
-  --palette-on-surface: #fef3c7;
-
-  /* Background palette */
-  --palette-background-main: #0c0a09;
-  --palette-background-dark: #1c1917;
-  --palette-background-overlay: rgba(28, 25, 23, 0.95);
-  --palette-on-background: #d6d3d1;
-
-  /* Header background with transparency */
-  --palette-header-bg-start: rgba(12, 10, 9, 0.98);
-  --palette-header-bg-end: rgba(12, 10, 9, 0.95);
-  --palette-header-collapsed-bg-start: rgba(12, 10, 9, 0.99);
-  --palette-header-collapsed-bg-end: rgba(12, 10, 9, 0.96);
-
-  /* Text palette */
-  --palette-text-primary: #fef3c7;
-  --palette-text-secondary: #d6d3d1;
-  --palette-text-disabled: rgba(254, 243, 199, 0.38);
-  --palette-text-inverted: #0c0a09;
-
-  /* Border palette */
-  --palette-border-main: #78716c;
-  --palette-border-light: rgba(254, 243, 199, 0.12);
-  --palette-border-lighter: rgba(254, 243, 199, 0.05);
-  --palette-border-medium: #57534e;
-
-  /* Status colors */
-  --palette-success-main: #4ade80;
-  --palette-success-light: #14532d;
-  --palette-success-dark: #22c55e;
-  --palette-success-border: #166534;
-
-  --palette-error-main: #f87171;
-  --palette-error-light: #7f1d1d;
-  --palette-error-dark: #ef4444;
-  --palette-error-border: #991b1b;
-
-  --palette-warning-main: #eab308;
-  --palette-warning-light: #78350f;
-  --palette-warning-dark: #ca8a04;
-  --palette-warning-border: #a16207;
-
-  --palette-info-main: #22d3ee;
-  --palette-info-light: #164e63;
-  --palette-info-dark: #06b6d4;
-  --palette-on-info: #0c0a09;
-  --palette-info-border: #0891b2;
-
-  /* Accent palette */
-  --palette-accent-main: #b91c1c;
-  --palette-accent-light: #dc2626;
-  --palette-accent-dark: #7f1d1d;
-  --palette-on-accent: #fef3c7;
-
-  /* Control elements */
-  --palette-control-main: #292524;
-  --palette-control-light: #44403c;
-  --palette-control-text: #f5f5f4;
-  --palette-control-border: #57534e;
-}
-
 /* ===== THEME VARIABLES (derived from palette) ===== */
 /* These variables reference palette variables and adapt automatically */
 :root {
@@ -1349,8 +319,8 @@ html[data-palette="autumn"][data-theme="dark"] {
   --theme-link-hover: var(--palette-info-dark);
 
   /* Code colors */
-  --theme-code-bg: var(--palette-surface-variant);
-  --theme-code-text: var(--palette-text-primary);
+  --theme-code-bg: var(--palette-surface-main);
+  --theme-code-text: var(--palette-primary);
 
   /* MUI integration */
   --theme-mui-label-bg: var(--palette-surface-main);
@@ -1363,7 +333,7 @@ html[data-palette="autumn"][data-theme="dark"] {
   --theme-border-radius: 12px;
   --theme-border-radius-small: 8px;
   --theme-border-radius-large: 16px;
-  
+
   /* Elevation shadows */
   --theme-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.1);
   --theme-elevation-2: 0 4px 8px rgba(0, 0, 0, 0.15);
@@ -1379,26 +349,26 @@ html[data-theme="light"] {
   --theme-header-bg-end: var(--palette-header-bg-end);
   --theme-header-collapsed-bg-start: var(--palette-header-collapsed-bg-start);
   --theme-header-collapsed-bg-end: var(--palette-header-collapsed-bg-end);
-  
+
   /* Control hover colors */
   --theme-control-hover-text: var(--palette-text-inverted);
   --theme-control-hover-border: #555;
-  
+
   /* Panel colors */
   --theme-panel-bg-end: #252525;
   --theme-panel-shadow: rgba(0, 0, 0, 0.6);
-  
+
   /* Floating surface colors */
   --theme-floating-border: rgba(255, 255, 255, 0.5);
-  
+
   /* Option colors for light theme */
   --theme-option-text: #222;
   --theme-option-hover-bg: #e0e0e0;
   --theme-option-selected-bg: #d0e0ff;
   --theme-option-selected-text: var(--palette-primary-dark);
-  
+
   /* Code colors */
-  --theme-code-bg: rgba(0, 0, 0, 0.1);
+  --theme-code-text: var(--palette-primary-dark);
 }
 
 /* Dark theme specific adjustments */
@@ -1408,28 +378,27 @@ html[data-theme="dark"] {
   --theme-header-bg-end: var(--palette-header-bg-end);
   --theme-header-collapsed-bg-start: var(--palette-header-collapsed-bg-start);
   --theme-header-collapsed-bg-end: var(--palette-header-collapsed-bg-end);
-  
+
   /* Control hover colors */
   --theme-control-hover-text: var(--palette-text-primary);
   --theme-control-hover-border: #777;
-  
+
   /* Panel colors */
   --theme-panel-bg-end: var(--palette-surface-elevated);
   --theme-panel-shadow: rgba(0, 0, 0, 0.8);
-  
+
   /* Floating surface colors */
   --theme-floating-border: rgba(255, 255, 255, 0.2);
-  
+
   /* Option colors for dark theme */
   --theme-option-text: var(--palette-text-secondary);
   --theme-option-hover-bg: var(--palette-surface-elevated);
   --theme-option-selected-bg: var(--palette-primary-dark);
   --theme-option-selected-text: var(--palette-primary-light);
-  
+
   /* Code colors */
-  --theme-code-bg: rgba(255, 255, 255, 0.1);
-  --theme-code-text: var(--palette-text-secondary);
-  
+  --theme-code-text: var(--palette-primary-light);
+
   /* MUI integration */
   --theme-mui-label-bg: rgb(41, 41, 41);
 
@@ -1443,7 +412,7 @@ html[data-theme="dark"] {
 /* ===== SMOOTH TRANSITIONS ===== */
 /* Apply smooth transitions for theme/palette changes */
 * {
-  transition: 
+  transition:
     background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
     color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
@@ -1465,4 +434,18 @@ button:focus,
   transition: none;
 }
 
+/* Improve standard element appearances */
+html, body, #root {
+  background-color: var(--theme-surface) !important;
+  color: var(--theme-on-surface) !important;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.6;
+}
 
+code, code.inline-code, pre.code-block {
+  font-family: 'Source Code Pro', monospace;
+  background-color: var(--theme-code-bg) !important;
+  color: var(--theme-code-text) !important;
+  padding: 2px 4px;
+  border-radius: 4px;
+}