@import "tailwindcss";

@theme {
  /* Brand Palette: Palina Gold (#DDC288) */
  --color-brand-50: #faf8f0;
  --color-brand-100: #f4edd1;
  --color-brand-200: #e9dba4;
  --color-brand-300: #ddc277;
  --color-brand-400: #ddc288; /* Requested: #DDC288 */
  --color-brand-500: #c9a765;
  --color-brand-600: #b58d46;
  --color-brand-700: #9c763a;
  --color-brand-800: #7d5e31;
  --color-brand-900: #624a29;
  --color-brand-950: #4c3a23;

  /* Default Custom Properties (Dark Theme) */
  --bg-primary: #121212;
  --bg-secondary: #1e1e1e;
  --bg-tertiary: #2a2a2a;
  --text-primary: #f2f2f2;
  --text-secondary: #a3a3a3;
  --text-tertiary: #737373;
  --brand-primary: var(--color-brand-400);
  --brand-secondary: var(--color-brand-500);

  /* Gray Palette for standard UI */
  --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;

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

/* Light Theme Overrides */
html[data-theme='light'] {
  --bg-primary: #fdfcf9;
  --bg-secondary: #f4f1e8;
  --bg-tertiary: #e9e4d5;
  --text-primary: #2d2114;
  --text-secondary: #624a29;
  --text-tertiary: #7d5e31;
}

[x-cloak] { display: none !important; }

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

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--brand-primary);
  }
}

@layer components {
  /* Main navigation styling */
  header nav ul {
    @apply flex items-center space-x-4;
  }
  header nav ul li a {
    @apply text-[var(--text-primary)] hover:text-[var(--brand-primary)] transition-colors duration-200;
  }

  /* Mobile navigation styling */
  #mobile-menu nav ul {
    @apply flex flex-col items-center space-y-8;
  }
  #mobile-menu nav ul li a {
    @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
  }
}

.site-logo {
  @apply transition-all duration-300;
  color: var(--brand-primary);
  fill: currentColor;
}

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

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