/* =========================================
   VARIABLES
   Tokens de design: cores, fontes,
   espaçamentos, bordas
========================================= */
:root {
  /* Paleta: teal #059ba3 · laranja #d27526 · neutro #dfe0db · teal-claro #66d5dc */

  --sage:       #059ba3;        /* teal principal */
  --sage-light: #66d5dc;        /* teal claro */
  --sage-pale:  #e8f8f9;        /* teal bem claro (fundo sutil) */
  --sage-dark:  #037a81;        /* teal escuro (hover/destaque) */
  --sage-mid:   #04878e;        /* teal médio */
  --cream:      #f5f5f3;        /* neutro claro derivado de #dfe0db */
  --warm-white: #fafafa;        /* branco quente neutro */
  --sky:        #66d5dc;        /* teal claro (alias) */
  --sky-light:  #b2ebee;        /* teal claro pastel */
  --sky-pale:   #e8f8f9;        /* teal palido */
  --peach:      #d27526;        /* laranja principal */
  --peach-pale: #fdf0e2;        /* laranja palido */
  --orange:     #d27526;        /* laranja acento */
  --orange-dark:#b8641f;        /* laranja escuro hover */
  --text-dark:  #1a2e30;        /* escuro com tom teal */
  --text-mid:   #3d5c5f;        /* médio com tom teal */
  --text-soft:  #6b8e91;        /* suave com tom teal */
  --gold:       #d27526;        /* laranja como acento dourado */
}