:root {
    --bg-primary: #1e1e1e;
    --bg-secondary: rgba(45, 45, 48, 0.92);
    --bg-tertiary: rgba(37, 37, 38, 0.8);
    --bg-glass: rgba(255, 255, 255, 0.04);
    --text-primary: #e0e0e0;
    --text-secondary: #aaaaaa;
    --text-tertiary: #888888;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-glow: rgba(59, 130, 246, 0.25);
    --accent-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
    --danger: #ef4444;
    --danger-hover: #f87171;
    --danger-glow: rgba(239, 68, 68, 0.2);
    --success: #22c55e;
    --success-glow: rgba(34, 197, 94, 0.2);
    --border: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.18);
    --card-bg: rgba(45, 45, 48, 0.75);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-hover-border: rgba(59, 130, 246, 0.4);
    --card-hover-glow: rgba(59, 130, 246, 0.08);
    --input-bg: rgba(45, 45, 48, 0.9);
    --input-focus-bg: rgba(50, 50, 54, 0.95);
    --btn-bg: rgba(255, 255, 255, 0.06);
    --btn-hover: rgba(255, 255, 255, 0.12);
    --preview-bg: #1a1a1a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.04);
    --backdrop-blur: blur(20px);
    --backdrop-blur-sm: blur(12px);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}