/**
 * public/css/variables.css — Tokens de design do DouradoCare.
 *
 * ============================================================
 * COMO MUDAR O TEMA DA APLICAÇÃO
 * ============================================================
 * Todas as cores, fontes e espaçamentos estão aqui.
 * Para mudar qualquer coisa visual, edite APENAS este arquivo.
 *
 * Exemplo: para mudar a cor principal de dourado para azul:
 *   Mude "--cor-primaria: #d4a017;" para "--cor-primaria: #1a73e8;"
 *
 * Os nomes das variáveis são descritivos:
 *   --cor-primaria     → cor principal da marca (dourado)
 *   --cor-ok           → cor do status "ok" (verde)
 *   --cor-inativo      → cor do status "inativo" (vermelho)
 *   --cor-atualizando  → cor do status "atualizando" (laranja)
 * ============================================================
 */

:root {
  /* ----------------------------------------------------------
   * CORES DA MARCA
   * ---------------------------------------------------------- */
  --cor-primaria:          #d4a017;   /* Dourado — cor principal */
  --cor-primaria-escura:   #b8860b;   /* Dourado escuro (hover, bordas) */
  --cor-primaria-clara:    #fef9e7;   /* Dourado claro (fundos de destaque) */
  --cor-secundaria:        #4a4a4a;   /* Cinza escuro — textos secundários */

  /* ----------------------------------------------------------
   * FUNDOS
   * ---------------------------------------------------------- */
  --cor-fundo:             #f5f5f5;   /* Fundo geral da página */
  --cor-fundo-card:        #ffffff;   /* Fundo de cards e modais */
  --cor-fundo-sidebar:     #1e1e2e;   /* Fundo da sidebar */
  --cor-fundo-sidebar-hover: #2d2d44; /* Hover nos itens da sidebar */

  /* ----------------------------------------------------------
   * TEXTOS
   * ---------------------------------------------------------- */
  --cor-texto:             #1a1a1a;   /* Texto principal */
  --cor-texto-secundario:  #666666;   /* Texto de baixa prioridade */
  --cor-texto-sidebar:     #e0e0e0;   /* Texto dentro da sidebar */
  --cor-texto-sidebar-ativo: #d4a017; /* Item ativo na sidebar */

  /* ----------------------------------------------------------
   * BORDAS E SEPARADORES
   * ---------------------------------------------------------- */
  --cor-borda:             #e0e0e0;   /* Bordas de cards, inputs */
  --cor-borda-input-foco:  #d4a017;   /* Borda de input em foco */

  /* ----------------------------------------------------------
   * STATUS DOS CLIENTES
   * Mude aqui para alterar as cores dos badges de status
   * ---------------------------------------------------------- */
  --cor-ok:                #28a745;   /* Verde — cliente ok */
  --cor-ok-fundo:          #d4edda;   /* Fundo do badge ok */
  --cor-inativo:           #dc3545;   /* Vermelho — cliente inativo */
  --cor-inativo-fundo:     #f8d7da;   /* Fundo do badge inativo */
  --cor-atualizando:       #fd7e14;   /* Laranja — em atualização */
  --cor-atualizando-fundo: #ffecd2;   /* Fundo do badge atualizando */

  /* ----------------------------------------------------------
   * STATUS DOS TICKETS
   * ---------------------------------------------------------- */
  --cor-ticket-aberto:          #0d6efd;
  --cor-ticket-aberto-fundo:    #cfe2ff;
  --cor-ticket-em-andamento:    #fd7e14;
  --cor-ticket-em-andamento-fundo: #ffecd2;
  --cor-ticket-resolvido:       #28a745;
  --cor-ticket-resolvido-fundo: #d4edda;
  --cor-ticket-fechado:         #6c757d;
  --cor-ticket-fechado-fundo:   #e2e3e5;

  /* ----------------------------------------------------------
   * FEEDBACKS (alertas, erros, sucessos)
   * ---------------------------------------------------------- */
  --cor-sucesso:           #28a745;
  --cor-sucesso-fundo:     #d4edda;
  --cor-perigo:            #dc3545;
  --cor-perigo-fundo:      #f8d7da;
  --cor-alerta:            #ffc107;
  --cor-alerta-fundo:      #fff3cd;
  --cor-info:              #0d6efd;
  --cor-info-fundo:        #cfe2ff;

  /* ----------------------------------------------------------
   * TIPOGRAFIA
   * ---------------------------------------------------------- */
  --fonte-principal: -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  --fonte-mono:      "Courier New", Courier, monospace;
  --tamanho-fonte-base: 14px;
  --altura-linha:    1.6;

  /* ----------------------------------------------------------
   * ESPAÇAMENTOS
   * ---------------------------------------------------------- */
  --espaco-xs:  4px;
  --espaco-sm:  8px;
  --espaco-md:  16px;
  --espaco-lg:  24px;
  --espaco-xl:  32px;
  --espaco-xxl: 48px;

  /* ----------------------------------------------------------
   * BORDAS ARREDONDADAS
   * ---------------------------------------------------------- */
  --raio-sm:   4px;
  --raio-md:   8px;
  --raio-lg:   12px;
  --raio-pill: 999px;   /* Para badges e tags */

  /* ----------------------------------------------------------
   * SOMBRAS
   * ---------------------------------------------------------- */
  --sombra-card:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --sombra-modal: 0 10px 40px rgba(0,0,0,0.2);
  --sombra-toast: 0 4px 12px rgba(0,0,0,0.15);

  /* ----------------------------------------------------------
   * SIDEBAR
   * ---------------------------------------------------------- */
  --largura-sidebar: 240px;
  --altura-topbar-mobile: 56px;
}