/*
------------------------------------------------------------
 MapScraper Pro — Design System
 Fonte única dos tokens visuais (cor, tipografia, radius, sombra,
 movimento, espaçamento) usados por popup/ e dashboard/.

 Não redefinir estas variáveis localmente em outros arquivos CSS —
 qualquer ajuste de identidade visual deve acontecer aqui.
------------------------------------------------------------
*/
:root {
  /* Marca — Purple */
  --brand-900: #2B0A2B; /* Dark Purple */
  --brand-800: #470047; /* Purple — identidade principal */
  --brand-700: #702963; /* Purple secundário */
  --brand-500: #8A2BE2; /* Hover */
  --brand-400: #9D4EDD; /* Accent — ícones, links, estados ativos */
  --brand-100: #F1EDF5; /* tint claro — fundos secundários, badges positivas */
  --brand-50: #F8F5FA;  /* tint ultra claro — hover wash */
  --brand-gradient: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 100%);

  /* Superfícies */
  --surface-page: #FAFAFB;
  --surface-card: #FFFFFF;
  --surface-subtle: #F6F5F8;

  /* Texto — nunca preto puro */
  --text-primary: #1B1B1B;
  --text-secondary: #555555;
  --text-tertiary: #7A7A7A;

  /* Bordas — sempre Purple, delicadas */
  --border: rgba(112, 41, 99, 0.20);
  --border-subtle: rgba(112, 41, 99, 0.12);

  /* Estados semânticos — uso pontual (badges negativas, feedback de webhook,
     avisos). O Purple estrutural (linhas/bordas/foco/seleção) continua
     mandatório em todo o resto da interface. */
  --success-color: #1E8E5A;
  --success-bg: rgba(30, 142, 90, 0.08);
  --danger-color: #B3261E;
  --danger-bg: rgba(179, 38, 30, 0.08);
  --warning-color: #B8860B;
  --warning-bg: rgba(184, 134, 11, 0.08);
  --star-color: #F5A623; /* score / favoritos — convenção universal dourada */

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;   /* botões, inputs, selects */
  --radius-lg: 18px;   /* cards, painéis */
  --radius-pill: 999px; /* chips, badges */

  /* Sombra — discreta, estilo Linear */
  --shadow-xs: 0 1px 2px rgba(43, 10, 43, 0.04);
  --shadow-sm: 0 2px 8px rgba(43, 10, 43, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 10, 43, 0.08);
  --shadow-focus: 0 0 0 4px rgba(157, 78, 221, 0.16);

  /* Movimento */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-800);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-700);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Scrollbar fina, thumb Purple — aplicada globalmente */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand-400); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-900); }