/* ============================================================
   CotaçãoFácil — Painel do Varejista
   tokens.css  |  fundação compartilhada
   ------------------------------------------------------------
   Tokens de marca + o botão primário. Carregado por TODAS as
   telas (painel autenticado via base.php, e as telas de login/
   cadastro), para que a cor de marca e o botão tenham UMA única
   definição — sem cópias de `:root{--primary}` espalhadas nem
   `style="background:#F97316;color:#fff"` colado em cada botão.
   Deve ser carregado ANTES de panel.css e de qualquer <style>
   específico de página.
   ============================================================ */

:root {
  /* ── Marca: laranja de obra sobre azul-noite ─────────────── */
  --primary:        #F97316;  /* laranja de marca (preenchimento) */
  --primary-dark:   #ea6c0a;  /* estado hover/active (escurece)   */
  --primary-hover:  #ea6c0a;  /* alias semântico do hover         */
  --primary-light:  #fff7ed;  /* tinta clara p/ fundos/realces    */
  --primary-ink:    #C2410C;  /* laranja como TEXTO sobre branco (AA ≥4.5:1) */
  --on-primary:     #1E293B;  /* texto sobre laranja: tinta escura (AA) */
  --secondary:      #1E3A5F;  /* azul-noite (sidebar, títulos)    */
  --secondary-light:#2a4f80;

  /* ── Superfície / neutros ────────────────────────────────── */
  --bg:             #F1F5F9;
  --card-bg:        #ffffff;
  --border:         #E2E8F0;
  --text:           #1E293B;
  --muted:          #5B6A82;  /* slate levemente escurecido: AA sobre branco E sobre o bg tingido (#64748B reprovava no bg a 4,34:1) */

  /* ── Cores semânticas (estado) ───────────────────────────────
     Um par tinta+fundo por estado, com contraste AA da tinta
     sobre o próprio fundo. Status nunca só por cor: sempre
     acompanhados de ícone + texto (ver status_badge_icon()). */
  --success-bg:     #f0fdf4;
  --success-ink:    #166534;  /* verde-800 sobre fundo pálido: AA */
  --danger-bg:      #fef2f2;
  --danger-ink:     #b91c1c;  /* vermelho-700: AA sobre fundo pálido */
  --warning-bg:     #fefce8;
  --warning-border: #fde68a;
  --warning-ink:    #92400e;  /* âmbar-800: AA sobre fundo pálido  */
  --info-bg:        #eff6ff;
  --info-ink:       #1d4ed8;

  /* ── Métrica de layout ───────────────────────────────────── */
  --sidebar-w:      240px;
  --topbar-h:       60px;
  --radius:         12px;
  --radius-sm:      10px;
  --shadow:         0 2px 12px rgba(0,0,0,.07);

  /* ── Escala de espaçamento (base 4pt; nome = valor ÷ 4) ─────
     Uma fonte só para paddings/gaps/margens, em vez de px avulsos. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── Escala de empilhamento (z-index) semântica ────────────── */
  --z-topbar:  100;
  --z-overlay: 999;
  --z-sidebar: 1000;
}

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

/* Respeita quem pede menos movimento (reduced motion não é opcional). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Botão primário ──────────────────────────────────────────
   ÚNICA definição do botão de marca. Toda tela usa
   class="btn btn-primary". Recolorimos o botão do Bootstrap pelas
   suas próprias variáveis --bs-btn-*, o que preserva todos os
   estados nativos (hover, active, disabled, anel de foco).
   A cor do TEXTO é decidida só aqui — um lugar para acertar o
   contraste sobre o laranja. */
.btn-primary {
  /* Texto: TINTA ESCURA sobre laranja. Branco sobre #F97316 dá
     ~2,9:1 e reprova no AA; #1E293B (--on-primary) dá ~5,4:1. */
  --bs-btn-color:               var(--on-primary);
  --bs-btn-hover-color:         var(--on-primary);
  --bs-btn-active-color:        var(--on-primary);
  --bs-btn-disabled-color:      var(--on-primary);
  --bs-btn-bg:                  var(--primary);
  --bs-btn-border-color:        var(--primary);
  --bs-btn-hover-bg:            var(--primary-dark);
  --bs-btn-hover-border-color:  var(--primary-dark);
  --bs-btn-active-bg:           var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-bg:         var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  font-weight: 600;
}