/* RefactorAI — base.css
   Tokens CSS, reset global e utilitários
   ===================================== */

/* ----------------------------------------
   TOKENS — Design System
   ---------------------------------------- */
:root {
  /* Superfícies */
  --ra-bg: #09090b;       /* Dominant 60% — fundo de página */
  --ra-surface: #18181b;  /* Secondary 30% — cards, sidebar, formulários */
  --ra-surface-2: #27272a; /* Terceiro nível — hover states, table header */
  --ra-border: #3f3f46;   /* Bordas */

  /* Tipografia */
  --ra-text: #fafafa;
  --ra-text-secondary: #a1a1aa;
  --ra-text-muted: #71717a;

  /* Accent */
  --ra-accent: #3b82f6;              /* Accent 10% — CTA primário e link ativo */
  --ra-accent-light: #60a5fa;        /* Hover de accent, ícones */
  --ra-accent-glow: rgba(59, 130, 246, 0.15);

  /* Semântico */
  --ra-destructive: #ef4444;
  --ra-destructive-bg: rgba(239, 68, 68, 0.1);
  --ra-success: #22c55e;
  --ra-warning: #f59e0b;

  /* Forma */
  --ra-radius: 12px;
  --ra-radius-sm: 8px;
  --ra-radius-full: 100px;

  /* Transição */
  --ra-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------
   RESET
   ---------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------------------------------
   BASE BODY
   ---------------------------------------- */
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ra-bg);
  color: var(--ra-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 14px;
}

/* ----------------------------------------
   ACESSIBILIDADE — FOCUS VISIBLE
   ---------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--ra-accent);
  outline-offset: 2px;
}

/* ----------------------------------------
   UTILITÁRIOS
   ---------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ----------------------------------------
   TOAST NOTIFICATIONS
   ---------------------------------------- */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--ra-radius-sm);
  color: white;
  font-size: 14px;
  font-weight: 700;
  animation: toast-in 0.3s ease;
  pointer-events: auto;
}

.toast-success {
  background: var(--ra-success);
}

.toast-error {
  background: var(--ra-destructive);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(12px);
  }
}