@import "tailwindcss";

/* Tokens Tailwind v4 */
@theme {
  /* Typography */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  
  /* Brand Colors */
  --color-brand: #1B75BB;
  --color-brand-dark: #155a9b;
  --color-brand-light: #2b85cb;
  --color-accent: #0A0A0A;
  --color-muted: #F5F7FA;
  
  /* Spacing & Layout */
  --radius-card: 1rem;
  --spacing-container: 1200px;
  
  /* Shadows */
  --shadow-card: 0 4px 12px rgba(27, 117, 187, 0.1);
  --shadow-header: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Container personalizado com max-width do tema */
.container { 
  @apply w-full mx-auto px-4 lg:px-6;
  max-width: var(--spacing-container);
}

/* Componentes usando apenas Tailwind + CSS custom properties */
.btn { 
  @apply inline-flex items-center justify-center rounded-xl px-4 py-3 font-medium text-white no-underline transition-all duration-200 hover:brightness-95 focus:outline-2 focus:outline-brand focus:outline-offset-2; 
  background: var(--color-brand); 
}

.btn-secondary {
  @apply bg-gray-100 text-gray-900 hover:bg-gray-200;
}

.link { 
  @apply text-brand underline underline-offset-2 hover:decoration-2 focus:outline-2 focus:outline-brand focus:outline-offset-2 transition-all duration-200;
}

.card { 
  @apply rounded-2xl p-4 transition-all duration-200 hover:-translate-y-0.5;
  background: var(--color-muted); 
  box-shadow: var(--shadow-card);
}

.card:hover {
  box-shadow: var(--shadow-card);
}

/* Acessibilidade e utilidades específicas do tema */
.sr-only {
  @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
  clip: rect(0,0,0,0);
}

/* Breadcrumb usando Tailwind */
.breadcrumb {
  @apply my-4;
}

.breadcrumb ol {
  @apply flex flex-wrap list-none m-0 p-0 text-sm;
}

.breadcrumb li {
  @apply flex items-center;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  @apply mx-2 text-gray-500;
}

.breadcrumb a {
  @apply text-brand no-underline hover:underline;
}

/* Post cards usando Tailwind */
.post-card {
  @apply card overflow-hidden;
}

.post-card img {
  @apply w-full h-48 object-cover;
  border-radius: calc(var(--radius-card) - 0.25rem);
}

.post-card-content {
  @apply p-4;
}

.post-card h3 {
  @apply m-0 mb-2 text-lg font-semibold;
}

.post-card .excerpt {
  @apply text-gray-600 text-sm leading-relaxed my-2;
}

/* Search form usando Tailwind */
.search-form {
  @apply flex max-w-sm my-4;
}

.search-form input[type="search"] {
  @apply flex-1 px-4 py-2 text-base border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent;
}

.search-form button {
  @apply px-4 py-2 border-0 cursor-pointer rounded-r-lg text-white hover:brightness-95 transition-all duration-200;
  background: var(--color-brand);
}

/* Hero section usando Tailwind */
.hero {
  @apply py-12 text-center;
  background: linear-gradient(135deg, var(--color-muted) 0%, #ffffff 100%);
}

.hero h1 {
  @apply text-4xl font-bold mb-4 text-accent;
}

.hero p {
  @apply text-lg text-gray-600 mb-8 max-w-2xl mx-auto;
}

/* Responsividade usando Tailwind */
@media (max-width: 768px) {
  .hero h1 {
    @apply text-2xl;
  }
  
  .hero p {
    @apply text-base;
  }
}

/* WordPress e Performance */
img {
  @apply max-w-full h-auto;
}

img[loading="lazy"] {
  @apply transition-opacity duration-300;
}

/* Acessibilidade e seleção */
::selection {
  background: var(--color-brand);
  @apply text-white;
}

:focus-visible {
  @apply outline-2 outline-brand outline-offset-2;
}

/* WordPress específico */
.wp-block-image {
  @apply my-6;
}

.wp-block-quote {
  @apply border-l-4 border-brand pl-6 my-6 italic text-gray-700;
}

.wp-block-separator {
  @apply border-gray-300 my-8;
}