/* ==========================================================================
   Certifica Eventos - Design System & UI Tokens
   Em estrita conformidade com WCAG AA, Mobile-First e Zero Dependência Externa
   ========================================================================== */

:root {
  /* Cores Semânticas Principais (Contraste mínimo 4.5:1 sobre fundos claros) */
  --color-primary: #1d4ed8;         /* Blue 700 */
  --color-primary-hover: #1e40af;   /* Blue 800 */
  --color-primary-subtle: #eff6ff;  /* Blue 50 */
  --color-primary-border: #bfdbfe;  /* Blue 200 */

  --color-success: #15803d;         /* Green 700 */
  --color-success-hover: #166534;   /* Green 800 */
  --color-success-subtle: #f0fdf4;  /* Green 50 */
  --color-success-border: #bbf7d0;  /* Green 200 */

  --color-warning: #b45309;         /* Amber 700 */
  --color-warning-subtle: #fffbeb;  /* Amber 50 */
  --color-warning-border: #fde68a;  /* Amber 200 */

  --color-danger: #b91c1c;          /* Red 700 */
  --color-danger-hover: #991b1b;    /* Red 800 */
  --color-danger-subtle: #fef2f2;   /* Red 50 */
  --color-danger-border: #fecaca;   /* Red 200 */

  /* Superfícies e Linhas */
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;  /* Slate 50 */
  --color-surface-muted: #f1f5f9;   /* Slate 100 */
  --color-border: #e2e8f0;          /* Slate 200 */
  --color-border-strong: #cbd5e1;   /* Slate 300 */

  /* Tipografia & Hierarquia de Texto */
  --color-text-main: #0f172a;       /* Slate 900 */
  --color-text-muted: #334155;      /* Slate 700 - Contraste alto para leitura */
  --color-text-subtle: #475569;     /* Slate 600 - Legendas e metadados */

  /* Fonte com Fallback de Sistema Seguro */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Tamanhos Mínimos de Toque (Mobile-First 44x44px) */
  --touch-target-min: 44px;

  /* Raios de Borda */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Sombras Sutis e Naturais (Sem brilhos neon de IA) */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Reset básico e foco de teclado acessível */
body {
  font-family: var(--font-family);
  background-color: var(--color-surface);
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Foco de teclado com alto contraste */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Botões e alvos de toque confortáveis */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Notificação Toast Moderna / Feedback Inline */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

@media (max-width: 640px) {
  .toast-container {
    bottom: 80px;
    left: 16px;
    right: 16px;
  }
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #0f172a;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  font-size: 13px;
  font-weight: 600;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.toast-success {
  background: #14532d;
  border: 1px solid #22c55e;
}

.toast.toast-error {
  background: #7f1d1d;
  border: 1px solid #ef4444;
}

/* Suporte à barra de rolagem limpa */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-surface-muted);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}