/* 
 * Symposium Design System
 * Inspired by Dieter Rams' principles:
 * - Less, but better
 * - Good design is as little design as possible
 * - Back to purity, back to simplicity
 */

:root {
  /* 
   * Color Palette
   * Minimal, functional, honest
   */
  
  /* Primary - Near black, the foundation */
  --color-ink: #1a1a1a;
  --color-ink-light: #404040;
  --color-ink-lighter: #666666;
  --color-ink-mix: white;  /* Mix color for lightening dark ink (badges, counts) */
  
  /* Background - Clean whites and warm grays */
  --main-background-color: #E4E4E4;
  --main-background-color-secondary: #C9C9C9;
  --main-background-color-third: #BABABA;
  
  /* Functional accents - Purposeful, not decorative */
  --color-accent: #1a1a1a;
  --color-accent-subtle: #e5e5e5;
  
  /* Semantic - Clear communication */
  --color-target: #989DC5;      /* Blue for @/ targeting */
  --color-target-bg: #eff6ff;
  --color-operation: #598d7b;   /* Green for #/ operations */
  --color-operation-bg: #c2dfd1;
  --color-success: #21946f;     /* Green for success states */
  --color-success-bg: #c1d3ca;
  --color-error: #c04646;
  --color-error-bg: #c5adad;
  
  /* Scheduler component colors - Functional differentiation */
  --color-query: #8b5cf6;       /* Purple for queries/aggregation */
  --color-query-bg: #f5f3ff;
  --color-agent: #3b82f6;       /* Blue for agents/processing */
  --color-agent-bg: #eff6ff;
  --color-output: #ec4899;      /* Pink for outputs/sending */
  --color-output-bg: #fdf2f8;
  --color-cleanup: #f59e0b;     /* Amber for cleanups/maintenance */
  --color-cleanup-bg: #fffbeb;

  /* Branch Visualization Colors */
  --color-branch-1: #8b5cf6;    /* Purple */
  --color-branch-1-light: #f5f3ff;
  --color-branch-2: #3b82f6;    /* Blue */
  --color-branch-2-light: #eff6ff;
  --color-branch-3: #ec4899;    /* Pink */
  --color-branch-3-light: #fdf2f8;
  --color-branch-4: #f59e0b;    /* Amber */
  --color-branch-4-light: #fffbeb;
  --color-branch-5: #059669;    /* Green */
  --color-branch-5-light: #ecfdf5;
  
  /* Vanish Mode Colors - Ephemeral, mysterious */
  --color-vanish: #6366f1;      /* Indigo for vanish mode */
  --color-vanish-bg: #eef2ff;
  --color-vanish-dark: #4f46e5;
  --color-vanish-border: rgba(99, 102, 241, 0.3);
  --color-vanish-glow: rgba(99, 102, 241, 0.15);
  
  /* 
   * Typography
   * System fonts for authenticity and performance
   */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  
  /* Type Scale - Mathematical harmony */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  /* 
   * Spacing
   * Based on 4px grid for precision
   */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  
  /* 
   * Borders
   * Subtle, purposeful
   */
  --border-width: 1px;
  --border-color: #BABABA;
  --border-color-strong: #d4d4d4;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* 
   * Shadows
   * Minimal depth indication
   */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  
  /* 
   * Transitions
   * Quick, unobtrusive
   */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;
  
  /* 
   * Z-Index Scale
   */
  --z-base: 0;
  --z-dropdown: 100;
  --z-modal-overlay: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

/* 
 * DARK MODE THEME
 * Applied when: html[data-theme="dark"]
 */
html[data-theme="dark"] {
  /* Background colors - Dark base */
  --main-background-color: #1a1a1a;
  --main-background-color-secondary: #1e1e1e;
  --main-background-color-third: #222222;
  
  /* Text colors - Light for dark background */
  --color-ink: #e5e5e5;
  --color-ink-light: #a3a3a3;
  --color-ink-lighter: #737373;
  --color-ink-mix: black;  /* Mix color for darkening light ink (badges, counts) */
  
  /* Borders - Subtle in dark mode */
  --border-color: #333333;
  --border-color-strong: #404040;
  
  /* Accents */
  --color-accent: #cccccc;
  --color-accent-subtle: #2a2a2a;
  
  /* Semantic colors - Brighter for visibility */
  --color-target: #3b82f6;
  --color-target-bg: #1e3a5f;
  
  --color-operation: #10b981;
  --color-operation-bg: #1a3a2e;
  
  --color-success: #10b981;
  --color-success-bg: #1a3a2e;
  
  --color-error: #ef4444;
  --color-error-bg: #3a1a1a;
  
  /* Component colors */
  --color-query: #a78bfa;
  --color-query-bg: #2d2640;
  
  --color-agent: #60a5fa;
  --color-agent-bg: #1e3550;
  
  --color-output: #f472b6;
  --color-output-bg: #3d2038;
  
  --color-cleanup: #fbbf24;
  --color-cleanup-bg: #3d3520;
  
  /* Branch visualization */
  --color-branch-1: #a78bfa;
  --color-branch-1-light: #2d2640;
  
  --color-branch-2: #60a5fa;
  --color-branch-2-light: #1e3550;
  
  --color-branch-3: #f472b6;
  --color-branch-3-light: #3d2038;
  
  --color-branch-4: #fbbf24;
  --color-branch-4-light: #3d3520;
  
  --color-branch-5: #10b981;
  --color-branch-5-light: #1a3a2e;
  
  /* Vanish mode */
  --color-vanish: #818cf8;
  --color-vanish-bg: #2d2f52;
  --color-vanish-dark: #6366f1;
  --color-vanish-border: rgba(129, 140, 248, 0.4);
  --color-vanish-glow: rgba(129, 140, 248, 0.2);
  
  /* Shadows - Deeper for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 
 * LIQUID GLASS THEME
 * Apple-inspired glassmorphism aesthetic with translucency and blur effects
 * Applied when: html[data-theme="liquid-glass"]
 */
html[data-theme="liquid-glass"] {
  /* Base colors - Slightly tinted for glass effect */
  --main-background-color: rgba(255, 255, 255, 0.7);
  --main-background-color-secondary: rgba(250, 250, 250, 0.8);
  --main-background-color-third: rgba(245, 245, 245, 0.75);
  
  /* Text remains strong for readability */
  --color-ink: #1a1a1a;
  --color-ink-light: #404040;
  --color-ink-lighter: #666666;
  --color-ink-mix: white;  /* Mix color for lightening dark ink (badges, counts) */
  
  /* Borders - More subtle with transparency */
  --border-color: rgba(229, 229, 229, 0.6);
  --border-color-strong: rgba(212, 212, 212, 0.8);
  
  /* Semantic colors - Slightly transparent */
  --color-target: #2563eb;
  --color-target-bg: rgba(239, 246, 255, 0.7);
  
  --color-operation: #059669;
  --color-operation-bg: rgba(236, 253, 245, 0.7);
  
  --color-success: #059669;
  --color-success-bg: rgba(236, 253, 245, 0.7);
  
  --color-error: #dc2626;
  --color-error-bg: rgba(254, 242, 242, 0.7);
  
  /* Enhanced shadows for depth */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Liquid Glass: Apply backdrop blur to key surfaces */
html[data-theme="liquid-glass"] .modal,
html[data-theme="liquid-glass"] .modal-overlay,
html[data-theme="liquid-glass"] .card,
html[data-theme="liquid-glass"] .input-area,
html[data-theme="liquid-glass"] .mode-window-container {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Liquid Glass: Enhanced glass effect for modals */
html[data-theme="liquid-glass"] .modal {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Liquid Glass: Frosted overlay */
html[data-theme="liquid-glass"] .modal-overlay {
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Liquid Glass: Cards with translucency */
html[data-theme="liquid-glass"] .card,
html[data-theme="liquid-glass"] .card-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Liquid Glass: Hover effects with subtle highlight */
html[data-theme="liquid-glass"] .card:hover,
html[data-theme="liquid-glass"] .card-item:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

/* Liquid Glass: Input fields with frosted effect */
html[data-theme="liquid-glass"] input,
html[data-theme="liquid-glass"] textarea,
html[data-theme="liquid-glass"] select {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(229, 229, 229, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="liquid-glass"] input:focus,
html[data-theme="liquid-glass"] textarea:focus,
html[data-theme="liquid-glass"] select:focus {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(37, 99, 235, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Liquid Glass: Buttons with glass effect */
html[data-theme="liquid-glass"] .form-btn-primary {
  background: rgba(37, 99, 235, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html[data-theme="liquid-glass"] .form-btn-primary:hover {
  background: rgba(29, 78, 216, 0.95);
  box-shadow: 
    0 4px 12px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Liquid Glass: Subtle shimmer animation on interactive elements */
@keyframes glass-shimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

html[data-theme="liquid-glass"] .card::before,
html[data-theme="liquid-glass"] .modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s;
  pointer-events: none;
}

html[data-theme="liquid-glass"] .card:hover::before {
  left: 100%;
}

/* 
 * SAKINA PURPLE THEME
 * Dark mode with purple color palette
 * Applied when: html[data-theme="sakina-purple"]
 */
html[data-theme="sakina-purple"] {
  /* Background colors - Purple dark mode */
  --main-background-color: #2A1622;
  --main-background-color-secondary: #3F182F;
  --main-background-color-third: #5A2B48;
  
  /* Text colors - White for high contrast on dark purple */
  --color-ink: #eeeeee;
  --color-ink-light: #e5d5e8;
  --color-ink-lighter: #b39bb5;
  --color-ink-mix: black;  /* Mix color for darkening light ink (badges, counts) */
  
  /* Borders - Medium purple */
  --border-color: #602649;
  --border-color-strong: #b39bb5;
  
  /* Accents */
  --color-accent: #9A7283;
  --color-accent-subtle: #6b4e6d;
  
  /* Semantic colors - Adjusted for purple background */
  --color-target: #9A7283;      /* Light purple for targeting */
  --color-target-bg: #5a3d5c;
  
  --color-operation: #6ee7b7;   /* Mint green for operations */
  --color-operation-bg: #3d5a4e;
  
  --color-success: #6ee7b7;     /* Mint green for success */
  --color-success-bg: #3d5a4e;
  
  --color-error: #fca5a5;       /* Light red for errors */
  --color-error-bg: #5a3d3d;
  
  /* Component colors - Adjusted for purple theme */
  --color-query: #c4b5fd;       /* Light purple for queries */
  --color-query-bg: #4d3d5f;
  
  --color-agent: #93c5fd;       /* Light blue for agents */
  --color-agent-bg: #3d4d5f;
  
  --color-output: #f9a8d4;      /* Light pink for outputs */
  --color-output-bg: #5f3d52;
  
  --color-cleanup: #fcd34d;     /* Light yellow for cleanup */
  --color-cleanup-bg: #5f523d;
  
  /* Branch visualization */
  --color-branch-1: #c4b5fd;
  --color-branch-1-light: #4d3d5f;
  
  --color-branch-2: #93c5fd;
  --color-branch-2-light: #3d4d5f;
  
  --color-branch-3: #f9a8d4;
  --color-branch-3-light: #5f3d52;
  
  --color-branch-4: #fcd34d;
  --color-branch-4-light: #5f523d;
  
  --color-branch-5: #6ee7b7;
  --color-branch-5-light: #3d5a4e;
  
  /* Vanish mode - Purple theme variation */
  --color-vanish: #d8b4fe;
  --color-vanish-bg: #5a3d70;
  --color-vanish-dark: #c4b5fd;
  --color-vanish-border: rgba(216, 180, 254, 0.4);
  --color-vanish-glow: rgba(216, 180, 254, 0.2);
  
  /* Shadows - Enhanced for dark purple background */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* 
 * DEEP BLUE THEME
 * Ocean-inspired dark theme with deep navy and aqua accents
 * Applied when: html[data-theme="deep-blue"]
 */
html[data-theme="deep-blue"] {
  /* Background colors - Deep ocean navy */
  --main-background-color: #0a1628;
  --main-background-color-secondary: #0f2942;
  --main-background-color-third: #1a3d5c;
  
  /* Text colors - Light for high contrast */
  --color-ink: #f1f5f9;
  --color-ink-light: #94a3b8;
  --color-ink-lighter: #64748b;
  --color-ink-mix: black;
  
  /* Borders - Ocean blue tones */
  --border-color: #1e3a5f;
  --border-color-strong: #3b6a90;
  
  /* Accents */
  --color-accent: #717EA4;
  --color-accent-subtle: #1e3a5f;
  
  /* Semantic colors - Ocean palette */
  --color-target: #B8BFD2;      /* Cyan for targeting */
  --color-target-bg: #1e3a5f;
  
  --color-operation: #2dd4bf;   /* Teal for operations */
  --color-operation-bg: #1a3d35;
  
  --color-success: #34d399;    /* Emerald for success */
  --color-success-bg: #1a3530;
  
  --color-error: #f87171;       /* Coral red for errors */
  --color-error-bg: #3d1a1a;
  
  /* Component colors - Ocean blues */
  --color-query: #a78bfa;       /* Purple for queries */
  --color-query-bg: #2d2640;
  
  --color-agent: #38bdf8;       /* Cyan for agents */
  --color-agent-bg: #1e3a50;
  
  --color-output: #f472b6;      /* Pink for outputs */
  --color-output-bg: #3d2038;
  
  --color-cleanup: #fbbf24;     /* Amber for cleanup */
  --color-cleanup-bg: #3d3520;
  
  /* Branch visualization - Ocean palette */
  --color-branch-1: #38bdf8;
  --color-branch-1-light: #1e3a50;
  
  --color-branch-2: #2dd4bf;
  --color-branch-2-light: #1a3530;
  
  --color-branch-3: #f472b6;
  --color-branch-3-light: #3d2038;
  
  --color-branch-4: #fbbf24;
  --color-branch-4-light: #3d3520;
  
  --color-branch-5: #34d399;
  --color-branch-5-light: #1a3530;
  
  /* Vanish mode - Deep blue variation */
  --color-vanish: #60a5fa;
  --color-vanish-bg: #1e3a5f;
  --color-vanish-dark: #3b82f6;
  --color-vanish-border: rgba(96, 165, 250, 0.4);
  --color-vanish-glow: rgba(96, 165, 250, 0.2);
  
  /* Shadows - Blue tinted */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px #00214280;
}

/* Deep Blue: Modal styling */
html[data-theme="deep-blue"] .modal,
html[data-theme="deep-blue"] .modal-overlay {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

html[data-theme="deep-blue"] .modal {
  background: rgba(10, 22, 40, 0.9);
  border: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: 
    0 8px 32px rgba(0, 50, 100, 0.4),
    inset 0 1px 0 rgba(56, 189, 248, 0.1);
}

html[data-theme="deep-blue"] .modal-overlay {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Deep Blue: Cards with subtle glow */
html[data-theme="deep-blue"] .card,
html[data-theme="deep-blue"] .card-item {
  background: rgba(15, 41, 66, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(56, 189, 248, 0.05);
}

html[data-theme="deep-blue"] .card:hover,
html[data-theme="deep-blue"] .card-item:hover {
  background: rgba(26, 61, 92, 0.85);
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 
    0 4px 12px rgba(0, 50, 100, 0.4),
    inset 0 1px 0 rgba(56, 189, 248, 0.1);
  transform: translateY(-1px);
}

/* Deep Blue: Input fields with subtle blue tint */
html[data-theme="deep-blue"] input,
html[data-theme="deep-blue"] textarea,
html[data-theme="deep-blue"] select {
  background: rgba(10, 22, 40, 0.7);
  border: 1px solid rgba(56, 189, 248, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f1f5f9;
}

html[data-theme="deep-blue"] input:focus,
html[data-theme="deep-blue"] textarea:focus,
html[data-theme="deep-blue"] select:focus {
  background: rgba(15, 41, 66, 0.8);
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

html[data-theme="deep-blue"] input::placeholder,
html[data-theme="deep-blue"] textarea::placeholder {
  color: #64748b;
}

/* Deep Blue: Buttons with glow effect */
html[data-theme="deep-blue"] .form-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(14, 165, 233, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="deep-blue"] .form-btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  box-shadow: 
    0 4px 12px rgba(14, 165, 233, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 
 * DARK BROWN THEME
 * Warm, cozy dark theme with brown and amber tones
 * Applied when: html[data-theme="dark-brown"]
 */
html[data-theme="dark-brown"] {
  /* Background colors - Rich brown */
  --main-background-color: #1a1512;
  --main-background-color-secondary: #2d2319;
  --main-background-color-third: #3d2e22;
  
  /* Text colors - Warm cream */
  --color-ink: #f5f0e8;
  --color-ink-light: #c4b8a8;
  --color-ink-lighter: #8a7b6a;
  --color-ink-mix: black;
  
  /* Borders - Brown tones */
  --border-color: #4a3a2a;
  --border-color-strong: #6b5a48;
  
  /* Accents */
  --color-accent: #d4a574;
  --color-accent-subtle: #3d2e22;
  
  /* Semantic colors - Warm palette */
  --color-target: #d4a574;      /* Amber for targeting */
  --color-target-bg: #3d2e22;
  
  --color-operation: #a3c9a8;   /* Sage green for operations */
  --color-operation-bg: #2d3a28;
  
  --color-success: #a3c9a8;     /* Sage green for success */
  --color-success-bg: #2d3a28;
  
  --color-error: #e8a0a0;       /* Soft red for errors */
  --color-error-bg: #3d2828;
  
  /* Component colors - Warm tones */
  --color-query: #c4b5fd;       /* Light purple for queries */
  --color-query-bg: #2d2640;
  
  --color-agent: #d4a574;       /* Amber for agents */
  --color-agent-bg: #3d3022;
  
  --color-output: #f9a8d4;      /* Pink for outputs */
  --color-output-bg: #3d2038;
  
  --color-cleanup: #fcd34d;     /* Yellow for cleanup */
  --color-cleanup-bg: #3d3520;
  
  /* Branch visualization - Earth tones */
  --color-branch-1: #d4a574;
  --color-branch-1-light: #3d3022;
  
  --color-branch-2: #a3c9a8;
  --color-branch-2-light: #2d3a28;
  
  --color-branch-3: #f9a8d4;
  --color-branch-3-light: #3d2038;
  
  --color-branch-4: #fcd34d;
  --color-branch-4-light: #3d3520;
  
  --color-branch-5: #a3c9a8;
  --color-branch-5-light: #2d3a28;
  
  /* Vanish mode - Warm brown variation */
  --color-vanish: #d4a574;
  --color-vanish-bg: #3d2e22;
  --color-vanish-dark: #b8956a;
  --color-vanish-border: rgba(212, 165, 116, 0.4);
  --color-vanish-glow: rgba(212, 165, 116, 0.2);
  
  /* Shadows - Warm tinted */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(50, 30, 10, 0.5);
}

/* Dark Brown: Modal styling */
html[data-theme="dark-brown"] .modal,
html[data-theme="dark-brown"] .modal-overlay {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

html[data-theme="dark-brown"] .modal {
  background: rgba(26, 21, 18, 0.95);
  border: 1px solid rgba(212, 165, 116, 0.2);
  box-shadow: 
    0 8px 32px rgba(50, 30, 10, 0.4),
    inset 0 1px 0 rgba(212, 165, 116, 0.1);
}

html[data-theme="dark-brown"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Dark Brown: Cards with subtle warmth */
html[data-theme="dark-brown"] .card,
html[data-theme="dark-brown"] .card-item {
  background: rgba(45, 35, 25, 0.85);
  border: 1px solid rgba(212, 165, 116, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(212, 165, 116, 0.05);
}

html[data-theme="dark-brown"] .card:hover,
html[data-theme="dark-brown"] .card-item:hover {
  background: rgba(61, 46, 34, 0.9);
  border-color: rgba(212, 165, 116, 0.25);
  box-shadow: 
    0 4px 12px rgba(50, 30, 10, 0.4),
    inset 0 1px 0 rgba(212, 165, 116, 0.1);
  transform: translateY(-1px);
}

/* Dark Brown: Input fields */
html[data-theme="dark-brown"] input,
html[data-theme="dark-brown"] textarea,
html[data-theme="dark-brown"] select {
  background: rgba(26, 21, 18, 0.7);
  border: 1px solid rgba(212, 165, 116, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f5f0e8;
}

html[data-theme="dark-brown"] input:focus,
html[data-theme="dark-brown"] textarea:focus,
html[data-theme="dark-brown"] select:focus {
  background: rgba(45, 35, 25, 0.8);
  border-color: rgba(212, 165, 116, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.15);
}

html[data-theme="dark-brown"] input::placeholder,
html[data-theme="dark-brown"] textarea::placeholder {
  color: #8a7b6a;
}

/* Dark Brown: Buttons with warm glow */
html[data-theme="dark-brown"] .form-btn-primary {
  background: linear-gradient(135deg, #c9956a, #a67c52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(166, 124, 82, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="dark-brown"] .form-btn-primary:hover {
  background: linear-gradient(135deg, #d4a574, #c9956a);
  box-shadow: 
    0 4px 12px rgba(166, 124, 82, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 
 * DARK GREEN THEME
 * Forest-inspired dark theme with deep greens and sage accents
 * Applied when: html[data-theme="dark-green"]
 */
html[data-theme="dark-green"] {
  /* Background colors - Deep forest */
  --main-background-color: #0d1a14;
  --main-background-color-secondary: #142822;
  --main-background-color-third: #1a3632;
  
  /* Text colors - Soft sage */
  --color-ink: #e8f0ec;
  --color-ink-light: #a8c4b8;
  --color-ink-lighter: #6a8a7a;
  --color-ink-mix: black;
  
  /* Borders - Forest tones */
  --border-color: #2a4a42;
  --border-color-strong: #3d6b5c;
  
  /* Accents */
  --color-accent: #6ee7b7;
  --color-accent-subtle: #1a3632;
  
  /* Semantic colors - Forest palette */
  --color-target: #6ee7b7;      /* Mint green for targeting */
  --color-target-bg: #1a3632;
  
  --color-operation: #a7f3d0;   /* Light green for operations */
  --color-operation-bg: #143d2e;
  
  --color-success: #34d399;     /* Emerald for success */
  --color-success-bg: #143d2e;
  
  --color-error: #fca5a5;       /* Soft red for errors */
  --color-error-bg: #3d1a1a;
  
  /* Component colors */
  --color-query: #c4b5fd;       /* Light purple for queries */
  --color-query-bg: #2d2640;
  
  --color-agent: #6ee7b7;       /* Mint for agents */
  --color-agent-bg: #1a3028;
  
  --color-output: #f9a8d4;      /* Pink for outputs */
  --color-output-bg: #3d2038;
  
  --color-cleanup: #fcd34d;     /* Yellow for cleanup */
  --color-cleanup-bg: #3d3520;
  
  /* Branch visualization - Forest palette */
  --color-branch-1: #6ee7b7;
  --color-branch-1-light: #1a3028;
  
  --color-branch-2: #a7f3d0;
  --color-branch-2-light: #143d2e;
  
  --color-branch-3: #f9a8d4;
  --color-branch-3-light: #3d2038;
  
  --color-branch-4: #fcd34d;
  --color-branch-4-light: #3d3520;
  
  --color-branch-5: #34d399;
  --color-branch-5-light: #143d2e;
  
  /* Vanish mode - Forest variation */
  --color-vanish: #6ee7b7;
  --color-vanish-bg: #1a3632;
  --color-vanish-dark: #34d399;
  --color-vanish-border: rgba(110, 231, 183, 0.4);
  --color-vanish-glow: rgba(110, 231, 183, 0.2);
  
  /* Shadows - Green tinted */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(10, 50, 30, 0.5);
}

/* Dark Green: Modal styling */
html[data-theme="dark-green"] .modal,
html[data-theme="dark-green"] .modal-overlay {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

html[data-theme="dark-green"] .modal {
  background: rgba(13, 26, 20, 0.95);
  border: 1px solid rgba(110, 231, 183, 0.2);
  box-shadow: 
    0 8px 32px rgba(10, 50, 30, 0.4),
    inset 0 1px 0 rgba(110, 231, 183, 0.1);
}

html[data-theme="dark-green"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Dark Green: Cards */
html[data-theme="dark-green"] .card,
html[data-theme="dark-green"] .card-item {
  background: rgba(20, 40, 34, 0.85);
  border: 1px solid rgba(110, 231, 183, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(110, 231, 183, 0.05);
}

html[data-theme="dark-green"] .card:hover,
html[data-theme="dark-green"] .card-item:hover {
  background: rgba(26, 54, 50, 0.9);
  border-color: rgba(110, 231, 183, 0.25);
  box-shadow: 
    0 4px 12px rgba(10, 50, 30, 0.4),
    inset 0 1px 0 rgba(110, 231, 183, 0.1);
  transform: translateY(-1px);
}

/* Dark Green: Input fields */
html[data-theme="dark-green"] input,
html[data-theme="dark-green"] textarea,
html[data-theme="dark-green"] select {
  background: rgba(13, 26, 20, 0.7);
  border: 1px solid rgba(110, 231, 183, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #e8f0ec;
}

html[data-theme="dark-green"] input:focus,
html[data-theme="dark-green"] textarea:focus,
html[data-theme="dark-green"] select:focus {
  background: rgba(20, 40, 34, 0.8);
  border-color: rgba(110, 231, 183, 0.5);
  box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.15);
}

html[data-theme="dark-green"] input::placeholder,
html[data-theme="dark-green"] textarea::placeholder {
  color: #6a8a7a;
}

/* Dark Green: Buttons with green glow */
html[data-theme="dark-green"] .form-btn-primary {
  background: linear-gradient(135deg, #34d399, #059669);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(5, 150, 105, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="dark-green"] .form-btn-primary:hover {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  box-shadow: 
    0 4px 12px rgba(5, 150, 105, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 
 * DARK RED THEME
 * Deep burgundy/wine dark theme with rose and crimson accents
 * Applied when: html[data-theme="dark-red"]
 */
html[data-theme="dark-red"] {
  --main-background-color: #2b1616;
  --main-background-color-secondary: #2d1419;
  --main-background-color-third: #3d1a22;
  
  --color-ink: #f5e8ec;
  --color-ink-light: #c4a8b8;
  --color-ink-lighter: #8a6a7a;
  --color-ink-mix: black;
  
  --border-color: #4a2a32;
  --border-color-strong: #6b3a48;
  
  --color-accent: #d16969;
  --color-accent-subtle: #3d1a22;
  
  --color-target: #e8748c;
  --color-target-bg: #3d1a22;
  
  --color-operation: #c9a8a8;
  --color-operation-bg: #2d1a1a;
  
  --color-success: #a8c9a8;
  --color-success-bg: #1a2d1a;
  
  --color-error: #fca5a5;
  --color-error-bg: #3d1a1a;
  
  --color-query: #c4b5fd;
  --color-query-bg: #2d2640;
  
  --color-agent: #e8748c;
  --color-agent-bg: #3d2028;
  
  --color-output: #f9a8d4;
  --color-output-bg: #3d2038;
  
  --color-cleanup: #fcd34d;
  --color-cleanup-bg: #3d3520;
  
  --color-branch-1: #e8748c;
  --color-branch-1-light: #3d2028;
  
  --color-branch-2: #c9a8a8;
  --color-branch-2-light: #2d1a1a;
  
  --color-branch-3: #f9a8d4;
  --color-branch-3-light: #3d2038;
  
  --color-branch-4: #fcd34d;
  --color-branch-4-light: #3d3520;
  
  --color-branch-5: #a8c9a8;
  --color-branch-5-light: #1a2d1a;
  
  --color-vanish: #e8748c;
  --color-vanish-bg: #3d1a22;
  --color-vanish-dark: #c45a6e;
  --color-vanish-border: rgba(232, 116, 140, 0.4);
  --color-vanish-glow: rgba(232, 116, 140, 0.2);
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(50, 10, 20, 0.4);
  --shadow-lg: 0 4px 16px rgba(50, 10, 20, 0.5);
}

html[data-theme="dark-red"] .modal,
html[data-theme="dark-red"] .modal-overlay {
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

html[data-theme="dark-red"] .modal {
  background: rgba(26, 13, 18, 0.95);
  border: 1px solid rgba(232, 116, 140, 0.2);
  box-shadow: 
    0 8px 32px rgba(50, 10, 20, 0.4),
    inset 0 1px 0 rgba(232, 116, 140, 0.1);
}

html[data-theme="dark-red"] .modal-overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html[data-theme="dark-red"] .card,
html[data-theme="dark-red"] .card-item {
  background: rgba(45, 20, 25, 0.85);
  border: 1px solid rgba(232, 116, 140, 0.15);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(232, 116, 140, 0.05);
}

html[data-theme="dark-red"] .card:hover,
html[data-theme="dark-red"] .card-item:hover {
  background: rgba(61, 26, 34, 0.9);
  border-color: rgba(232, 116, 140, 0.25);
  box-shadow: 
    0 4px 12px rgba(50, 10, 20, 0.4),
    inset 0 1px 0 rgba(232, 116, 140, 0.1);
  transform: translateY(-1px);
}

html[data-theme="dark-red"] input,
html[data-theme="dark-red"] textarea,
html[data-theme="dark-red"] select {
  background: rgba(26, 13, 18, 0.7);
  border: 1px solid rgba(232, 116, 140, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f5e8ec;
}

html[data-theme="dark-red"] input:focus,
html[data-theme="dark-red"] textarea:focus,
html[data-theme="dark-red"] select:focus {
  background: rgba(45, 20, 25, 0.8);
  border-color: rgba(232, 116, 140, 0.5);
  box-shadow: 0 0 0 3px rgba(232, 116, 140, 0.15);
}

html[data-theme="dark-red"] input::placeholder,
html[data-theme="dark-red"] textarea::placeholder {
  color: #8a6a7a;
}

html[data-theme="dark-red"] .form-btn-primary {
  background: linear-gradient(135deg, #c45a6e, #9e3a4a);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 
    0 2px 8px rgba(158, 58, 74, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html[data-theme="dark-red"] .form-btn-primary:hover {
  background: linear-gradient(135deg, #e8748c, #c45a6e);
  box-shadow: 
    0 4px 12px rgba(158, 58, 74, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}