/* ============================================================
   NMP-ERP — TOKENS DE DESIGN
   ============================================================
   ⚠️  ESTE É O ÚNICO ARQUIVO QUE PODE DEFINIR TOKENS VISUAIS.
   
   REGRA INVIOLÁVEL:
   - NUNCA escrever hex de cor direto no HTML/CSS de tela
   - NUNCA escrever spacing em px direto
   - SEMPRE usar var(--token-name)
   - Se precisar de novo token, adicionar AQUI primeiro
   
   PRD MASTER: PRD-MASTER-NMP-ERP.md seção 2/3/4
   Última atualização: 21/05/2026
   ============================================================ */

:root {
  /* ============ PALETA B — CORES PRINCIPAIS ============ */
  
  /* Teal (PRIMÁRIA — protagonista do sistema) */
  --teal-50:   #EFF8F9;
  --teal-100:  #D4ECEF;
  --teal-500:  #51A8B1;   /* CTAs, links, ativos */
  --teal-600:  #438D95;   /* hover de primária */
  --teal-700:  #366F76;   /* texto de marca */
  --teal-900:  #1E5A60;   /* títulos de hero card */
  
  /* Laranja (ACENTO — uso pontual <10% da tela) */
  --orange-100: #FDE5D2;
  --orange-500: #F58634;  /* desconto, destaque "Exclusivo", promoção */
  --orange-700: #C25D14;  /* texto sobre fundo claro / contorno laranja */
  
  /* Neutros */
  --gray-50:  #F9FAFB;    /* background da app */
  --gray-100: #F3F4F6;    /* backgrounds neutros */
  --gray-200: #E5E7EB;    /* bordas */
  --gray-300: #D1D5DB;    /* avatars vazios */
  --gray-400: #9CA3AF;    /* ícones desabilitados */
  --gray-500: #6B7280;    /* labels, metadados */
  --gray-700: #374151;    /* texto secundário */
  --gray-900: #111827;    /* corpo principal */
  
  /* Branco */
  --white: #FFFFFF;
  
  /* ============ SEMÂNTICAS ============ */
  
  --success:    #10B981;
  --success-bg: #D1FAE5;
  --success-text: #047857;
  
  --warning:    #F59E0B;
  --warning-bg: #FEF3C7;
  --warning-text: #B45309;
  
  --error:    #EF4444;
  --error-bg: #FEE2E2;
  --error-text: #B91C1C;
  
  --info:    #3B82F6;
  --info-bg: #DBEAFE;
  --info-text: #1E40AF;
  
  /* ============ PRODUTOS/INTEGRAÇÕES ============ */
  
  --whatsapp:      #25D366;
  --whatsapp-dark: #128C7E;
  --whatsapp-bg:   #DCF8C6;
  
  --pix: #00BDAE;
  
  /* ============ TIPOGRAFIA ============ */
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --text-xs:   11px;    /* limite inferior absoluto */
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;    /* mínimo no mobile (evita zoom iOS) */
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;
  
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  
  --tracking-tight: -0.5px;   /* títulos grandes */
  --tracking-wide:  0.5px;    /* labels uppercase */
  
  /* ============ ESPAÇAMENTO (escala 4px) ============ */
  
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  
  /* ============ RAIOS ============ */
  
  --r-sm:   6px;       /* inputs pequenos, badges quadrados */
  --r-md:   10px;      /* botões, chips, inputs principais */
  --r-lg:   14px;      /* cards, drawers desktop */
  --r-xl:   20px;      /* modais grandes, drawer mobile top */
  --r-pill: 999px;     /* chips, badges arredondados, FAB */
  
  /* ============ SOMBRAS ============ */
  
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  
  /* ============ MOTION ============ */
  
  --transition-fast:   100ms ease-out;
  --transition-normal: 150ms ease-out;
  --transition-slow:   200ms ease-out;
  
  /* ============ ALVOS DE TOQUE ============ */
  
  --touch-min: 44px;    /* mínimo absoluto pra qualquer elemento interativo */
  
  /* ============ SETORES — PDV card faixa lateral ============ */

  --setor-clinica: var(--teal-500);   /* #51A8B1 — Clínica (teal Cambuá) */
  --setor-banho:   var(--orange-500); /* #F58634 — Banho e Tosa (laranja Cambuá) */
  --setor-pet:     #7F77DD;           /* Pet shop / venda / balcão (roxo) */
  --setor-hotel:   #2E8B57;           /* Hotel (verde-mar) */

  /* Fundos pastel dos setores — para círculos/avatares da Tela 2 */
  --setor-clinica-bg: var(--teal-100);  /* #D4ECEF — reusa token existente */
  --setor-banho-bg:   var(--orange-100); /* #FDE5D2 — reusa token existente */
  --setor-pet-bg:     #EBEBFA;           /* roxo pastel derivado de --setor-pet */
  --setor-hotel-bg:   #D4EDE1;           /* verde-mar pastel derivado de --setor-hotel */

  /* ============ CARD STATUS — PDV Tela 1 ============ */

  --card-andamento-bg:    #FAEEDA;  /* âmbar-50 (mini-blocos) */
  --card-andamento-badge: #FBBF24;  /* âmbar badge sólido */
  --card-andamento-text:  #412402;  /* âmbar escuro */

  --card-concluido-bg:    #E6F1FB;  /* azul-50 (mini-blocos) */
  --card-concluido-badge: #3B82F6;  /* azul badge sólido */

  --card-faturado-bg:    #EAF3DE;  /* verde-50 (mini-blocos) */
  --card-faturado-badge: #16A34A;  /* verde badge sólido */

  /* ============ BREAKPOINTS (uso em media query) ============ */
  
  /* mobile: 0 - 767px */
  /* tablet: 768 - 1023px */
  /* desktop: 1024px+ */
  
  /* Z-INDEX */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fab: 30;
  --z-drawer-backdrop: 40;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
}

/* ============================================================
   RESET BÁSICO
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--text-md);
  color: var(--gray-900);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal);
}

/* Prevenção de zoom em inputs no iOS */
input, textarea, select {
  font-size: var(--text-md);
}