/*
Theme Name: CrabTheme
Theme URI: https://example.com
Description: A lightweight, component-based WordPress theme with Router pattern + Tailwind CSS v4
Version: 1.0.0
Author: Your Name
Author URI: https://example.com
Text Domain: crabtheme
*/

@import "tailwindcss";

@theme {
  /* Custom Colors */
  --color-primary: #0073aa;
  --color-secondary: #962c1f;
  --color-dark: #333;
  --color-light: #f8f8f8;
}

@layer base {
  body {
    @apply text-gray-800 leading-relaxed;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
      Ubuntu, Cantarell, sans-serif;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-5;
  }

  /* Menu Styling */
  .primary-menu a,
  .footer-menu a {
    @apply text-gray-700 hover:text-primary transition-colors no-underline;
  }

  /* WordPress Core Compatibility */
  .alignwide {
    @apply max-w-5xl mx-auto;
  }

  .alignfull {
    @apply w-full max-w-full;
  }

  .aligncenter {
    @apply mx-auto text-center;
  }

  /* Prose styling for content */
  .prose {
    @apply text-gray-700 leading-relaxed;
  }

  .prose h1 {
    @apply text-4xl font-bold text-gray-900 mb-4;
  }

  .prose h2 {
    @apply text-3xl font-semibold text-gray-900 mb-3 mt-6;
  }

  .prose h3 {
    @apply text-2xl font-semibold text-gray-900 mb-2 mt-5;
  }

  .prose p {
    @apply mb-4;
  }

  .prose a {
    @apply text-primary hover:underline;
  }

  .prose ul,
  .prose ol {
    @apply ml-6 mb-4;
  }

  .prose li {
    @apply mb-2;
  }

  .prose img {
    @apply rounded-lg my-6;
  }
}