/* ============================================================
   IBRAHIM ELSHISHTAWY — FUTURISTIC 3D PORTFOLIO
   Base System Definitions (base.css)
   ============================================================ */

/* ── VARIABLES ──────────────────────────────────────────── */
:root {
  /* ── THEME: CINEMATIC ELECTRIC (default) ── */
  --bg:           #05040a;
  --bg-dark:      #020106;
  --bg-card:      rgba(10, 8, 22, 0.75);
  --primary:      #06b6d4;
  --primary-rgb:  6, 182, 212;
  --primary-glow: rgba(6, 182, 212, 0.35);
  --secondary:    #8b5cf6;
  --secondary-rgb:139, 92, 246;
  --secondary-glow: rgba(139, 92, 246, 0.3);
  --accent:       #f97316;
  --accent-rgb:   249, 115, 22;
  --accent-glow:  rgba(249, 115, 22, 0.3);
  --text-1:       #f8fafc;
  --text-2:       #94a3b8;
  --glass-bg:     rgba(11, 9, 24, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover:  rgba(6, 182, 212, 0.25);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.6);
  --aurora-1:     rgba(6, 182, 212, 0.14);
  --aurora-2:     rgba(139, 92, 246, 0.10);
  --aurora-3:     rgba(249, 115, 22, 0.05);
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-card:  22px;
  --radius-pill:  9999px;
}

/* ── THEME: CYBER BLUE ───────────────────────────────────── */
[data-theme="cyber-blue"] {
  --bg:           #020a12;
  --bg-dark:      #010509;
  --bg-card:      rgba(5, 20, 40, 0.55);
  --primary:      #0ea5e9;
  --primary-rgb:  14, 165, 233;
  --primary-glow: rgba(14, 165, 233, 0.35);
  --secondary:    #06d6a0;
  --secondary-rgb:6, 214, 160;
  --secondary-glow: rgba(6, 214, 160, 0.3);
  --accent:       #f59e0b;
  --text-1:       #f0f9ff;
  --text-2:       #7dd3fc;
  --glass-bg:     rgba(5, 20, 42, 0.55);
  --glass-border: rgba(14, 165, 233, 0.08);
  --glass-hover:  rgba(14, 165, 233, 0.25);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.6);
  --aurora-1:     rgba(14, 165, 233, 0.16);
  --aurora-2:     rgba(6, 214, 160, 0.10);
  --aurora-3:     rgba(245, 158, 11, 0.07);
}

/* ── THEME: NEON GREEN ───────────────────────────────────── */
[data-theme="neon-green"] {
  --bg:           #020c06;
  --bg-dark:      #010802;
  --bg-card:      rgba(5, 22, 10, 0.55);
  --primary:      #22c55e;
  --primary-rgb:  34, 197, 94;
  --primary-glow: rgba(34, 197, 94, 0.35);
  --secondary:    #84cc16;
  --secondary-rgb:132, 204, 22;
  --secondary-glow: rgba(132, 204, 22, 0.3);
  --accent:       #06b6d4;
  --text-1:       #f0fdf4;
  --text-2:       #86efac;
  --glass-bg:     rgba(5, 22, 12, 0.55);
  --glass-border: rgba(34, 197, 94, 0.08);
  --glass-hover:  rgba(34, 197, 94, 0.25);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.6);
  --aurora-1:     rgba(34, 197, 94, 0.16);
  --aurora-2:     rgba(132, 204, 22, 0.10);
  --aurora-3:     rgba(6, 182, 212, 0.07);
}

/* ── THEME: SOLAR RED ────────────────────────────────────── */
[data-theme="solar-red"] {
  --bg:           #0d0402;
  --bg-dark:      #080201;
  --bg-card:      rgba(28, 10, 5, 0.55);
  --primary:      #f97316;
  --primary-rgb:  249, 115, 22;
  --primary-glow: rgba(249, 115, 22, 0.35);
  --secondary:    #eab308;
  --secondary-rgb:234, 179, 8;
  --secondary-glow: rgba(234, 179, 8, 0.3);
  --accent:       #ec4899;
  --text-1:       #fff7ed;
  --text-2:       #fed7aa;
  --glass-bg:     rgba(28, 10, 5, 0.55);
  --glass-border: rgba(249, 115, 22, 0.08);
  --glass-hover:  rgba(249, 115, 22, 0.25);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.6);
  --aurora-1:     rgba(249, 115, 22, 0.15);
  --aurora-2:     rgba(234, 179, 8, 0.10);
  --aurora-3:     rgba(236, 72, 153, 0.07);
}

/* ── LIGHT MODE OVERRIDES ────────────────────────────────── */
[data-theme-mode="light"] {
  --bg:           #f8fafc;
  --bg-dark:      #f1f5f9;
  --bg-card:      rgba(255, 255, 255, 0.75);
  --text-1:       #0f172a;
  --text-2:       #475569;
  --glass-bg:     rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-hover:  rgba(var(--primary-rgb), 0.12);
  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.06);
}

/* ── LIGHT MODE TAILWIND UTILITY OVERRIDES ───────────────── */
[data-theme-mode="light"] .text-white,
[data-theme-mode="light"] .text-slate-50,
[data-theme-mode="light"] .text-slate-100,
[data-theme-mode="light"] .text-slate-200 { color: #000000 !important; }

[data-theme-mode="light"] .text-slate-300,
[data-theme-mode="light"] .text-slate-400 { color: #334155 !important; }

[data-theme-mode="light"] .text-slate-500 { color: #475569 !important; }

[data-theme-mode="light"] .bg-black\/20 { background-color: rgba(0, 0, 0, 0.03) !important; }
[data-theme-mode="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; }
[data-theme-mode="light"] .bg-white\/\[0\.02\] { background-color: rgba(0, 0, 0, 0.02) !important; }
[data-theme-mode="light"] .border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.08) !important; }
[data-theme-mode="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }

/* ── LIGHT MODE COMPONENT OVERRIDES ─────────────────────── */
[data-theme-mode="light"] .section-title {
  color: #0f172a !important;
}

[data-theme-mode="light"] .tech-title {
  color: #334155 !important;
}

[data-theme-mode="light"] .tech-card:hover .tech-title {
  color: #0f172a !important;
}

[data-theme-mode="light"] .glass-nav {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme-mode="light"] .project-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .mini-project-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

[data-theme-mode="light"] .tech-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03) !important;
}

[data-theme-mode="light"] .cert-card {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

[data-theme-mode="light"] .whatsapp-panel {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

[data-theme-mode="light"] .subsection-header {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

[data-theme-mode="light"] .github-view-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

[data-theme-mode="light"] .github-view-btn span,
[data-theme-mode="light"] .github-view-btn i {
  color: #0f172a !important;
}






/* ── TRANSITION FOR THEME SWITCH ────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); }

/* ── FONTS ──────────────────────────────────────────────── */
.font-heading { font-family: var(--font-heading); }

/* ── RTL & ARABIC TYPOGRAPHY SYSTEM ─────────────────────── */
html[dir="rtl"],
body.rtl-mode {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

html[dir="rtl"] .font-heading,
body.rtl-mode .font-heading,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
  font-family: 'Cairo', 'Outfit', sans-serif !important;
  font-weight: 700;
  letter-spacing: normal !important;
}

/* Force natural RTL text alignment over conflicting utility classes */
html[dir="rtl"] .text-left,
body.rtl-mode .text-left {
  text-align: right !important;
}

html[dir="rtl"] .text-right,
body.rtl-mode .text-right {
  text-align: left !important;
}

/* RTL Icon & Directional Flip */
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-arrow-right {
  transform: scaleX(-1);
}

html[dir="rtl"] .mr-1, 
html[dir="rtl"] .mr-1\.5, 
html[dir="rtl"] .mr-2 {
  margin-right: 0 !important;
  margin-left: 0.35rem !important;
}

html[dir="rtl"] .ml-1, 
html[dir="rtl"] .ml-1\.5, 
html[dir="rtl"] .ml-2 {
  margin-left: 0 !important;
  margin-right: 0.35rem !important;
}

html[dir="rtl"] .group-hover\:translate-x-1:hover,
html[dir="rtl"] .group:hover .group-hover\:translate-x-1 {
  transform: translateX(-0.25rem) !important;
}

/* Section Labels & Badges in RTL */
html[dir="rtl"] .section-label {
  letter-spacing: 0.05em;
  font-family: 'Cairo', monospace;
}

html[dir="rtl"] p,
body.rtl-mode p {
  line-height: 1.85;
}

html[dir="rtl"] .nav-link,
html[dir="rtl"] .mobile-nav-link {
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0;
}