/* arrumaLeads · Design tokens (v1, inspirado na leveza do Clay)
   Fonte única da aparência: usada pelo sistema (/tokens.css) e pelas páginas da extensão. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/inter.woff2) format("woff2")}

:root {
  /* Tipografia */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px;   --lh-xs: 16px;   /* labels, metadados, chips */
  --text-sm: 13px;   --lh-sm: 20px;   /* células de tabela densas */
  --text-md: 14px;   --lh-md: 20px;   /* corpo padrão, botões, nav */
  --text-lg: 16px;   --lh-lg: 24px;   /* títulos de card/seção */
  --text-xl: 18px;   --lh-xl: 28px;   /* título da página */
  --text-2xl: 24px;  --lh-2xl: 32px;  /* números de KPI */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;             /* teto: nada acima de 600 */

  /* Neutros (cinza frio) */
  --gray-0:   #FFFFFF;
  --gray-25:  #F7F8F9;  /* fundo da sidebar, hover de linha */
  --gray-50:  #EFF1F4;  /* fundo de chip neutro, input desabilitado */
  --gray-100: #E6E8EC;  /* divisórias internas */
  --gray-200: #D6D9DF;  /* borda padrão */
  --gray-400: #A5ACB8;  /* placeholder, ícone inativo */
  --gray-600: #525A69;  /* texto secundário */
  --gray-700: #3C414D;  /* texto de apoio forte */
  --gray-900: #111318;  /* texto principal */

  /* Marca (uso pontual: botão principal, foco, item ativo) */
  --brand-500: #E8462D;
  --brand-600: #CF3A22;
  --brand-50:  #FDEDEA;

  /* Semânticas (só em chips e indicadores) */
  --success-fg: #12784A;  --success-bg: #E3F5EA;
  --warning-fg: #9A6200;  --warning-bg: #FEF6DC;
  --info-fg:    #0653B5;  --info-bg:    #E3F0FE;
  --danger-fg:  #B42318;  --danger-bg:  #FDECEA;

  /* Papéis */
  --bg-app: var(--gray-0);
  --bg-subtle: var(--gray-25);
  --bg-muted: var(--gray-50);
  --border: var(--gray-200);
  --divider: var(--gray-100);
  --text: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-400);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 25%, transparent);

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

  /* Forma */
  --radius-sm: 4px;   /* chips, checkbox */
  --radius-md: 6px;   /* botões, inputs, itens de nav */
  --radius-lg: 8px;   /* cards, popovers */
  --radius-full: 999px;
  --shadow-pop: 0 4px 16px rgba(17, 19, 24, .08), 0 0 0 1px var(--border); /* só menus/drawers */

  /* Alturas de controle */
  --control-sm: 28px;  /* botões de toolbar, selects de status */
  --control-md: 32px;  /* inputs e botões padrão */
  --row-height: 44px;  /* linha de tabela */

  /* Nomes antigos do projeto, apontando para os tokens (migração gradual) */
  --paper: var(--gray-25);   --paper-2: var(--gray-50);   --paper-3: var(--gray-900);
  --ink: var(--text);        --ink-soft: var(--text-secondary);
  --line: var(--divider);    --line-2: var(--border);     --row-hover: var(--gray-25);
  --accent: var(--brand-500); --accent-deep: var(--brand-600); --accent-tint: var(--brand-50);
  --green: var(--success-fg); --green-bg: var(--success-bg);
  --amber: var(--warning-fg); --amber-bg: var(--warning-bg);
  --blue: var(--info-fg);     --blue-bg: var(--info-bg);   --gray-bg: var(--gray-50);
  --font: var(--font-sans);  --pad: var(--space-6);
}