@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Brand — Aegro (extracted from aegro.com.br) */
    --green: #00C65E;
    --green-hover: #00B354;
    --green-light: #ECFDF3;
    --green-dark: #024344;

    /* Neutral */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-900: #111827;

    /* Semantic badges */
    --badge-green-bg: #ECFDF3;
    --badge-green-text: #059669;
    --badge-yellow-bg: #FEF3C7;
    --badge-yellow-text: #B45309;
    --badge-red-bg: #FEF2F2;
    --badge-red-text: #DC2626;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --shadow-md: 0 2px 8px rgba(17, 24, 39, 0.04);

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;
  }

  html, body { margin: 0; padding: 0; }
  body { font-family: var(--font-sans); }

  /* Global focus — WCAG AA */
  *:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.2s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--gray-200); }
}

@layer components {
  /* Confidence badges */
  .badge-confidence { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 6px; border-radius: 3px; }
  .badge-confidence--high { background: var(--badge-green-bg); color: var(--badge-green-text); }
  .badge-confidence--medium { background: var(--badge-yellow-bg); color: var(--badge-yellow-text); }
  .badge-confidence--low { background: var(--badge-red-bg); color: var(--badge-red-text); }

  /* Price change (neutral — no red/green judgment) */
  .price-change { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; color: var(--gray-600); background: var(--gray-100); }

  /* Badge recent */
  .badge-recent { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--badge-green-bg); color: var(--badge-green-text); }

  /* Container */
  .container-app { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
  @media (max-width: 640px) { .container-app { padding-inline: 16px; } }

  /* Context bar pills */
  .context-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.1);
    padding: 3px 10px; border-radius: var(--radius-full);
  }
  .context-pill strong { color: #fff; font-weight: 700; }

  /* Screen reader only */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
  .sr-only:focus { position: static; width: auto; height: auto; padding: 0.5rem 1rem; margin: 0; overflow: visible; clip: auto; background: var(--green); color: #fff; z-index: 9999; }
}