/* ============================================================
   TOKENS DO PAINEL — cor, fonte, raio, sombra e movimento
   ------------------------------------------------------------
   ponytail: este é o ÚNICO arquivo de marca do painel. Trocar de
   cliente = editar os valores aqui, sem renomear variável. Não existe
   tema-yazy.css separado de propósito: só passa a existir quando
   houver o segundo cliente (YAGNI). O painel não lê mais
   ../css/tema.css da loja; os valores abaixo são os mesmos que ele
   herdava de lá (o visual da YAZY não mudou).
   painel.css só usa var(--…): zero hex fora daqui (testes/teste-tokens.js).
   ============================================================ */

:root {
  /* --- PALETA (marca) -------------------------------------- */
  --cor-acento:        #C8A84B;   /* dourado: acentos, bordas */
  --cor-acento-claro:  #E2C97E;   /* dourado claro: gradientes */
  --cor-acento-escuro: #A8842C;   /* destaque em itálico */
  --cor-acento-palha:  #F4E3B5;   /* texto claro sobre o escuro */
  --cor-texto:         #4A3B29;   /* texto forte; também o fundo escuro (trilho, botão sólido) */
  --cor-texto-hover:   #3E3225;   /* hover do botão sólido */
  --cor-texto-medio:   #6B5540;   /* texto corrido */
  --cor-texto-suave:   #8A7A63;   /* texto secundário, legendas */
  --cor-detalhe:       #A0855B;   /* links discretos, eyebrow */
  --cor-contraste:     #4A1E2F;   /* vinho: cartão de contraste */

  /* --- FUNDOS e FIOS --------------------------------------- */
  --cor-branco:        #FFF;
  --cor-fundo:         #F8F5EE;
  --cor-fundo-alt:     #F4EDE1;
  --cor-superficie:    #FDFCFA;   /* cartões */
  --cor-borda:         #EDE6D9;
  --cor-areia:         #F3EDE4;
  --cor-fundo-destaque:#EFE4D0;
  --cor-fundo-saldo:   #FBF7EF;
  --cor-neutro-fundo:  #EDE7DA;
  --cor-cmv:           #D9CCB5;   /* barra de CMV nos gráficos */
  --cor-rosa:          #C98B94;   /* anel de foco do campo calculado */

  /* --- ESTADOS --------------------------------------------- */
  --cor-ok:            #3E6B47;
  --cor-ok-escuro:     #2F5B3A;
  --cor-ok-forte:      #2F5638;
  --cor-ok-vivo:       #3E8A50;
  --cor-ok-suave:      #4B7A52;
  --cor-ok-fundo:      #E3EEE4;
  --cor-fechado-fundo: #E3EEE5;
  --cor-erro:          #A8402C;
  --cor-erro-escuro:   #A3402F;
  --cor-erro-claro:    #F0B3A4;   /* negativo sobre fundo escuro */
  --cor-erro-suave:    #E8A392;
  --cor-erro-fundo:    #F5E1DC;
  --cor-aviso:         #8A5A20;
  --cor-aviso-escuro:  #8A5A12;
  --cor-aviso-vivo:    #C58A22;
  --cor-aviso-fundo:   #F6E9D9;
  --cor-alerta-fundo:  #F6EBD2;
  --cor-alerta-borda:  #9A6B12;
  --cor-alerta-texto:  #5E4613;
  --cor-alerta-forte:  #4A370E;
  --cor-nota-forte:    #6B4E12;

  /* --- FONTES ---------------------------------------------- */
  --fonte-texto:  "Montserrat", -apple-system, "Segoe UI", Helvetica, sans-serif;
  /* Títulos do painel ficam em Georgia (a loja usa EB Garamond; o painel
     ficou de fora de propósito — decisão de design, não de organização). */
  --fonte-titulo: Georgia, "Cormorant Garamond", serif;
  /* Números: Inter, figura alinhada (Georgia usa algarismo old-style e
     entorta coluna financeira). */
  --fonte-numero: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-painel: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Assinatura "Y A Z Y" (login). Tenor Sans só tem o peso 400. */
  --fonte-logo:    "Tenor Sans", "Poppins", sans-serif;
  --logo-tracking: .30em;

  /* --- FORMA ----------------------------------------------- */
  --raio-sm: 2px;
  --raio-md: 4px;
  --raio-lg: 8px;
  --raio-controle: 7px;
  --raio-pastilha: 9px;

  /* --- SOMBRA e FOCO (tingidas de cacau) -------------------- */
  --sombra-controle:  0 1px 1.5px rgba(74,59,41,.10);
  --sombra-flutuante: 0 4px 14px rgba(74,59,41,.10), 0 1px 3px rgba(74,59,41,.06);
  --sombra-alta:      0 18px 44px rgba(74,59,41,.16), 0 2px 8px rgba(74,59,41,.08);
  --foco: 0 0 0 3.5px rgba(200,168,75,.32);

  /* --- MOVIMENTO: sai rápido, chega devagar ------------------ */
  --mov-rapido: 130ms;
  --mov-normal: 220ms;
  --curva: cubic-bezier(.32, .72, 0, 1);

  /* --- ROLAGEM (vinha do tema.css da loja) ------------------- */
  --rolagem-polegar:       rgba(74,59,41,.22);
  --rolagem-polegar-forte: rgba(74,59,41,.42);
}

/* Barra de rolagem fina, cacau translúcida. Chrome/Firefox leem
   scrollbar-*; Safari lê ::-webkit-scrollbar — por isso as duas. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rolagem-polegar) transparent;
}
*:hover { scrollbar-color: var(--rolagem-polegar-forte) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rolagem-polegar);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--rolagem-polegar-forte); }
::-webkit-scrollbar-button { display: none; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}