/* Shared Apple-inspired portfolio theme */
:root {
  --site-bg: #f5f5f7;
  --site-surface: rgba(255, 255, 255, 0.78);
  --site-card: rgba(255, 255, 255, 0.88);
  --site-text: #1d1d1f;
  --site-muted: #6e6e73;
  --site-line: rgba(29, 29, 31, 0.12);
  --site-accent: #0071e3;
  --site-accent-soft: rgba(0, 113, 227, 0.12);
  --site-shadow: 0 18px 50px rgba(29, 29, 31, 0.08);
}

html[data-theme="dark"] {
  --site-bg: #111214;
  --site-surface: rgba(30, 31, 34, 0.78);
  --site-card: rgba(28, 29, 32, 0.9);
  --site-text: #f5f5f7;
  --site-muted: #a1a1a6;
  --site-line: rgba(255, 255, 255, 0.13);
  --site-accent: #2997ff;
  --site-accent-soft: rgba(41, 151, 255, 0.16);
  --site-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

body {
  background-color: var(--site-bg) !important;
  color: var(--site-text) !important;
  transition: background-color .35s ease, color .35s ease, opacity .4s ease-in-out, transform .4s ease-in-out;
  will-change: opacity, transform;
}

body.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

body.is-exiting {
  opacity: 0;
  transform: translateY(-8px);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 12px;
  color: var(--site-text);
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 999px;
  box-shadow: var(--site-shadow);
  font-size: 16px;
  transition: transform .2s ease, background .35s ease, color .35s ease;
}

.theme-toggle:hover { transform: translateY(-2px); }

html[data-theme="light"] .theme-dark-icon,
html[data-theme="dark"] .theme-light-icon { display: none; }

/* Map the legacy dark utility palette to the shared theme. */
html[data-theme="light"] body [class*="bg-[#0f172a"],
html[data-theme="light"] body [class*="bg-[#1e293b"] { background-color: var(--site-card) !important; }
html[data-theme="light"] body [class*="text-slate-200"],
html[data-theme="light"] body [class*="text-white"] { color: var(--site-text) !important; }
html[data-theme="light"] body [class*="text-slate-300"],
html[data-theme="light"] body [class*="text-slate-400"] { color: var(--site-muted) !important; }
html[data-theme="light"] body [class*="border-white"] { border-color: var(--site-line) !important; }
html[data-theme="light"] body [class*="bg-white/5"] { background-color: var(--site-surface) !important; }
html[data-theme="light"] body [class*="from-cyan-500"],
html[data-theme="light"] body [class*="to-blue-600"] { --tw-gradient-from: #0071e3 !important; --tw-gradient-to: #34aadc !important; }

html[data-theme="dark"] body [class*="bg-white"] { background-color: var(--site-card) !important; }
html[data-theme="dark"] body [class*="text-slate-900"] { color: var(--site-text) !important; }
html[data-theme="dark"] body [class*="border-white"] { border-color: var(--site-line) !important; }

html[data-theme="light"] body > footer,
html[data-theme="light"] body footer { background-color: var(--site-bg) !important; border-color: var(--site-line) !important; }

.journey-title {
  color: var(--site-text) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

.skill-pill,
.tech-tag {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .2s ease;
}

html[data-theme="light"] .skill-pill {
  color: var(--site-text) !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: var(--site-line) !important;
}

html[data-theme="light"] .tech-tag {
  color: var(--site-accent) !important;
  background: var(--site-accent-soft) !important;
  border-color: rgba(0, 113, 227, .2) !important;
}

html[data-theme="dark"] .skill-pill {
  color: var(--site-text) !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: var(--site-line) !important;
}

html[data-theme="dark"] .tech-tag {
  color: #70b7ff !important;
  background: rgba(41, 151, 255, .14) !important;
  border-color: rgba(41, 151, 255, .28) !important;
}

@media (max-width: 767px) {
  .theme-toggle { margin-left: 8px; }
}