:root {
  /* Codex Identity */
  --accent: #00bfff;

  /* Light palette */
  --bg: #f8fafc; /* page background */
  --surface: #ffffff; /* sections & footer */
  --card: #f1f5f9; /* cards */
  --text: #0f172a; /* main text */
  --muted: #4b5563; /* secondary text */
  --nav: #0f172acc; /* dark-ish navbar on light */
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;
}

.font-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.surface {
  background: var(--surface);
}
.card {
  background: var(--card);
}
.muted {
  color: var(--muted);
}

/* Buttons */
.btn {
  transition: 0.3s ease;
}
.btn-accent {
  background: var(--accent);
  color: #000;
}
.btn-accent:hover {
  filter: brightness(0.92);
}
.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Ghost on light surfaces (عشان الأزرار تبان داخل المودال والكروت) */
.surface .btn-ghost,
.card .btn-ghost {
  border-color: rgba(0, 0, 0, 0.15);
  color: #0b1220;
}
.surface .btn-ghost:hover,
.card .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Focus visibility */
:where(a, button, input, textarea).btn:focus-visible,
:where(a, button, input, textarea):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 70%, white);
  outline-offset: 2px;
}

/* Neon accents */
.neon {
  text-shadow: 0 0 12px color-mix(in oklab, var(--accent) 70%, transparent);
}
.neon-border {
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 55%, transparent);
}
.glow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06),
    0 0 22px color-mix(in oklab, var(--accent) 18%, transparent);
}

/* Badges / clamp */
.badge {
  display: inline-block;
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  border-radius: 0.5rem;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* RTL helpers */
html[dir="rtl"] .rtl-mirror i.fa-arrow-right:before {
  transform: scaleX(-1);
  display: inline-block;
}

/* Hero background */
.backg {
  background-image: url(/images/7.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
@media (max-width: 1024px) {
  .backg {
    background-attachment: scroll;
  }
}

/* Navbar blur + scroll state */
#navbar {
  backdrop-filter: saturate(180%) blur(8px);
}
#navbar.is-scrolled {
  background: color-mix(in oklab, var(--nav) 92%, transparent);
}

/* Modal (start project) */
#startModal .modal-panel {
  animation: pop 0.18s ease-out;
}
@keyframes pop {
  from {
    transform: translate(-50%, -60%) scale(0.98);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* (اختياري) Tailwind import لو بتستخدم PostCSS */
@import "tailwindcss";