:root {
  /* ==========================================================================
     SACRED BRAND LOGO PRIMARY PALETTE (MUST NEVER CHANGE IN ANY THEME)
     Logo stops: #6b2fa0 (deep) | #9b5de5 (mid) | #b77cf2 (light)
     ========================================================================== */
  --brand-logo-deep: #6b2fa0;
  --brand-logo-mid: #9b5de5;
  --brand-logo-light: #b77cf2;

  /* Primary Brand Definitions Strictly from Logo */
  --primary: #9b5de5;
  --primary-hover: #8338ec;
  --primary-focus: #6b2fa0;
  --primary-deep: #6b2fa0;
  --primary-light: #b77cf2;
  --primary-glow: rgba(155, 93, 229, 0.35);
  --primary-rgb: 155, 93, 229;

  /* Bootstrap Core Overrides */
  --bs-primary: #9b5de5;
  --bs-primary-rgb: 155, 93, 229;
  --bs-primary-text-emphasis: #9b5de5;
  --bs-primary-bg-subtle: rgba(155, 93, 229, 0.15);
  --bs-primary-border-subtle: rgba(155, 93, 229, 0.3);
  --bs-secondary: #b8a9d4;
  --bs-secondary-rgb: 184, 169, 212;
  --bs-secondary-color: #b8a9d4;
  --bs-secondary-bg: #0d0020;
  --bs-secondary-bg-subtle: rgba(184, 169, 212, 0.12);
  --bs-secondary-border-subtle: rgba(184, 169, 212, 0.25);
  --bs-tertiary-color: #7a6b9a;
  --bs-tertiary-bg: #160038;
  --bs-link-color: #9b5de5;
  --bs-link-hover-color: #b77cf2;
  --bs-heading-color: #f0e6ff;
  --bs-body-color: #f0e6ff;
  --bs-body-bg: #050010;

  --secondary-h: 215;
  --secondary-s: 15%;
  --secondary-l: 15%;
  --secondary: HSL(var(--secondary-h), var(--secondary-s), var(--secondary-l));

  /* DEFAULT DARK LUXURY THEME BACKGROUNDS */
  --bg-primary: #050010;
  --bg-secondary: #0d0020;
  --bg-card: linear-gradient(135deg, rgba(21, 0, 43, 0.9), rgba(26, 0, 69, 0.8));
  --bg-card-hover: linear-gradient(135deg, rgba(31, 0, 64, 0.95), rgba(45, 0, 107, 0.85));
  --border-color: #2d154d;
  --text-primary: #f0e6ff;
  --auth-card-bg: linear-gradient(145deg, rgba(26, 12, 54, 0.9) 0%, rgba(15, 6, 32, 0.96) 100%);
  --auth-card-border: rgba(155, 93, 229, 0.35);
  --auth-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(155, 93, 229, 0.18);
  --table-hover-bg: rgba(155, 93, 229, 0.18);
  --code-window-bg: #080314;
  --code-window-header-bg: #190a36;
  --code-window-border: rgba(155, 93, 229, 0.4);
  --code-pre-color: #00f0ff;
  --cockpit-panel-bg: linear-gradient(145deg, rgba(20, 12, 42, 0.92) 0%, rgba(12, 6, 28, 0.96) 100%);
  --cockpit-panel-border: rgba(155, 93, 229, 0.3);
  --cockpit-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --cockpit-card-bg: linear-gradient(145deg, rgba(26, 16, 54, 0.85) 0%, rgba(16, 8, 38, 0.95) 100%);
  --cockpit-card-hover-bg: linear-gradient(145deg, rgba(38, 24, 76, 0.95) 0%, rgba(24, 12, 54, 0.98) 100%);
  --cockpit-card-border: rgba(155, 93, 229, 0.32);
  --cockpit-card-hover-border: rgba(183, 124, 242, 0.65);
  --cockpit-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  --cockpit-card-hover-shadow: 0 8px 30px rgba(107, 47, 160, 0.35);
  --text-secondary: #b8a9d4;
  --text-muted: #7a6b9a;

  /* Unified Select Tokens (100% Opaque Solid Surfaces) */
  --select-bg: #0e0622;
  --select-border: rgba(155, 93, 229, 0.35);
  --select-search-bg: #160c33;

  /* Architecture Sandbox Tokens (Dark Mode) */
  --arch-visual-bg: linear-gradient(145deg, rgba(20, 10, 42, 0.92) 0%, rgba(12, 5, 28, 0.96) 100%);
  --arch-visual-border: rgba(155, 93, 229, 0.35);
  --arch-visual-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(107, 47, 160, 0.2);
  --arch-btn-bg: rgba(255, 255, 255, 0.03);
  --arch-btn-border: rgba(155, 93, 229, 0.2);
  --arch-btn-hover-bg: rgba(155, 93, 229, 0.1);
  --arch-btn-hover-border: rgba(183, 124, 242, 0.45);
  --arch-btn-active-bg: linear-gradient(135deg, rgba(107, 47, 160, 0.55) 0%, rgba(155, 93, 229, 0.4) 100%);
  --arch-btn-active-border: #b77cf2;
  --arch-btn-active-shadow: 0 8px 25px rgba(155, 93, 229, 0.35);
  --arch-badge-bg: linear-gradient(135deg, rgba(155, 93, 229, 0.4) 0%, rgba(107, 47, 160, 0.6) 100%);
  --arch-badge-color: #f0e6ff;
  --arch-badge-border: rgba(183, 124, 242, 0.5);
  --arch-node-bg: rgba(26, 12, 54, 0.7);
  --arch-node-border: rgba(155, 93, 229, 0.25);
  --arch-node-active-bg: rgba(0, 212, 255, 0.1);
  --arch-node-active-border: #00d4ff;
  --arch-spec-box-bg: rgba(10, 4, 26, 0.7);
  --arch-spec-box-border: rgba(155, 93, 229, 0.2);
  --arch-terminal-bg: #060110;
  --arch-terminal-border: rgba(155, 93, 229, 0.3);
  --arch-pill-bg: rgba(155, 93, 229, 0.2);
  --arch-pill-color: #d5aaff;
  --arch-terminal-hash: #00f0ff;
  --arch-btn-active-subtext: #d5aaff;

  /* FLUID TYPOGRAPHY SCALE (clamp-based) */
  --text-xs: clamp(0.7rem, 0.8vw, 0.8rem);
  --text-sm: clamp(0.8rem, 1vw, 0.9rem);
  --text-base: clamp(0.95rem, 1.2vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1.5vw, 1.25rem);
  --text-xl: clamp(1.3rem, 2vw, 1.5rem);

  --border-radius: 12px;
  --border-radius-lg: 20px;
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* Original Palette variables mapped for compatibility */
  --purple-900: #050010;
  --purple-800: #0d0020;
  --purple-700: #160038;
  --purple-600: #280060;
  --purple-500: #6b2fa0;
  --purple-400: #9b5de5;
  --purple-300: #b77cf2;
  --purple-200: #d5aaff;
  --purple-100: #edd9ff;
  --accent-pink: #ff2d95;
  --accent-cyan: #00d4ff;
  --bg-dark: linear-gradient(135deg, #050010 0%, #0d0020 30%, #0a0018 60%, #160038 100%);
  --navbar-bg: rgba(5, 0, 16, 0.92);
  --navbar-shadow: 0 4px 30px rgba(107, 47, 160, 0.25);
  --preloader-bg: #050010;
  --scrollbar-track: #050010;
  --scrollbar-thumb: #2d006b;
  --gradient-primary: linear-gradient(135deg, #6b2fa0, #9b5de5, #b77cf2);
  --gradient-accent: linear-gradient(135deg, #ff2d95, #9b5de5);
  --gradient-dark: linear-gradient(180deg, #050010 0%, #0d0020 30%, #0a0018 60%, #160038 100%);
  --shadow-sm: 0 2px 8px rgba(107, 47, 160, 0.2);
  --shadow-md: 0 4px 20px rgba(107, 47, 160, 0.3);
  --shadow-lg: 0 8px 40px rgba(107, 47, 160, 0.4);
  --shadow-glow: 0 0 30px rgba(155, 93, 229, 0.35);
  --footer-bg: linear-gradient(180deg, #050010, #0d0020);
  --footer-border: #2d154d;
  --table-bg: rgba(21, 0, 43, 0.8);
  --table-stripe: rgba(107, 47, 160, 0.12);
  --badge-bg: rgba(107, 47, 160, 0.2);
  --filter-btn-bg: transparent;
  --filter-btn-hover-bg: #2d006b;
  
  --font-main: 'Cairo', 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --primary: var(--brand-logo-mid);
  --secondary: var(--accent-pink);
  --success: #10b981;
  --success-pulse-glow-1: rgba(16, 185, 129, 0.7);
  --success-pulse-glow-2: rgba(16, 185, 129, 0);
  --accent-danger: #ef4444;
  --danger-glow-sm: rgba(239, 68, 68, 0.4);
  --danger-glow-md: rgba(239, 68, 68, 0.6);
  --danger-glow-lg: rgba(239, 68, 68, 0.8);
  --danger-glow-xs: rgba(239, 68, 68, 0.1);
  --danger-glow-30: rgba(239, 68, 68, 0.3);
  --inset-shadow-color: rgba(0, 0, 0, 0.25);
  --accent-warning: #f59e0b;
  --card-border: var(--border-color);
  
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;
  
  --brand-glow-strong: rgba(155, 93, 229, 0.4);
  --accent-cyan-glow: rgba(0, 212, 255, 0.15);
  --form-input-bg: rgba(107, 47, 160, 0.05);
  --input-focus-shadow: 0 0 10px rgba(155, 93, 229, 0.15);
  --sandbox-panel-bg: rgba(0, 0, 0, 0.25);
  --url-field-bg: rgba(0, 0, 0, 0.4);
  --spinner-border-track: rgba(255, 255, 255, 0.05);
  --param-table-bg: rgba(0, 0, 0, 0.2);
  --param-table-header-bg: rgba(255, 255, 255, 0.03);
  --badge-required-bg: rgba(239, 68, 68, 0.15);
  --badge-required-border: rgba(239, 68, 68, 0.2);
  --callout-bg: rgba(16, 185, 129, 0.05);
  --error-glow-color: rgba(155, 93, 229, 0.15);
  --forbidden-glow-color: rgba(255, 45, 149, 0.15);
  --error-shadow-glow: 0 0 15px rgba(155, 93, 229, 0.3);
  --forbidden-shadow-glow: 0 0 15px rgba(255, 45, 149, 0.3);
  --copy-btn-bg: rgba(255, 255, 255, 0.06);
  --copy-btn-border: rgba(255, 255, 255, 0.1);
  --copy-btn-hover-bg: rgba(255, 255, 255, 0.15);
  --param-name-color: var(--accent-cyan);
  --callout-strong-color: var(--purple-300);
  
  /* MAIN WEBSITE SPECIFIC VARIABLES */
  --ambient-glow-1: rgba(107, 47, 160, 0.15);
  --ambient-glow-2: rgba(155, 93, 229, 0.1);
  --ambient-glow-3: rgba(255, 45, 149, 0.06);
  --ambient-glow-4: rgba(0, 212, 255, 0.04);
  --ambient-glow-5: rgba(107, 47, 160, 0.08);
  --ambient-grid-color: rgba(107, 47, 160, 0.03);
  --ambient-orb-color-1: rgba(107, 47, 160, 0.12);
  --ambient-orb-color-2: rgba(155, 93, 229, 0.08);
  --ambient-orb-color-3: rgba(255, 45, 149, 0.05);
  --focus-ring-shadow: 0 0 0 3px rgba(107, 47, 160, 0.3);
  --btn-accent-glow: 0 0 30px rgba(255, 45, 149, 0.3);
  --glow-pulse-1: 0 0 20px rgba(155, 93, 229, 0.3);
  --glow-pulse-2: 0 0 40px rgba(155, 93, 229, 0.6);
  --grid-dot-color: rgba(255, 255, 255, 0.02);
  --feature-icon-bg: rgba(107, 47, 160, 0.15);
  --footer-social-bg: rgba(107, 47, 160, 0.15);
  --contact-icon-bg: rgba(107, 47, 160, 0.15);
  --template-tag-bg: rgba(107, 47, 160, 0.15);
  --template-tag-color: var(--purple-300);
  --cookie-banner-bg: rgba(18, 9, 36, 0.85);
  --cookie-banner-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  --cookie-consent-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --search-icon-bg: rgba(107, 47, 160, 0.15);
  --invalid-focus-shadow: 0 0 0 3px rgba(255, 45, 149, 0.2);
  --valid-focus-shadow: 0 0 0 3px rgba(39, 201, 63, 0.2);
  --pricing-border-color: rgba(45, 21, 77, 0.5);
  --star-color: #ffc107;
  --success-color: #27c93f;
  --warning-color: #ffbd2e;
  --success-bg-glow: rgba(39, 201, 63, 0.15);
  --warning-bg-glow: rgba(255, 189, 46, 0.15);
  --desc-text-color: var(--text-secondary);
  --input-border-color: var(--border-color);
  --card-shadow-ambient-1: 0 1px 3px rgba(155, 93, 229, 0.2);
  --card-shadow-ambient-2: 0 1px 2px rgba(155, 93, 229, 0.15);
  --card-shadow-ambient-3: 0 10px 50px rgba(107, 47, 160, 0.3);
  --card-shadow-ambient-4: 0 8px 32px rgba(155, 93, 229, 0.25);
  
  /* Terminal / Code Editor Theme (Dark Default) */
  --terminal-bg: #090317;
  --terminal-header: #120926;
  --terminal-border: #24143f;
  --terminal-code-color: #e8dbff;
  --terminal-comment-color: #796699;

  /* ==========================================================================
     SEMANTIC DESIGN TOKENS & BRAND GRADIENTS (تم النقل والترتيب لسهولة التعديل)
     ========================================================================== */

  /* === BRAND GRADIENTS (الغراديانت بأسماء واضحة) === */
  --grad-violet-blue: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  --grad-emerald-cyan: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-emerald-cyan-v: linear-gradient(180deg, #10b981 0%, #06b6d4 100%);
  --grad-cyan-blue: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --grad-amber-red: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-indigo-violet: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-violet-indigo: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --grad-pink-violet: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  --grad-violet-pink: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  --grad-amber-pink: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
  --grad-violet-cyan: linear-gradient(135deg, #8b5cf6 0%, #00f0ff 100%);
  --grad-purple-cyan: linear-gradient(135deg, #a855f7 0%, #00f0ff 100%);
  --grad-purple-cyan-v: linear-gradient(180deg, #9b5de5 0%, #00d4ff 100%);
  --grad-card-light: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  --grad-shimmer-card: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  --grad-border-glow: linear-gradient(90deg, transparent, #00f0ff, #a855f7, transparent);
  --grad-cockpit-gateway: linear-gradient(145deg, rgba(19, 26, 45, 0.85) 0%, rgba(10, 14, 26, 0.95) 100%);
  --grad-cockpit-header: linear-gradient(135deg, rgba(17, 21, 34, 0.88) 0%, rgba(10, 14, 26, 0.96) 100%);
  --grad-violet-cyan-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(0, 240, 255, 0.15) 100%);
  --grad-cyan-violet-soft: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  --grad-violet-cyan-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(0, 240, 255, 0.08) 100%);
  --grad-cyan-violet-subtle: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
  --grad-violet-cyan-v: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(0, 240, 255, 0.08) 100%);
  --grad-emerald-cyan-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.12) 100%);
  --grad-emerald-cyan-soft: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.08) 100%);
  --grad-violet-cyan-accent: linear-gradient(135deg, rgba(139, 92, 246, 0.55) 0%, rgba(6, 182, 212, 0.3) 100%);
  --grad-ambient-glow: linear-gradient(135deg, var(--ambient-glow-1), var(--ambient-glow-2));
  --grad-line-glow-r: linear-gradient(90deg, var(--purple-600), transparent);
  --grad-line-glow-l: linear-gradient(-90deg, var(--purple-600), transparent);
  --grad-card-fade: linear-gradient(180deg, transparent 50%, var(--bg-card));
  --grad-brand-highlight: linear-gradient(90deg, rgba(0, 240, 255, 0.1), rgba(155, 93, 229, 0.4), rgba(16, 185, 129, 0.1));

  /* === AMBIENT RADIAL GLOWS (توهجات الخلفية السحابية) === */
  --ambient-glow-radial-1: radial-gradient(ellipse at 15% 30%, var(--ambient-glow-1) 0%, transparent 40%);
  --ambient-glow-radial-2: radial-gradient(ellipse at 85% 20%, var(--ambient-glow-2) 0%, transparent 40%);
  --ambient-glow-radial-3: radial-gradient(ellipse at 50% 70%, var(--ambient-glow-3) 0%, transparent 40%);
  --ambient-glow-radial-4: radial-gradient(ellipse at 30% 80%, var(--ambient-glow-4) 0%, transparent 30%);
  --ambient-glow-radial-5: radial-gradient(ellipse at 70% 60%, var(--ambient-glow-5) 0%, transparent 35%);
  --ambient-orb-radial-1: radial-gradient(ellipse at 20% 50%, var(--ambient-orb-color-1) 0%, transparent 50%);
  --ambient-orb-radial-2: radial-gradient(ellipse at 80% 20%, var(--ambient-orb-color-2) 0%, transparent 50%);
  --ambient-orb-radial-3: radial-gradient(ellipse at 50% 80%, var(--ambient-orb-color-3) 0%, transparent 50%);
  --ambient-grid-h: linear-gradient(90deg, transparent, transparent 80px, var(--ambient-grid-color) 80px, var(--ambient-grid-color) 81px);
  --ambient-grid-v: linear-gradient(0deg, transparent, transparent 80px, var(--ambient-grid-color) 80px, var(--ambient-grid-color) 81px);
  --ambient-dot-orb-3: radial-gradient(circle at 70% 30%, var(--ambient-orb-color-3) 0%, transparent 1px);
  --ambient-dot-glow-3: radial-gradient(circle at 30% 70%, var(--ambient-glow-3) 0%, transparent 1px);
  --ambient-vignette: radial-gradient(circle at 60% 40%, rgba(11, 15, 25, 0.4) 0%, var(--bg-dark, #050811) 90%);
  --ambient-radial-vignette: radial-gradient(circle at 50% 50%, rgba(11, 15, 25, 0.4) 0%, rgba(11, 15, 25, 0.95) 100%);
  --ambient-grid-dots: radial-gradient(var(--grid-dot-color) 1px, transparent 1px);
  --ambient-circle-glow: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
  --ambient-center-glow: radial-gradient(ellipse at center, rgba(155, 93, 229, 0.18) 0%, rgba(0, 240, 255, 0.08) 45%, transparent 70%);

  /* === CORE COLOR TOKENS (ألوان العناصر والرموز) === */
  --color-violet-500: #8b5cf6;
  --color-violet-400: #9b5de5;
  --color-violet-300: #b77cf2;
  --color-violet-200: #d6b4fc;
  --color-violet-deep: #2d006b;
  --color-purple-500: #a855f7;
  --color-purple-600: #8b3eea;
  --color-indigo-500: #6366f1;
  --color-indigo-400: #818cf8;
  --color-cyan-vivid: #00f0ff;
  --color-cyan-teal: #06b6d4;
  --color-sky-400: #38bdf8;
  --color-blue-500: #3b82f6;
  --color-emerald-500: #10b981;
  --color-emerald-400: #34d399;
  --color-emerald-600: #059669;
  --color-amber-500: #f59e0b;
  --color-amber-400: #fbbf24;
  --color-amber-600: #d97706;
  --color-amber-light: #ffbd2e;
  --color-rose-500: #ef4444;
  --color-rose-400: #f87171;
  --color-rose-600: #dc2626;
  --color-rose-light: #ff5f56;
  --color-pink-500: #ec4899;
  --color-success-indicator: #27c93f;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-zinc-500: #71717a;
  --color-zinc-400: #a1a1aa;
  --color-slate-300: #cbd5e1;
  --color-dark-core: #050010;
  --color-dark-panel: #080b13;
  --color-dark-surface: #080c14;
  --color-dark-abyss: #06090e;
  --color-dark-subtle: #0a0e14;
  --color-dark-elevated: #0c1017;
  --color-dark-hover: #0d121f;
  --color-dark-purple-88: rgba(13, 0, 32, 0.88);
  --cockpit-panel-dark: rgba(15, 19, 32, 0.96);
  --cockpit-card-dark: rgba(6, 8, 15, 0.82);
  --cockpit-bg: var(--bg-dark);
  --cockpit-panel: rgba(15, 19, 32, 0.96);
  --cockpit-card: rgba(6, 8, 15, 0.82);
  --cockpit-card-hover: rgba(15, 19, 32, 1);
  --cockpit-border: rgba(139, 92, 246, 0.3);
  --cockpit-border-bright: rgba(139, 92, 246, 0.6);
  --cockpit-primary: var(--primary);
  --cockpit-cyan: var(--accent-cyan);
  --cockpit-green: var(--success);
  --cockpit-amber: #f59e0b;
  --cockpit-rose: #ef4444;
  --cockpit-text-white: #ffffff;
  --cockpit-text-muted: rgba(255, 255, 255, 0.6);
  --cockpit-font-mono: 'JetBrains Mono', monospace;
  --cockpit-gauge-track: rgba(139, 92, 246, 0.2);
  --cockpit-terminal-bg: #090317;
  --cockpit-terminal-header: #120926;
  --cockpit-terminal-border: rgba(139, 92, 246, 0.3);
  --cockpit-input-bg: rgba(6, 8, 15, 0.5);
  --color-purple-light-50: #faf5ff;
  --color-purple-light-100: #f3e8ff;
  --color-purple-light-hover: #f5f0ff;

  /* === THIRD PARTY / BRAND ASSETS === */
  --google-blue: #4285f4;
  --google-green: #34a853;
  --google-yellow: #fbbc05;
  --google-red: #ea4335;
  --color-mac-close: rgba(255, 95, 86, 0.5);
  --color-mac-minimize: rgba(255, 189, 46, 0.5);
  --color-mac-expand: rgba(39, 201, 63, 0.5);

  /* === GLASS & BADGE THEMES (تأثيرات الزجاج والشارات) === */
  --glass-cyan-bg-soft: rgba(0, 240, 255, 0.08);
  --glass-cyan-bg-subtle: rgba(0, 240, 255, 0.1);
  --glass-cyan-bg: rgba(0, 240, 255, 0.14);
  --glass-cyan-border: rgba(0, 240, 255, 0.35);
  --glass-cyan-border-strong: rgba(0, 240, 255, 0.45);
  --glass-cyan-glow: rgba(0, 240, 255, 0.25);
  --glass-emerald-bg-soft: rgba(16, 185, 129, 0.06);
  --glass-emerald-bg-subtle: rgba(16, 185, 129, 0.1);
  --glass-emerald-bg: rgba(16, 185, 129, 0.15);
  --glass-emerald-border: rgba(16, 185, 129, 0.35);
  --glass-emerald-border-strong: rgba(16, 185, 129, 0.45);
  --glass-emerald-glow: rgba(16, 185, 129, 0.25);
  --glass-emerald-glow-strong: rgba(16, 185, 129, 0.5);
  --glass-emerald-pulse: rgba(16, 185, 129, 0.7);
  --glass-emerald-border-light: rgba(5, 150, 105, 0.32);
  --glass-violet-bg-soft: rgba(139, 92, 246, 0.05);
  --glass-violet-bg-subtle: rgba(139, 92, 246, 0.08);
  --glass-violet-bg: rgba(139, 92, 246, 0.15);
  --glass-violet-border-subtle: rgba(139, 92, 246, 0.28);
  --glass-violet-border: rgba(139, 92, 246, 0.35);
  --glass-violet-border-strong: rgba(139, 92, 246, 0.45);
  --glass-violet-glow: rgba(139, 92, 246, 0.25);
  --glass-violet-glow-strong: rgba(139, 92, 246, 0.55);
  --glass-violet-shadow: rgba(139, 92, 246, 0.65);
  --glass-purple-light-subtle: rgba(139, 62, 234, 0.04);
  --glass-purple-light-soft: rgba(139, 62, 234, 0.08);
  --glass-purple-light-border: rgba(139, 62, 234, 0.12);
  --glass-purple-subtle: rgba(155, 93, 229, 0.05);
  --glass-purple-soft: rgba(155, 93, 229, 0.14);
  --glass-purple-border: rgba(155, 93, 229, 0.35);
  --glass-purple-glow: rgba(155, 93, 229, 0.45);
  --glass-purple-glow-strong: rgba(155, 93, 229, 0.5);
  --glass-purple-shadow: rgba(155, 93, 229, 0.65);
  --glass-indigo-bg: rgba(99, 102, 241, 0.15);
  --glass-indigo-border: rgba(99, 102, 241, 0.35);
  --glass-teal-bg-soft: rgba(6, 182, 212, 0.06);
  --glass-teal-bg: rgba(6, 182, 212, 0.14);
  --glass-teal-border: rgba(6, 182, 212, 0.35);
  --glass-teal-border-strong: rgba(6, 182, 212, 0.5);
  --glass-teal-glow: rgba(6, 182, 212, 0.25);
  --glass-amber-bg: rgba(245, 158, 11, 0.14);
  --glass-amber-border: rgba(245, 158, 11, 0.35);
  --glass-rose-bg-soft: rgba(239, 68, 68, 0.08);
  --glass-rose-bg: rgba(239, 68, 68, 0.14);
  --glass-rose-border: rgba(239, 68, 68, 0.35);
  --glass-rose-border-strong: rgba(239, 68, 68, 0.4);
  --glass-rose-glow: rgba(239, 68, 68, 0.25);
  --glass-white-02: rgba(255, 255, 255, 0.02);
  --glass-white-03: rgba(255, 255, 255, 0.03);
  --glass-white-04: rgba(255, 255, 255, 0.04);
  --glass-white-05: rgba(255, 255, 255, 0.05);
  --glass-white-06: rgba(255, 255, 255, 0.06);
  --glass-white-07: rgba(255, 255, 255, 0.07);
  --glass-white-08: rgba(255, 255, 255, 0.08);
  --glass-white-10: rgba(255, 255, 255, 0.1);
  --glass-white-15: rgba(255, 255, 255, 0.15);
  --glass-white-20: rgba(255, 255, 255, 0.2);
  --glass-white-35: rgba(255, 255, 255, 0.35);
  --glass-white-55: rgba(255, 255, 255, 0.55);
  --glass-black-08: rgba(0, 0, 0, 0.08);
  --glass-black-20: rgba(0, 0, 0, 0.2);
  --glass-black-25: rgba(0, 0, 0, 0.25);
  --glass-black-30: rgba(0, 0, 0, 0.3);
  --glass-black-35: rgba(0, 0, 0, 0.35);
  --glass-black-40: rgba(0, 0, 0, 0.4);
  --glass-black-45: rgba(0, 0, 0, 0.45);
  --glass-black-50: rgba(0, 0, 0, 0.5);
  --glass-black-60: rgba(0, 0, 0, 0.6);
  --glass-black-65: rgba(0, 0, 0, 0.65);
  --glass-black-75: rgba(0, 0, 0, 0.75);
  --glass-black-80: rgba(0, 0, 0, 0.8);

  /* === CHAT & LIVE SIMULATOR (المحادثة والمحاكي) === */
  --chat-bg-dark: #0b141a;
  --chat-header-dark: #202c33;
  --chat-bubble-in-dark: #202c33;
  --chat-bubble-out-dark: #005c4b;
  --chat-bubble-text: #e9edef;
  --chat-input-dark: #2a3942;
  --chat-bg-pattern-dark: radial-gradient(#1f2c34 1px, transparent 1px);
  --chat-bg-light: #efeae2;
  --chat-header-light: #f0f2f5;
  --chat-bubble-in-light: #ffffff;
  --chat-bubble-out-light: #d9fdd3;
  --chat-text-light: #111b21;
  --chat-meta-light: #667781;
  --chat-bg-pattern-light: radial-gradient(#d1d7db 1px, transparent 1px);
  /* === EXTENDED LUXURY & CONSOLE TOKENS === */
  --color-sky-600: #0284c7;
  --color-dark-abyss: #07090e;
  --color-dark-deep: #090c15;
  --color-dark-muted: #0d111a;
  --color-dark-card: #0f1422;
  --text-secondary-subtle: #5a4b75;
  --color-slate-500: #64748b;
  --text-muted-subtle: #7b6e94;
  --color-purple-vivid: #7c2dcf;
  --color-slate-400: #94a3b8;
  --color-violet-200: #c084fc;
  --border-light-subtle: #e0d5f0;
  --color-slate-200: #e2e8f0;
  --border-light-soft: #ede4f9;
  --color-slate-100: #f1f5f9;
  --bg-card-light-subtle: #f8f5fd;
  --bg-card-light-soft: #f8f6fc;
  --bg-card-light-pure: #fcfbfe;
  --color-cyan-glow-core: #00f2fe;
  --color-rose-600: #dc2626;
  --glass-black-03: rgba(0, 0, 0, 0.03);
  --glass-black-06: rgba(0, 0, 0, 0.06);
  --glass-black-55: rgba(0, 0, 0, 0.55);
  --glass-cyan-05: rgba(0, 212, 255, 0.05);
  --glass-cyan-20: rgba(0, 212, 255, 0.2);
  --glass-cyan-25: rgba(0, 212, 255, 0.25);
  --glass-cyan-40: rgba(0, 212, 255, 0.4);
  --glass-cyan-50: rgba(0, 212, 255, 0.5);
  --glass-cyan-60: rgba(0, 212, 255, 0.6);
  --glass-cyan-vivid-12: rgba(0, 240, 255, 0.12);
  --glass-cyan-vivid-15: rgba(0, 240, 255, 0.15);
  --glass-cyan-vivid-20: rgba(0, 240, 255, 0.2);
  --glass-cyan-vivid-30: rgba(0, 240, 255, 0.3);
  --glass-cyan-vivid-40: rgba(0, 240, 255, 0.4);
  --glass-cyan-glow-25: rgba(0, 242, 254, 0.25);
  --glass-cyan-glow-40: rgba(0, 242, 254, 0.4);
  --glass-cyan-soft-15: rgba(6, 182, 212, 0.15);
  --bg-console-card-85: rgba(13, 0, 32, 0.85);
  --bg-console-card-95: rgba(13, 18, 32, 0.95);
  --bg-console-card-70: rgba(15, 20, 32, 0.7);
  --bg-console-panel-95: rgba(15, 20, 32, 0.95);
  --glass-emerald-08: rgba(16, 185, 129, 0.08);
  --glass-emerald-14: rgba(16, 185, 129, 0.14);
  --glass-emerald-16: rgba(16, 185, 129, 0.16);
  --glass-emerald-20: rgba(16, 185, 129, 0.2);
  --glass-emerald-40: rgba(16, 185, 129, 0.4);
  --bg-console-card-dense-70: rgba(20, 24, 38, 0.7);
  --glass-emerald-pulse-0: rgba(52, 211, 153, 0.0);
  --glass-emerald-pulse-70: rgba(52, 211, 153, 0.7);
  --glass-sky-35: rgba(56, 189, 248, 0.35);
  --glass-sky-40: rgba(56, 189, 248, 0.4);
  --glass-purple-25: rgba(107, 47, 160, 0.25);
  --glass-violet-deep-40: rgba(124, 58, 237, 0.4);
  --glass-violet-deep-55: rgba(124, 58, 237, 0.55);
  --glass-purple-vivid-06: rgba(139, 62, 234, 0.06);
  --glass-purple-vivid-20: rgba(139, 62, 234, 0.2);
  --glass-violet-16: rgba(139, 92, 246, 0.16);
  --glass-violet-20: rgba(139, 92, 246, 0.2);
  --glass-violet-22: rgba(139, 92, 246, 0.22);
  --glass-violet-40: rgba(139, 92, 246, 0.4);
  --glass-violet-50: rgba(139, 92, 246, 0.5);
  --glass-violet-60: rgba(139, 92, 246, 0.6);
  --glass-violet-light-12: rgba(155, 93, 229, 0.12);
  --glass-violet-light-18: rgba(155, 93, 229, 0.18);
  --glass-violet-light-30: rgba(155, 93, 229, 0.3);
  --glass-purple-light-80: rgba(168, 85, 247, 0.8);
  --glass-amber-15: rgba(245, 158, 11, 0.15);
  --glass-amber-20: rgba(245, 158, 11, 0.2);
  --glass-amber-40: rgba(245, 158, 11, 0.4);
  --glass-white-09: rgba(255, 255, 255, 0.09);
  --glass-white-12: rgba(255, 255, 255, 0.12);
  --glass-white-14: rgba(255, 255, 255, 0.14);
  --glass-white-18: rgba(255, 255, 255, 0.18);
  --glass-white-30: rgba(255, 255, 255, 0.3);
  --glass-white-50: rgba(255, 255, 255, 0.5);
  --glass-white-90: rgba(255, 255, 255, 0.9);
  --glass-white-96: rgba(255, 255, 255, 0.96);
  --grad-gauge-cyan-track: conic-gradient(var(--accent-cyan) 0deg, rgba(255, 255, 255, 0.06) 0deg);
  --grad-fade-left-purple-700: linear-gradient(-90deg, var(--purple-700), transparent);
  --grad-danger-rose: linear-gradient(135deg, #ef4444, #dc2626);
  --grad-cyan-purple-glass: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(155, 93, 229, 0.2));
  --grad-violet-cyan-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(6, 182, 212, 0.12));
  --grad-violet-cyan-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.15));
  --grad-violet-cyan-medium: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(0, 212, 255, 0.18));
  --grad-violet-cyan-vivid: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(6, 182, 212, 0.25));
  --grad-purple-cyan-glass: linear-gradient(135deg, rgba(155, 93, 229, 0.15), rgba(0, 240, 255, 0.08));
  --grad-emerald-cyan-subtle: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(6, 182, 212, 0.08));
  --grad-card-surface-dark: linear-gradient(135deg, rgba(17, 21, 34, 0.88) 0%, rgba(10, 14, 23, 0.96) 100%);
  --grad-bot-header: linear-gradient(135deg, var(--purple-600, #7c3aed), var(--accent-cyan, #00f2fe));
  --grad-card-shimmer-highlight: linear-gradient(135deg, var(--purple-900), var(--white), var(--purple-800));
  --grad-teal-blue-bot: linear-gradient(135deg, var(--teal-accent) 0%, var(--blue-accent) 100%);
  --grad-emerald-cyan-vert: linear-gradient(180deg, #10b981, #06b6d4);
  --grad-fade-to-white-vert: linear-gradient(180deg, transparent 50%, var(--white));
  --grad-dark-deep-vert: linear-gradient(180deg, var(--bg-dark), var(--purple-900));
  --grad-purple-cyan-vert: linear-gradient(180deg, var(--purple-400), var(--accent-cyan));
  --grad-purple-900-800-vert: linear-gradient(180deg, var(--purple-900) 0%, var(--purple-800) 100%);
  --grad-dark-to-white-full-vert: linear-gradient(180deg, var(--purple-900) 0%, var(--white) 100%);
  --grad-dark-white-dark-vert: linear-gradient(180deg, var(--purple-900) 0%, var(--white) 50%, var(--bg-dark) 100%);
  --grad-dark-white-split-vert: linear-gradient(180deg, var(--purple-900), var(--white));
  --grad-white-dark-split-vert: linear-gradient(180deg, var(--white), var(--purple-900));
  --grad-beam-emerald-glow: linear-gradient(90deg, transparent, #10b981, transparent);
  --grad-cyan-purple-horiz: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  --grad-fade-right-purple-700: linear-gradient(90deg, var(--purple-700), transparent);
  --grad-teal-blue-horiz: linear-gradient(90deg, var(--teal-accent), var(--blue-accent));
  --ambient-radial-center: radial-gradient(circle at center, var(--ambient-glow-1) 0%, transparent 50%);
  --ambient-radial-cyan-glow: radial-gradient(circle, var(--accent-cyan-glow) 0%, transparent 70%);
  --ambient-radial-purple-glow: radial-gradient(circle, var(--ambient-glow-4) 0%, transparent 70%);
  --ambient-radial-topleft-glow: radial-gradient(ellipse at 20% 30%, var(--ambient-glow-5) 0%, transparent 50%);
  --ambient-radial-bottomleft-glow: radial-gradient(ellipse at 20% 70%, var(--ambient-glow-4) 0%, transparent 50%);
  --ambient-radial-bottomleft-orb: radial-gradient(ellipse at 20% 80%, var(--ambient-orb-color-3) 0%, transparent 50%);
  --ambient-radial-midleft-glow: radial-gradient(ellipse at 30% 20%, var(--ambient-glow-5) 0%, transparent 50%);
  --ambient-radial-midcenter-glow: radial-gradient(ellipse at 40% 30%, var(--ambient-glow-4) 0%, transparent 40%);
  --ambient-radial-top-glow: radial-gradient(ellipse at 50% 0%, var(--ambient-glow-3) 0%, transparent 50%);
  --ambient-radial-bottom-orb: radial-gradient(ellipse at 50% 100%, var(--ambient-orb-color-3) 0%, transparent 50%);
  --ambient-radial-midtop-glow: radial-gradient(ellipse at 50% 20%, var(--ambient-glow-3) 0%, transparent 50%);
  --ambient-radial-bottomright-glow: radial-gradient(ellipse at 70% 80%, var(--ambient-glow-3) 0%, transparent 50%);
  --ambient-radial-topright-glow: radial-gradient(ellipse at 80% 20%, var(--ambient-glow-3) 0%, transparent 50%);
  --ambient-radial-midright-glow: radial-gradient(ellipse at 80% 30%, var(--ambient-glow-5) 0%, transparent 50%);
  --ambient-radial-bottomright-orb: radial-gradient(ellipse at 80% 70%, var(--ambient-orb-color-3) 0%, transparent 50%);


}

[data-theme="light"] {

  /* ==========================================================================
     LIGHT THEME SEMANTIC OVERRIDES (تعديلات الثيم الفاتح)
     ========================================================================== */

  /* === LIGHT THEME OVERRIDES (تعديلات الثيم الفاتح المتناسقة) === */
  --glass-cyan-bg: rgba(6, 182, 212, 0.12);
  --glass-cyan-border: rgba(6, 182, 212, 0.3);
  --glass-emerald-bg: rgba(16, 185, 129, 0.12);
  --glass-emerald-border: rgba(16, 185, 129, 0.3);
  --glass-violet-bg: rgba(139, 92, 246, 0.12);
  --glass-violet-border: rgba(139, 92, 246, 0.3);
  --glass-amber-bg: rgba(245, 158, 11, 0.12);
  --glass-amber-border: rgba(245, 158, 11, 0.3);
  --glass-rose-bg: rgba(239, 68, 68, 0.12);
  --glass-rose-border: rgba(239, 68, 68, 0.3);
  --color-cyan-vivid: #0891b2;
  --color-emerald-500: #059669;
  --color-violet-500: #7c3aed;
  --color-violet-400: #8b5cf6;
  --color-amber-500: #d97706;
  --color-rose-500: #dc2626;

  /* Sacred brand logo colors - NEVER CHANGE IN ANY THEME */
  --brand-logo-deep: #6b2fa0;
  --brand-logo-mid: #9b5de5;
  --brand-logo-light: #b77cf2;

  --primary: #9b5de5;
  --primary-hover: #8338ec;
  --primary-focus: #6b2fa0;
  --primary-deep: #6b2fa0;
  --primary-light: #b77cf2;
  --primary-glow: rgba(155, 93, 229, 0.35);
  --primary-rgb: 155, 93, 229;

  --bs-primary: #9b5de5;
  --bs-primary-rgb: 155, 93, 229;
  --bs-primary-text-emphasis: #6b2fa0;
  --bs-primary-bg-subtle: rgba(155, 93, 229, 0.12);
  --bs-primary-border-subtle: rgba(155, 93, 229, 0.25);
  --bs-secondary: #5c4f7a;
  --bs-secondary-rgb: 92, 79, 122;
  --bs-secondary-color: #5c4f7a;
  --bs-secondary-bg: #f8f6fc;
  --bs-secondary-bg-subtle: rgba(92, 79, 122, 0.1);
  --bs-secondary-border-subtle: rgba(92, 79, 122, 0.2);
  --bs-tertiary-color: #9c8db5;
  --bs-tertiary-bg: #efe8f8;
  --bs-link-color: #9b5de5;
  --bs-link-hover-color: #6b2fa0;
  --bs-heading-color: #1a1528;
  --bs-body-color: #1a1528;
  --bs-body-bg: #faf8fd;

  --purple-900: #faf5ff;
  --purple-800: #f3e8ff;
  --purple-700: #e4d0ff;
  --purple-600: #a855f7;
  --purple-500: #6b2fa0;
  --purple-400: #9b5de5;
  --purple-300: #b77cf2;
  --purple-200: #d5aaff;
  --purple-100: #edd9ff;
  --accent-pink: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-danger: #dc2626;
  --danger-glow-sm: rgba(220, 38, 38, 0.4);
  --danger-glow-md: rgba(220, 38, 38, 0.6);
  --danger-glow-lg: rgba(220, 38, 38, 0.8);
  --danger-glow-xs: rgba(220, 38, 38, 0.1);
  --danger-glow-30: rgba(220, 38, 38, 0.3);
  --inset-shadow-color: rgba(0, 0, 0, 0.08);
  --accent-warning: #d97706;
  --success-pulse-glow-1: rgba(16, 185, 129, 0.6);
  --success-pulse-glow-2: rgba(16, 185, 129, 0);
  --text-primary: #1a1528;
  --text-secondary: #5c4f7a;
  --text-muted: #9c8db5;

  /* Unified Select Tokens (Light Mode) */
  --select-bg: #ffffff;
  --select-border: #cbd5e1;
  --select-search-bg: #f8fafc;

  /* Architecture Sandbox Tokens (Light Mode) */
  --arch-visual-bg: linear-gradient(145deg, #ffffff 0%, #faf8fd 100%);
  --arch-visual-border: #c9bde0;
  --arch-visual-shadow: 0 16px 45px rgba(107, 47, 160, 0.08);
  --arch-btn-bg: #ffffff;
  --arch-btn-border: #c9bde0;
  --arch-btn-hover-bg: #f8f4fd;
  --arch-btn-hover-border: #d5aaff;
  --arch-btn-active-bg: linear-gradient(135deg, #f4edfc 0%, #ece0fa 100%);
  --arch-btn-active-border: #9b5de5;
  --arch-btn-active-shadow: 0 8px 25px rgba(155, 93, 229, 0.18);
  --arch-badge-bg: linear-gradient(135deg, #f0e6ff 0%, #e4d0ff 100%);
  --arch-badge-color: #6b2fa0;
  --arch-badge-border: #d5aaff;
  --arch-node-bg: #ffffff;
  --arch-node-border: #c9bde0;
  --arch-node-active-bg: rgba(6, 182, 212, 0.08);
  --arch-node-active-border: #06b6d4;
  --arch-spec-box-bg: #f8f6fc;
  --arch-spec-box-border: #c9bde0;
  --arch-terminal-bg: #f5f0fb;
  --arch-terminal-border: #e0d0f5;
  --arch-pill-bg: rgba(155, 93, 229, 0.1);
  --arch-pill-color: #6b2fa0;
  --arch-terminal-hash: #0284c7;
  --arch-btn-active-subtext: #4c1d95;
  --grad-purple-cyan-glass: linear-gradient(135deg, rgba(155, 93, 229, 0.1), rgba(6, 182, 212, 0.08));
  --bg-dark: #faf8fd;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f0ff;
  --border-color: #c9bde0;
  --auth-card-bg: #ffffff;
  --auth-card-border: var(--border-color);
  --auth-card-shadow: 0 15px 45px rgba(107, 47, 160, 0.1);
  --table-hover-bg: rgba(155, 93, 229, 0.1);
  --code-window-bg: #fcfaff;
  --code-window-header-bg: #f3e8ff;
  --code-window-border: #e0d0f5;
  --code-pre-color: #1e1035;
  --cockpit-panel-bg: #ffffff;
  --cockpit-panel-border: var(--border-color);
  --cockpit-panel-shadow: 0 10px 30px rgba(107, 47, 160, 0.08);
  --cockpit-card-bg: #ffffff;
  --cockpit-card-hover-bg: var(--bg-card-hover);
  --cockpit-card-border: var(--border-color);
  --cockpit-card-hover-border: var(--primary);
  --cockpit-card-shadow: 0 4px 15px rgba(107, 47, 160, 0.06);
  --cockpit-card-hover-shadow: 0 8px 25px rgba(107, 47, 160, 0.12);
  --navbar-bg: rgba(255, 255, 255, 0.92);
  --navbar-shadow: 0 4px 30px rgba(139, 62, 234, 0.08);
  --preloader-bg: #faf5ff;
  --scrollbar-track: #f3e8ff;
  --scrollbar-thumb: #a855f7;
  --gradient-primary: linear-gradient(135deg, #6b2fa0 0%, #9b5de5 50%, #b77cf2 100%);
  --gradient-accent: linear-gradient(135deg, #ec4899, #8b3eea);
  --gradient-dark: linear-gradient(180deg, #faf5ff 0%, #ffffff 40%, #faf8fd 100%);
  --shadow-sm: 0 2px 10px rgba(139, 62, 234, 0.10);
  --shadow-md: 0 6px 24px rgba(139, 62, 234, 0.13);
  --shadow-lg: 0 10px 45px rgba(139, 62, 234, 0.16);
  --shadow-glow: 0 0 30px rgba(139, 62, 234, 0.12);
  --footer-bg: #faf5ff;
  --footer-border: #e4d0ff;
  --table-bg: #ffffff;
  --table-stripe: rgba(139, 62, 234, 0.03);
  --badge-bg: rgba(139, 62, 234, 0.1);
  --filter-btn-bg: rgba(139, 62, 234, 0.05);
  --filter-btn-hover-bg: #f3e8ff;
  
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;
  
  --brand-glow-strong: rgba(139, 62, 234, 0.15);
  --accent-cyan-glow: rgba(6, 182, 212, 0.1);
  --form-input-bg: rgba(139, 62, 234, 0.05);
  --input-focus-shadow: 0 0 10px rgba(139, 62, 234, 0.12);
  --sandbox-panel-bg: #ffffff;
  --url-field-bg: #f3e8ff;
  --spinner-border-track: rgba(0, 0, 0, 0.05);
  --param-table-bg: rgba(139, 62, 234, 0.03);
  --param-table-header-bg: rgba(139, 62, 234, 0.02);
  --badge-required-bg: rgba(220, 38, 38, 0.08);
  --badge-required-border: rgba(220, 38, 38, 0.15);
  --callout-bg: rgba(16, 185, 129, 0.04);
  --error-glow-color: rgba(139, 62, 234, 0.08);
  --forbidden-glow-color: rgba(236, 72, 153, 0.08);
  --error-shadow-glow: 0 0 15px rgba(139, 62, 234, 0.15);
  --forbidden-shadow-glow: 0 0 15px rgba(236, 72, 153, 0.15);
  --copy-btn-bg: rgba(139, 62, 234, 0.05);
  --copy-btn-border: rgba(139, 62, 234, 0.12);
  --copy-btn-hover-bg: rgba(139, 62, 234, 0.1);
  --param-name-color: var(--purple-100);
  --callout-strong-color: var(--purple-100);
  
  /* MAIN WEBSITE SPECIFIC VARIABLES */
  --ambient-glow-1: rgba(168, 85, 247, 0.1);
  --ambient-glow-2: rgba(196, 132, 252, 0.08);
  --ambient-glow-3: rgba(236, 72, 153, 0.04);
  --ambient-glow-4: rgba(6, 182, 212, 0.03);
  --ambient-glow-5: rgba(168, 85, 247, 0.06);
  --ambient-grid-color: rgba(168, 85, 247, 0.025);
  --ambient-orb-color-1: rgba(168, 85, 247, 0.08);
  --ambient-orb-color-2: rgba(196, 132, 252, 0.06);
  --ambient-orb-color-3: rgba(236, 72, 153, 0.04);
  --focus-ring-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
  --btn-accent-glow: 0 0 30px rgba(236, 72, 153, 0.15);
  --glow-pulse-1: 0 0 30px rgba(139, 62, 234, 0.15);
  --glow-pulse-2: 0 0 45px rgba(139, 62, 234, 0.25);
  --grid-dot-color: rgba(139, 62, 234, 0.04);
  --feature-icon-bg: linear-gradient(135deg, var(--purple-900), var(--purple-800));
  --footer-social-bg: var(--white);
  --contact-icon-bg: linear-gradient(135deg, var(--purple-900), var(--purple-800));
  --template-tag-bg: var(--purple-800);
  --template-tag-color: var(--purple-600);
  --cookie-banner-bg: var(--white);
  --cookie-banner-shadow: 0 10px 50px rgba(139, 62, 234, 0.1);
  --cookie-consent-shadow: 0 -4px 30px rgba(139, 62, 234, 0.06);
  --overlay-bg: rgba(0, 0, 0, 0.75);
  --search-icon-bg: var(--purple-800);
  --invalid-focus-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
  --valid-focus-shadow: 0 0 0 3px rgba(39, 201, 63, 0.12);
  --pricing-border-color: rgba(228, 208, 255, 0.5);
  --desc-text-color: #6b5c85;
  --input-border-color: #c0b0d8;
  --card-shadow-ambient-1: 0 1px 3px rgba(139, 62, 234, 0.04);
  --card-shadow-ambient-2: 0 1px 2px rgba(139, 62, 234, 0.06);
  --card-shadow-ambient-3: 0 10px 50px rgba(139, 62, 234, 0.06);
  --card-shadow-ambient-4: 0 8px 32px rgba(139, 62, 234, 0.1);
  
  /* Terminal / Code Editor Theme (Light Mode) */
  --terminal-bg: #f9f6fe;
  --terminal-header: #f0e6ff;
  --terminal-border: #dcbfff;
  --terminal-code-color: #2b144d;
  --terminal-comment-color: #8b77a8;
  /* === EXTENDED LIGHT OVERRIDES === */
  --color-sky-600: #0284c7;
  --color-dark-abyss: #ffffff;
  --color-dark-deep: #f8f5fc;
  --color-dark-muted: #ede4f9;
  --color-dark-card: #ffffff;
  --text-secondary-subtle: #6b5a85;
  --color-slate-500: #475569;
  --text-muted-subtle: #6b5e82;
  --color-purple-vivid: #6b21a8;
  --color-slate-400: #64748b;
  --color-violet-200: #9333ea;
  --bg-console-card-85: rgba(255, 255, 255, 0.95);
  --bg-console-card-95: rgba(255, 255, 255, 0.98);
  --bg-console-card-70: rgba(248, 250, 252, 0.85);
  --bg-console-panel-95: rgba(255, 255, 255, 0.98);
  --cockpit-bg: var(--bg-dark);
  --cockpit-panel: var(--color-white);
  --cockpit-card: var(--color-white);
  --cockpit-card-hover: var(--bg-card-hover);
  --cockpit-border: var(--border-color);
  --cockpit-border-bright: var(--glass-violet-border);
  --cockpit-primary: var(--purple-500);
  --cockpit-cyan: var(--accent-cyan);
  --cockpit-green: var(--success);
  --cockpit-amber: #f59e0b;
  --cockpit-rose: #ef4444;
  --cockpit-text-white: var(--text-primary);
  --cockpit-text-muted: var(--text-secondary);
  --cockpit-font-mono: 'JetBrains Mono', monospace;
  --cockpit-gauge-track: var(--glass-purple-light-border);
  --cockpit-terminal-bg: var(--color-purple-light-50);
  --cockpit-terminal-header: var(--color-purple-light-100);
  --cockpit-terminal-border: var(--border-color);
  --cockpit-input-bg: var(--color-white);
  --grad-card-surface-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);

}

/* Language-specific visibility utility rules */
html[lang="en"] .lang-ar-only { display: none !important; }
html[lang="ar"] .lang-en-only { display: none !important; }

/* Terminal and code styling overrides for theme support */
code, .json-response {
  color: var(--terminal-code-color) !important;
  background-color: var(--terminal-bg) !important;
}
.ide-terminal {
  background-color: var(--terminal-bg) !important;
  border-color: var(--terminal-border) !important;
}
.ide-header {
  background-color: var(--terminal-header) !important;
  border-bottom-color: var(--terminal-border) !important;
}
.code-comment {
  color: var(--terminal-comment-color) !important;
}
.ide-title {
  color: var(--text-muted) !important;
}

/* Global Typography: Header H1 Line-Height */
header h1,
.header h1,
.page-header h1 {
  line-height: 1.8 !important;
}