/* ── Custom properties ── */
:root {
  --plum-50: #faf5fa;
  --plum-100: #f3e8f3;
  --plum-200: #e8c8e8;
  --plum-300: #d4a0d4;
  --plum-400: #c078c0;
  --plum-500: #a855a8;
  --plum-600: #7b3f7b;
  --plum-700: #6b346b;
  --plum-800: #5a2d5a;
  --plum-900: #4a254a;
  --plum-950: #2a142a;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
}

/* ── Tailwind custom palette ── */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-plum-900 { color: var(--plum-900); }
  .text-plum-800 { color: var(--plum-800); }
  .text-plum-700 { color: var(--plum-700); }
  .text-plum-600 { color: var(--plum-600); }
  .text-plum-200 { color: var(--plum-200); }
  .text-plum-300 { color: var(--plum-300); }
  .text-plum-400 { color: var(--plum-400); }
  .text-amber-600 { color: var(--amber-600); }
  .bg-plum-950 { background-color: var(--plum-950); }
  .bg-plum-900 { background-color: var(--plum-900); }
  .bg-plum-800 { background-color: var(--plum-800); }
  .bg-plum-700 { background-color: var(--plum-700); }
  .bg-plum-600 { background-color: var(--plum-600); }
  .bg-plum-200 { background-color: var(--plum-200); }
  .bg-plum-100 { background-color: var(--plum-100); }
  .bg-plum-50 { background-color: var(--plum-50); }
  .bg-amber-400 { background-color: var(--amber-400); }
  .bg-amber-200 { background-color: var(--amber-200); }
  .bg-amber-100 { background-color: var(--amber-100); }
  .border-plum-900 { border-color: var(--plum-900); }
  .border-plum-800 { border-color: var(--plum-800); }
  .border-plum-600 { border-color: var(--plum-600); }
  .border-plum-400 { border-color: var(--plum-400); }
  .border-plum-200 { border-color: var(--plum-200); }
  .border-plum-100 { border-color: var(--plum-100); }
  .border-amber-200 { border-color: var(--amber-200); }
  .border-amber-100 { border-color: var(--amber-100); }
  .shadow-plum-900\/10 { box-shadow: 0 10px 40px rgba(74,37,74,0.10); }
  .shadow-plum-900\/8  { box-shadow: 0 10px 40px rgba(74,37,74,0.08); }
  .shadow-plum-600\/20 { box-shadow: 0 8px 30px rgba(123,63,123,0.20); }
  .shadow-plum-600\/25 { box-shadow: 0 12px 40px rgba(123,63,123,0.25); }
  .shadow-plum-100    { box-shadow: 0 10px 30px rgba(243,232,243,0.8); }
  .shadow-amber-100   { box-shadow: 0 10px 30px rgba(254,243,199,0.8); }
  .text-plum-950 { color: var(--plum-950); }
  .bg-plum-950   { background-color: var(--plum-950); }
  .text-plum-950 { color: var(--plum-950); }
  .border-plum-950 { border-color: var(--plum-950); }
  .text-plum-950 { color: var(--plum-950); }
}

/* ── Typography ── */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }
.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Navbar ── */
#navbar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(123, 63, 123, 0.08);
}

/* ── Scroll reveal base (progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-up.hidden,
  .reveal-left.hidden,
  .reveal-right.hidden {
    opacity: 0;
  }
  .reveal-up.hidden { transform: translateY(32px); }
  .reveal-left.hidden { transform: translateX(-32px); }
  .reveal-right.hidden { transform: translateX(32px); }
}

/* ── Mobile menu ── */
#mobileMenu {
  animation: fadeSlideIn 0.25s ease forwards;
}
#mobileMenu.hidden {
  animation: fadeSlideOut 0.2s ease forwards;
}
@keyframes fadeSlideIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeSlideOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Focus styles ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--plum-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Selection ── */
::selection {
  background: var(--plum-200);
  color: var(--plum-900);
}