/* ─── Custom Properties ─── */
:root {
  --terracotta-50: #fdf4f0;
  --terracotta-100: #fce8de;
  --terracotta-200: #f5d0b8;
  --terracotta-300: #eab08a;
  --terracotta-400: #d98c5e;
  --terracotta-500: #c47040;
  --terracotta-600: #b85c38;
  --terracotta-700: #9a4a2e;
  --terracotta-800: #7d3c26;
  --terracotta-900: #63301f;
  --sand-50: #faf8f5;
  --sand-100: #f5f0e8;
  --sand-200: #e8dfd0;
  --sand-300: #d4c8b4;
  --sand-400: #b8a88e;
  --sand-500: #9c8a6e;
  --sand-600: #7c6c54;
  --sand-700: #625643;
  --sand-800: #4f4537;
  --sand-900: #423b30;
}

/* ─── Tailwind Custom Colors ─── */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
  }

  .font-cormorant {
    font-family: 'Cormorant Garamond', serif;
  }

  .font-karla {
    font-family: 'Karla', sans-serif;
  }

  /* Custom color classes */
  .bg-terracotta-50 { background-color: var(--terracotta-50); }
  .bg-terracotta-100 { background-color: var(--terracotta-100); }
  .bg-terracotta-200 { background-color: var(--terracotta-200); }
  .bg-terracotta-400 { background-color: var(--terracotta-400); }
  .bg-terracotta-500 { background-color: var(--terracotta-500); }
  .bg-terracotta-600 { background-color: var(--terracotta-600); }
  .bg-terracotta-700 { background-color: var(--terracotta-700); }
  .bg-terracotta-800 { background-color: var(--terracotta-800); }
  .bg-terracotta-900 { background-color: var(--terracotta-900); }

  .text-terracotta-50 { color: var(--terracotta-50); }
  .text-terracotta-100 { color: var(--terracotta-100); }
  .text-terracotta-200 { color: var(--terracotta-200); }
  .text-terracotta-400 { color: var(--terracotta-400); }
  .text-terracotta-500 { color: var(--terracotta-500); }
  .text-terracotta-600 { color: var(--terracotta-600); }
  .text-terracotta-700 { color: var(--terracotta-700); }
  .text-terracotta-800 { color: var(--terracotta-800); }
  .text-terracotta-900 { color: var(--terracotta-900); }

  .border-terracotta-100 { border-color: var(--terracotta-100); }
  .border-terracotta-300 { border-color: var(--terracotta-300); }
  .border-terracotta-400 { border-color: var(--terracotta-400); }
  .border-terracotta-500 { border-color: var(--terracotta-500); }
  .border-terracotta-700 { border-color: var(--terracotta-700); }
}

/* ─── Scroll Reveal (progressive enhancement) ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  .reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── Floating Cards Animation ─── */
@media (prefers-reduced-motion: no-preference) {
  .floating-card {
    animation: float1 5s ease-in-out infinite;
  }

  .floating-card-2 {
    animation: float2 6s ease-in-out infinite;
    animation-delay: 1s;
  }

  .floating-card-3 {
    animation: float3 5.5s ease-in-out infinite;
    animation-delay: 2s;
  }

  @keyframes float1 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
  }

  @keyframes float2 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
  }

  @keyframes float3 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
  }
}

/* ─── Navbar Transition ─── */
.nav-text {
  transition: color 0.3s ease;
}

/* ─── Mobile Menu ─── */
#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

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

/* ─── Focus Visible ─── */
:focus-visible {
  outline: 2px solid var(--terracotta-500);
  outline-offset: 2px;
}

/* ─── Smooth Image Loading ─── */
img {
  loading: lazy;
}

img[loading="eager"] {
  loading: eager;
}