/* =====================================================================
   SANTA DELÍCIA — Design tokens
   ---------------------------------------------------------------------
   Referência: padaria de bairro, não escritório corporativo.
   Fundo de massa crua, azul da marca, dourado de casquinha. Tudo quente,
   com cantos macios. Cinza frio e canto reto passam frieza de escritório.
   ===================================================================== */

:root {
  /* ---- Azul da marca (da logo) ---- */
  --navy-900: #131c3f;
  --navy-800: #1b2650;
  --navy-700: #22305f;
  --navy:     #283773;   /* cor oficial da logo */
  --navy-500: #47569c;
  --navy-300: #98a2c9;
  --navy-100: #dfe3f0;
  --navy-50:  #eff1f8;

  /* ---- Massa e casquinha: o coração da paleta ---- */
  --massa-50:  #fefbf4;   /* creme quase branco, base das páginas */
  --massa-100: #fbf4e4;   /* creme da logo */
  --massa-200: #f5e9cf;   /* seção alternada */
  --massa-300: #ecdab4;   /* bordas quentes */
  --massa-400: #ddc392;

  --dourado:     #c08329;  /* casquinha assada — ações principais */
  --dourado-600: #8c5c14;  /* escurecido para o texto passar em contraste */
  --dourado-400: #d9a04f;
  --dourado-100: #f9edd7;

  --canela:   #8a5a2b;     /* marrom quente para apoio */
  --tijolo:   #b5441f;     /* vermelho de forno, usado com parcimônia */

  /* ---- Tinta quente. Preto acinzentado deixa tudo frio ---- */
  --tinta:    #34281a;
  --tinta-80: #5b4936;
  --tinta-60: #7d6a54;
  --tinta-40: #8a7862;   /* só para ícone e placeholder; texto miúdo usa tinta-60 */
  --tinta-25: #c4b8a6;

  --branco: #ffffff;

  /* Aliases */
  --linha:       #ebdfc8;
  --linha-forte: #dccdad;
  --sup-0: var(--branco);
  --sup-1: var(--massa-50);
  --sup-2: var(--massa-100);
  --sup-3: var(--massa-200);

  /* ---- Estados, em versões quentes ---- */
  --verde:       #4a7c40;
  --verde-claro: #edf4e8;
  --vermelho:    #b5441f;
  --verm-claro:  #fceee9;
  --ambar:       #9a6c12;
  --ambar-claro: #fbf0d9;
  --azul:        #2c6285;
  --azul-claro:  #e9f1f6;
  --roxo:        #6b4a8a;
  --roxo-claro:  #f1eaf6;

  /* ---- Tipografia ----
     Bitter: serifa slab, robusta e quente, cara de placa de padaria.
     Nunito Sans: humanista de terminações macias, confortável de ler. */
  --f-titulo: "Fraunces", Georgia, "Times New Roman", serif;   /* serifa quente, macia — cara de coisa recém-assada */
  --f-corpo:  "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dado:   "Fraunces", Georgia, serif;   /* preço com cara de lousa de padaria */

  --t-xs:   0.78125rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.09375rem;
  --t-lg:   clamp(1.25rem, 1.16rem + 0.45vw, 1.4375rem);
  --t-xl:   clamp(1.4375rem, 1.3rem + 0.75vw, 1.8125rem);
  --t-2xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.375rem);
  --t-3xl:  clamp(2rem, 1.65rem + 1.8vw, 3rem);
  --t-4xl:  clamp(2.25rem, 1.7rem + 2.8vw, 3.875rem);

  --lh-titulo: 1.18;
  --lh-corpo:  1.7;
  --ls-titulo: -0.012em;
  --ls-rotulo: 0.1em;
  --ls-mono:   0.01em;

  /* ---- Espaçamento ---- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 5.5rem;   --e-10: 7rem;

  --secao-y: clamp(3.5rem, 2.2rem + 6vw, 6.5rem);

  /* ---- Cantos macios. Isto é o que tira a cara de escritório ---- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* ---- Sombras quentes, com tom de canela ---- */
  --s-1: 0 1px 2px rgba(82, 58, 30, .06);
  --s-2: 0 3px 10px rgba(82, 58, 30, .08), 0 1px 3px rgba(82, 58, 30, .05);
  --s-3: 0 10px 26px rgba(82, 58, 30, .11), 0 3px 8px rgba(82, 58, 30, .06);
  --s-4: 0 22px 50px rgba(82, 58, 30, .16), 0 6px 14px rgba(82, 58, 30, .07);

  /* ---- Movimento com leve elasticidade ---- */
  --suave:  cubic-bezier(.33, .8, .35, 1);
  --mola:   cubic-bezier(.34, 1.4, .64, 1);
  --rapido: 170ms var(--suave);
  --medio:  300ms var(--suave);
  --lento:  520ms var(--suave);

  /* ---- Layout ---- */
  --largura:      1180px;
  --largura-fina: 700px;
  --cabecalho-h:  74px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
}

@media (min-width: 900px) {
  :root { --cabecalho-h: 88px; }
}

.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}