@import "tailwindcss";

@theme {
  /* Default Custom Properties (Dark Theme) */
  --bg-primary: var(--color-gray-900);
  --bg-secondary: var(--color-gray-800);
  --bg-tertiary: var(--color-gray-700);
  --text-primary: var(--color-gray-100);
  --text-secondary: var(--color-gray-400);
  --text-tertiary: var(--color-gray-300);
  --brand-primary: var(--color-indigo-600);
  --brand-secondary: var(--color-indigo-700);

  --color-gray-900: #1a1a1a;
  --color-gray-800: #2b2b2b;
  --color-gray-700: #3c3c3c;
  --color-gray-500: #808080;
  --color-gray-400: #a0a0a0;
  --color-gray-200: #e0e0e0;
  --color-gray-100: #f5f5f5;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;

  /* Font Families */
  --font-family-body: "Montserrat", sans-serif;
  --font-family-heading: "Playfair Display", serif;
}

/* Light Theme Overrides (outside @theme block) */
html[data-theme='light'] {
  --bg-primary: var(--color-gray-100);
  --bg-secondary: var(--color-gray-200);
  --bg-tertiary: var(--color-gray-300);
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-tertiary: var(--color-gray-700);
}

@layer base {
  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family-body); /* Apply default body font */
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading); /* Apply heading font */
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

#lightbox.show {
    animation: fadeIn 0.3s ease-out forwards;
}