/**
 * Theme CSS Variables
 *
 * CSS custom properties for the theming system. These variables are
 * populated from the TypeScript theme definitions in /web/theme/.
 *
 * Default theme: emerald-dark - Default dark theme with emerald green accents
 *
 * Theme Switching:
 * This file now includes ALL themes with data-theme selectors.
 * Switch themes by setting the data-theme attribute:
 *   document.documentElement.setAttribute('data-theme', 'purple-dark');
 *
 * To change the default theme, update DEFAULT_THEME in /web/theme/registry.ts
 */

/* Default theme variables (for backward compatibility) */

    :root {
      /* Primary colors */
      --color-primary: #10b981;
      --color-primary-foreground: #020617;
      --color-primary-hover: #059669;
      --color-primary-light: #34d399;
      --color-primary-dim: rgba(16, 185, 129, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #10b981;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  

/* All themes with data-theme selectors for runtime switching */

    [data-theme="emerald-dark"] {
      /* Primary colors */
      --color-primary: #10b981;
      --color-primary-foreground: #020617;
      --color-primary-hover: #059669;
      --color-primary-light: #34d399;
      --color-primary-dim: rgba(16, 185, 129, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #10b981;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="purple-dark"] {
      /* Primary colors */
      --color-primary: #8b5cf6;
      --color-primary-foreground: #020617;
      --color-primary-hover: #7c3aed;
      --color-primary-light: #a78bfa;
      --color-primary-dim: rgba(139, 92, 246, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #8b5cf6;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="orange-dark"] {
      /* Primary colors */
      --color-primary: #f97316;
      --color-primary-foreground: #020617;
      --color-primary-hover: #ea580c;
      --color-primary-light: #fdba74;
      --color-primary-dim: rgba(249, 115, 22, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #f97316;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="blue-dark"] {
      /* Primary colors */
      --color-primary: #3b82f6;
      --color-primary-foreground: #020617;
      --color-primary-hover: #2563eb;
      --color-primary-light: #60a5fa;
      --color-primary-dim: rgba(59, 130, 246, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #3b82f6;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="high-contrast"] {
      /* Primary colors */
      --color-primary: #00ff00;
      --color-primary-foreground: #000000;
      --color-primary-hover: #00cc00;
      --color-primary-light: #00ff88;
      --color-primary-dim: rgba(0, 255, 0, 0.3);

      /* Secondary colors */
      --color-secondary: #ff0000;
      --color-secondary-foreground: #000000;
      --color-secondary-hover: #cc0000;
      --color-secondary-light: #ff6666;
      --color-secondary-dim: rgba(255, 0, 0, 0.3);

      /* Neutral backgrounds */
      --color-bg: #000000;
      --color-bg-elevated: #0a0a0a;
      --color-bg-surface: #111111;

      /* Neutral text */
      --color-text: #ffffff;
      --color-text-muted: #cccccc;
      --color-text-disabled: #666666;

      /* Neutral borders */
      --color-border: #ffffff;
      --color-border-hover: #ffff00;
      --color-border-focus: #00ff00;

      /* Semantic colors */
      --color-success: #00ff00;
      --color-warning: #ffff00;
      --color-error: #ff0000;
      --color-info: #00ffff;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.2);
      --shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
      --shadow-md: 0 4px 16px rgba(255, 255, 255, 0.4);
      --shadow-lg: 0 8px 32px rgba(255, 255, 255, 0.5);
      --shadow-glow: 0 0 10px currentColor, 0 0 20px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor, 0 0 20px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="pink-dark"] {
      /* Primary colors */
      --color-primary: #ec4899;
      --color-primary-foreground: #020617;
      --color-primary-hover: #db2777;
      --color-primary-light: #f472b6;
      --color-primary-dim: rgba(236, 72, 153, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #ec4899;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(236, 72, 153, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 72, 153, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="teal-dark"] {
      /* Primary colors */
      --color-primary: #14b8a6;
      --color-primary-foreground: #020617;
      --color-primary-hover: #0d9488;
      --color-primary-light: #2dd4bf;
      --color-primary-dim: rgba(20, 184, 166, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #14b8a6;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(20, 184, 166, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="rose-dark"] {
      /* Primary colors */
      --color-primary: #f43f5e;
      --color-primary-foreground: #020617;
      --color-primary-hover: #e11d48;
      --color-primary-light: #fb7185;
      --color-primary-dim: rgba(244, 63, 94, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #f43f5e;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(244, 63, 94, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 63, 94, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="cyan-dark"] {
      /* Primary colors */
      --color-primary: #06b6d4;
      --color-primary-foreground: #020617;
      --color-primary-hover: #0891b2;
      --color-primary-light: #22d3ee;
      --color-primary-dim: rgba(6, 182, 212, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #06b6d4;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="yellow-dark"] {
      /* Primary colors */
      --color-primary: #fbbf24;
      --color-primary-foreground: #020617;
      --color-primary-hover: #f59e0b;
      --color-primary-light: #fcd34d;
      --color-primary-dim: rgba(251, 191, 36, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #fbbf24;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(251, 191, 36, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 191, 36, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="indigo-dark"] {
      /* Primary colors */
      --color-primary: #6366f1;
      --color-primary-foreground: #020617;
      --color-primary-hover: #4f46e5;
      --color-primary-light: #818cf8;
      --color-primary-dim: rgba(99, 102, 241, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #6366f1;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="lime-dark"] {
      /* Primary colors */
      --color-primary: #84cc16;
      --color-primary-foreground: #020617;
      --color-primary-hover: #65a30d;
      --color-primary-light: #a3e635;
      --color-primary-dim: rgba(132, 204, 22, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #84cc16;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(132, 204, 22, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(132, 204, 22, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  


    [data-theme="violet-dark"] {
      /* Primary colors */
      --color-primary: #7c3aed;
      --color-primary-foreground: #020617;
      --color-primary-hover: #6d28d9;
      --color-primary-light: #a78bfa;
      --color-primary-dim: rgba(124, 58, 237, 0.3);

      /* Secondary colors */
      --color-secondary: #ef4444;
      --color-secondary-foreground: #020617;
      --color-secondary-hover: #dc2626;
      --color-secondary-light: #f87171;
      --color-secondary-dim: rgba(239, 68, 68, 0.3);

      /* Neutral backgrounds */
      --color-bg: #020617;
      --color-bg-elevated: #0f172a;
      --color-bg-surface: #0a0a0a;

      /* Neutral text */
      --color-text: #e2e8f0;
      --color-text-muted: #94a3b8;
      --color-text-disabled: #4a5568;

      /* Neutral borders */
      --color-border: #1e293b;
      --color-border-hover: #334155;
      --color-border-focus: #7c3aed;

      /* Semantic colors */
      --color-success: #10b981;
      --color-warning: #f59e0b;
      --color-error: #ef4444;
      --color-info: #3b82f6;

      /* Typography */
      --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Menlo', monospace;
      --font-display: 'Space Grotesk', 'Inter', 'Helvetica Neue', sans-serif;
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-base: 1rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 1.875rem;
      --font-size-4xl: 2.25rem;
      --font-size-5xl: 3rem;
      --font-size-6xl: 3.75rem;
      --font-size-7xl: 4.5rem;
      --font-weight-normal: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;
      --line-height-tight: 1.25;
      --line-height-normal: 1.6;
      --line-height-relaxed: 1.75;

      /* Spacing */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 0.75rem;
      --spacing-lg: 1rem;
      --spacing-xl: 1.5rem;
      --spacing-2xl: 2rem;
      --spacing-3xl: 3rem;
      --spacing-4xl: 4rem;

      /* Border radius */
      --radius-none: 0;
      --radius-sm: 0.125rem;
      --radius: 0.25rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
      --shadow-glow: 0 0 10px currentColor;

      /* Effects */
      --effect-terminal-glow: 0 0 10px currentColor;
      --effect-scanlines: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      --effect-grid-pattern: linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
      --effect-backdrop-blur: blur(12px);
      --effect-transition: all 0.15s ease-in-out;
    }
  



/**
 * Theme Utility Classes
 */


    /* Primary color utilities */
    .bg-primary { background-color: var(--color-primary); }
    .bg-primary-foreground { background-color: var(--color-primary-foreground); }
    .bg-primary-hover { background-color: var(--color-primary-hover); }
    .bg-primary-light { background-color: var(--color-primary-light); }
    .bg-primary-dim { background-color: var(--color-primary-dim); }
    .text-primary { color: var(--color-primary); }
    .text-primary-foreground { color: var(--color-primary-foreground); }
    .border-primary { border-color: var(--color-primary); }
    .border-primary-dim { border-color: var(--color-primary-dim); }
    .hover\:bg-primary:hover { background-color: var(--color-primary); }
    .hover\:bg-primary-hover:hover { background-color: var(--color-primary-hover); }
    .hover\:text-primary:hover { color: var(--color-primary); }
    .hover\:border-primary:hover { border-color: var(--color-primary); }

    /* Secondary color utilities */
    .bg-secondary { background-color: var(--color-secondary); }
    .bg-secondary-foreground { background-color: var(--color-secondary-foreground); }
    .bg-secondary-hover { background-color: var(--color-secondary-hover); }
    .bg-secondary-light { background-color: var(--color-secondary-light); }
    .bg-secondary-dim { background-color: var(--color-secondary-dim); }
    .text-secondary { color: var(--color-secondary); }
    .text-secondary-foreground { color: var(--color-secondary-foreground); }
    .border-secondary { border-color: var(--color-secondary); }
    .border-secondary-dim { border-color: var(--color-secondary-dim); }
    .hover\:bg-secondary:hover { background-color: var(--color-secondary); }
    .hover\:text-secondary:hover { color: var(--color-secondary); }

    /* Background utilities */
    .bg { background-color: var(--color-bg); }
    .bg-elevated { background-color: var(--color-bg-elevated); }
    .bg-surface { background-color: var(--color-bg-surface); }

    /* Text utilities */
    .text { color: var(--color-text); }
    .text-muted { color: var(--color-text-muted); }
    .text-disabled { color: var(--color-text-disabled); }

    /* Border utilities */
    .border { border-color: var(--color-border); }
    .border-default { border-color: var(--color-border); }
    .hover\:border:hover { border-color: var(--color-border-hover); }
    .hover\:border-focus:hover { border-color: var(--color-border-focus); }
    .focus\:border:focus { border-color: var(--color-border-focus); }

    /* Semantic color utilities */
    .bg-success { background-color: var(--color-success); }
    .bg-warning { background-color: var(--color-warning); }
    .bg-error { background-color: var(--color-error); }
    .bg-info { background-color: var(--color-info); }
    .text-success { color: var(--color-success); }
    .text-warning { color: var(--color-warning); }
    .text-error { color: var(--color-error); }
    .text-info { color: var(--color-info); }
    .border-success { border-color: var(--color-success); }
    .border-error { border-color: var(--color-error); }

    /* Focus outline */
    *:focus-visible {
      outline-color: var(--color-border-focus) !important;
    }

    /* Grid pattern with theme color */
    .grid-pattern {
      background-image: linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
    }

    /* Terminal glow effect */
    .terminal-glow {
      text-shadow: 0 0 10px currentColor;
    }

    /* Scanline effect */
    .scanlines::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 2px);
      z-index: 9999;
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--color-bg-elevated); }
    ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }