/* ==========================================================================
   tokens/colors
   Origem dos valores:
   [arte]      = amostrado em pixel das artes oficiais da loja (verificado)
   [estimado]  = derivado/ajustado a partir da referência; não lido do CSS real
   ========================================================================== */
:root {
  /* --- Paleta base: chocolate ------------------------------------------- */
  --choc-950: #2a0d07;  /* [estimado] sombra mais escura do degradê */
  --choc-900: #3b130b;  /* [arte] base inferior das faixas */
  --choc-800: #461c0e;  /* [arte] rodapé das artes */
  --choc-700: #542617;  /* [arte] topo das faixas */
  --choc-600: #653123;  /* [arte] */
  --choc-500: #76422d;  /* [arte] */
  --choc-400: #91553b;  /* [arte] centro iluminado do degradê */

  /* --- Paleta base: creme / mármore ------------------------------------- */
  --cream-50:  #fbfaf8; /* [arte] mármore claro */
  --cream-100: #f5efeb; /* [estimado] */
  --cream-200: #f1e2db; /* [arte] mármore rosado */
  --cream-300: #e6d3c9; /* [estimado] bordas sobre creme */

  /* --- Acentos ---------------------------------------------------------- */
  --caramel-500: #bf8266; /* [arte] fios sob os títulos */
  --caramel-700: #9a4a2b; /* [estimado] versão escura p/ texto (contraste AA sobre creme) */
  --mint-400:    #99ce98; /* [arte] faixa e preço do combo */
  --mint-600:    #5f9d5e; /* [estimado] estado hover/ativo do mint */
  --ink-900:     #33160d; /* [estimado] títulos sobre creme, igual ao texto das artes */

  /* --- Semânticas ------------------------------------------------------- */
  --color-bg:              var(--cream-50);
  --color-surface:         #ffffff;
  --color-surface-alt:     var(--cream-200);
  --color-surface-dark:    var(--choc-900);
  --color-text:            var(--ink-900);
  --color-text-muted:      #6e5248;          /* [estimado] 6.5:1 sobre --cream-50 */
  --color-text-on-dark:    #fbf4ef;
  --color-text-on-dark-muted: #d9c2b6;
  --color-border:          var(--cream-300);
  --color-rule:            var(--caramel-500);
  --color-accent:          var(--caramel-700);
  --color-highlight:       var(--mint-400);
  --color-highlight-ink:   var(--choc-900);

  --color-action:          var(--choc-700);
  --color-action-hover:    var(--choc-900);
  --color-action-ink:      #ffffff;
  --color-focus:           #1f6fd1;          /* anel de foco visível em fundo claro e escuro */

  /* Degradê-assinatura das artes: luz no topo central, escurecendo para a base */
  --gradient-chocolate:
    radial-gradient(120% 90% at 50% 0%, var(--choc-400) 0%, var(--choc-600) 45%, var(--choc-900) 100%);
  --gradient-marble:
    linear-gradient(135deg, var(--cream-50) 0%, var(--cream-200) 100%);
}