/* Dark Mode (default) */
:root {
  --bg-primary: #001f3f;
  --bg-secondary: #000000;
  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --accent-cyan: #00ffff;
  --accent-hover: #00cccc;
  --card-bg: #ffffff;
  --card-text: #000000;
  --nav-bg: #ffffff;
  --nav-text: #000000;
  --border-color: #000000;
  --grid-dots: rgba(0, 255, 255, 0.1);
}

/* Light Mode */
[data-theme="light"] {
  --bg-primary: #f0f9ff;
  --bg-secondary: #e0f2fe;
  --text-primary: #0c4a6e;
  --text-secondary: #475569;
  --accent-cyan: #0891b2;
  --accent-hover: #06b6d4;
  --card-bg: #ffffff;
  --card-text: #0c4a6e;
  --nav-bg: #0c4a6e;
  --nav-text: #ffffff;
  --border-color: #0c4a6e;
  --grid-dots: rgba(8, 145, 178, 0.1);
}

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
  background-color: var(--bg-primary);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-primary);
}

.neo-border {
  border: 4px solid var(--border-color);
  box-shadow: 8px 8px 0px var(--accent-cyan);
  transition: all 0.2s ease;
}

.neo-border:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px var(--accent-cyan);
}

/* Responsive neo-border adjustments */
@media (max-width: 640px) {
  .neo-border {
    border-width: 3px;
    box-shadow: 4px 4px 0px var(--accent-cyan);
  }

  .neo-border:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--accent-cyan);
  }
}

.blueprint-grid {
  background-image: radial-gradient(var(--grid-dots) 1px, transparent 0);
  background-size: 30px 30px;
}

.mono {
  font-family: 'Courier Prime', monospace;
}

/* Theme Toggle Button */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--accent-cyan);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 4px 4px 0px var(--accent-cyan);
  z-index: 100;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--accent-cyan);
}

.theme-toggle:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px var(--accent-cyan);
}

@media (max-width: 640px) {
  .theme-toggle {
    width: 48px;
    height: 48px;
    font-size: 20px;
    bottom: 16px;
    right: 16px;
  }
}

/* Language Toggle Button */
.lang-toggle {
  position: fixed;
  bottom: 20px;
  right: 86px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--accent-cyan);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 4px 4px 0px var(--accent-cyan);
  z-index: 100;
  transition: all 0.3s ease;
}

.lang-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--accent-cyan);
}

.lang-toggle:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px var(--accent-cyan);
}

@media (max-width: 640px) {
  .lang-toggle {
    width: 48px;
    height: 48px;
    font-size: 12px;
    bottom: 16px;
    right: 74px;
  }
}

/* RTL Support for Arabic */
[dir="rtl"] {
  font-family: 'Cairo', sans-serif;
}

[dir="rtl"] .mono {
  font-family: 'Cairo', sans-serif;
}

[dir="rtl"] .neo-border {
  box-shadow: -8px 8px 0px var(--accent-cyan);
}

[dir="rtl"] .neo-border:hover {
  transform: translate(4px, -4px);
  box-shadow: -12px 12px 0px var(--accent-cyan);
}

@media (max-width: 640px) {
  [dir="rtl"] .neo-border {
    box-shadow: -4px 4px 0px var(--accent-cyan);
  }

  [dir="rtl"] .neo-border:hover {
    transform: translate(2px, -2px);
    box-shadow: -6px 6px 0px var(--accent-cyan);
  }
}

[dir="rtl"] .theme-toggle {
  right: auto;
  left: 20px;
  box-shadow: -4px 4px 0px var(--accent-cyan);
}

[dir="rtl"] .theme-toggle:hover {
  transform: translate(2px, -2px);
  box-shadow: -6px 6px 0px var(--accent-cyan);
}

[dir="rtl"] .lang-toggle {
  right: auto;
  left: 86px;
  box-shadow: -4px 4px 0px var(--accent-cyan);
}

[dir="rtl"] .lang-toggle:hover {
  transform: translate(2px, -2px);
  box-shadow: -6px 6px 0px var(--accent-cyan);
}

@media (max-width: 640px) {
  [dir="rtl"] .theme-toggle {
    left: 16px;
  }

  [dir="rtl"] .lang-toggle {
    left: 74px;
  }
}

[dir="rtl"] header nav {
  box-shadow: -8px 8px 0px 0px #00ffff;
}

/* Light mode specific overrides */
[data-theme="light"] .bg-\[#001f3f\] {
  background-color: var(--bg-primary) !important;
}

[data-theme="light"] .bg-black {
  background-color: var(--bg-secondary) !important;
}

[data-theme="light"] .text-white {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-gray-300 {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-cyan-400 {
  color: var(--accent-cyan) !important;
}

[data-theme="light"] .bg-cyan-500 {
  background-color: var(--accent-cyan) !important;
}

[data-theme="light"] header nav {
  background-color: var(--nav-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] header nav div:first-child,
[data-theme="light"] header nav ul li a {
  color: var(--nav-text) !important;
}

[data-theme="light"] .invert {
  filter: none !important;
}

/* CV Card Animations */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(30px) rotate(0deg);
  }

  to {
    transform: rotate(360deg) translateX(30px) rotate(-360deg);
  }
}