/* =============================================================
   PORTALBA — Global shared styles
   Loaded by every page alongside a page-specific stylesheet.
   ============================================================= */

/* ── Design tokens — dark (default) ──────────────────────── */
:root {
  --page-bg:        #18181B;
  --page-surface:   #18181b;
  --page-muted:     #29272a;
  --border:         #27272a;
  --border-subtle:  rgba(39, 39, 42, 0.6);
  --border-strong:  #3f3f46;
  --text:           #ffffff;
  --text-2:         #d4d4d8;
  --text-3:         #a1a1aa;
  --text-4:         #71717a;
  --text-5:         #52525b;
  --text-6:         #3f3f46;
  --accent:         #e7f26c;
  --accent-hover:   #e7f26c;
  --nav-bg:         #373634;
  --nav-border:     rgba(39, 42, 42, 0.6);
}

/* ── Light theme overrides ────────────────────────────────── */
.light-theme {
  --page-bg:        #d9ded5;
  --page-surface:   #f3f7f8;
  --page-muted:     #dfe8ed;
  --border:         #ced5dc;
  --border-subtle:  rgba(180, 170, 155, 0.4);
  --border-strong:  #889781;
  --text:           #1a1a1a;
  --text-2:         #2d2d2d;
  --text-3:         #4a4a4a;
  --text-4:         #6b6b6b;
  --text-5:         #8a8a8a;
  --text-6:         #afafaf;
  --accent:         #889781;
  --accent-hover:   #889781;
  --nav-bg:         #eff0ef;
  --nav-border:     rgba(134, 143, 116, 1);
}

.light-theme .nav-brand img {
  filter: invert(1) brightness(0) !important;
}


/* Font smoothing */
* { -webkit-font-smoothing: antialiased; }

/* Page base */
body {
  background: var(--page-bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 99px; }

/* ── Navigation link ──────────────────────────────────────── */
.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-link:hover        { color: var(--text); }
.nav-link.active       { color: var(--accent); }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Scroll fade-up animation ─────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── Page hero (about / services / projects / contact) ──────── */
.page-hero {
  background-image:
    linear-gradient(
      to bottom,
      rgba(9, 9, 11, 0.82) 0%,
      rgba(9, 9, 11, 0.65) 60%,
      rgba(9, 9, 11, 0.95) 100%
    ),
    url('../assets/images/IMG.JPG');
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: center;
  padding-top: 4rem;
  min-height: 360px;
}
@media (min-width: 640px)  { .page-hero { min-height: 440px; } }
@media (min-width: 1024px) { .page-hero { padding-top: 5rem; } }

/* ── Project card — shared between home and projects ─────── */
.project-card { overflow: hidden; }
.project-card img { transition: transform 0.5s ease; }
.project-card:hover img { transform: scale(1.07); }
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.15) 55%,
    transparent 100%
  );
}

/* ── Light-theme Tailwind utility overrides ───────────────── */
/* Tailwind CDN injects after external sheets — !important required */
.light-theme .bg-zinc-950   { background-color: var(--page-bg) !important; }
.light-theme .bg-zinc-900   { background-color: var(--page-surface) !important; }
.light-theme .bg-zinc-800   { background-color: var(--page-muted) !important; }
.light-theme .text-white    { color: var(--text) !important; }
.light-theme .text-zinc-300 { color: var(--text-2) !important; }
.light-theme .text-zinc-400 { color: var(--text-3) !important; }
.light-theme .text-zinc-500 { color: var(--text-4) !important; }
.light-theme .text-zinc-600 { color: var(--text-5) !important; }
.light-theme .text-zinc-700 { color: var(--text-6) !important; }
.light-theme .border-zinc-700 { border-color: var(--border-strong) !important; }
.light-theme .border-zinc-800 { border-color: var(--border) !important; }
/* Project cards always have a dark image overlay — keep text white */
.light-theme .project-card .text-white { color: #fff !important; }
.light-theme .project-card .text-zinc-400 { color: rgba(255,255,255,0.7) !important; }