/* Saluma – design tokens (proposta). Atualizado 20/10/2026 com coleta logada. HEX extraídos dos pixels do Instagram @saluma.slz; validar com manual do cliente.
   Fonte: design-tokens.json / IDENTIDADE-VISUAL-SALUMA.md §3 */
@import url("https://fonts.googleapis.com/css2?family=Italiana&family=Cormorant+Garamond:wght@500;600&family=Zilla+Slab:wght@500;600&family=DM+Sans:wght@400;500;700&family=Montserrat:wght@300&display=swap");

:root {
  /* Marca (observado) */
  --saluma-green:   #015B3D;
  --saluma-blue:    #1D5D9D;
  --saluma-navy:    #182B80;
  --saluma-petrol:  #033F4D;
  --saluma-teal:    #014D55;
  --saluma-gold:    #F5B123;
  --saluma-orange:  #EE8D3C;
  --saluma-red:     #A62A35;
  --saluma-red-soft:#C5414F;
  --saluma-red-ma:  #F50B05; /* só decorativo / texto grande */
  --saluma-kraft:   #AC7F56;
  --saluma-logo-white: #F4FFFF;
  --saluma-stand-red: #8A0B25;   /* [novo] estande – logado/reels-04.png */

  /* [novo] Cores de sabor (artes/rótulos, coleta logada) */
  --flavor-abacaxi: #D9AF0B;  /* texto #1A1A1A 8.36:1 */
  --flavor-uva:     #861D51;  /* texto branco 9.10:1 */
  --flavor-tamara:  #E4A809;  /* texto #1A1A1A 8.21:1 */
  --flavor-tomate:  #A62A35;  /* texto branco 6.99:1 */
  --flavor-pimenta: var(--saluma-red-soft);   /* inferência */
  --flavor-goiaba:  var(--saluma-red-soft);   /* inferência */
  --flavor-bacuri:  #5C7F35;  /* inferência de uso; texto branco 4.62:1 */
  --flavor-flor-de-vinagreira: var(--saluma-stand-red); /* inferência */

  /* Neutros (inferência) */
  --bg:        #FAF6EE;
  --surface:   #FFFFFF;
  --ink:       #1A1A1A;
  --ink-muted: #4A4A4A;
  --line:      #E6DFD2;
  --on-dark:   #FFFFFF;

  /* Semânticos */
  --btn-primary-bg: var(--saluma-navy);  --btn-primary-fg: #FFFFFF;          /* 12.38:1 */
  --btn-whats-bg:   var(--saluma-green); --btn-whats-fg:   #FFFFFF;          /* 8.19:1 */
  --badge-award-bg: var(--saluma-gold);  --badge-award-fg: var(--saluma-navy); /* 6.60:1 */
  --link:           var(--saluma-blue);                                       /* 6.27:1 on --bg */
  --footer-bg:      var(--saluma-petrol);                                     /* 11.53:1 w/ white */
  --hero-bg:        var(--saluma-blue);    /* [novo] 6.76:1 c/ branco – fundo dominante das artes */

  /* Tipografia */
  --font-display: "Italiana", "Cormorant Garamond", serif;
  --font-heading: "Cormorant Garamond", serif;
  --font-flavor:  "Zilla Slab", "Roboto Slab", serif;
  --font-body:    "DM Sans", "Inter", system-ui, sans-serif;
  --font-eyebrow: "Montserrat", sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3rem);
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --fs-lead:    1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8125rem;
  --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.6;

  /* Espaços */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px; --space-5: 32px;
  --space-6: 48px; --space-7: 64px; --space-8: 96px; --space-9: 128px;

  /* Raios e sombras */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-card: 0 6px 24px rgba(3,63,77,.12);
  --shadow-card-hover: 0 12px 32px rgba(3,63,77,.18);
  --shadow-button: 0 2px 8px rgba(24,43,128,.25);

  /* Layout */
  --container: 1200px; --gutter: 24px;
}
/* Breakpoints (referência – CSS vars não funcionam em @media):
   sm 390px · md 768px · lg 1024px · xl 1440px */