/* ============================================================
   SAUCIER — Design Tokens
   Marca: Saucier Molhos Artesanais
   Tagline: "Por uma vida com mais tempero!"
   ------------------------------------------------------------
   Cor primária ancorada no logo oficial: #CC541C
   (amostrada por pixel de saucier_logo_Prancheta 1 cópia 2.png)
   HSL base: 19° 76% 45%
   Formato HSL para permitir variações programáticas e alpha.
   ============================================================ */

:root {
  /* ---------- MARCA / PRIMÁRIA (laranja terracota Saucier) ---------- */
  --saucier-orange: 19 76% 45%;          /* #CC541C — cor oficial, base 500 */

  --orange-50:  19 80% 96%;
  --orange-100: 19 78% 90%;
  --orange-200: 19 77% 80%;
  --orange-300: 19 76% 68%;
  --orange-400: 19 76% 56%;
  --orange-500: 19 76% 45%;              /* #CC541C — oficial */
  --orange-600: 19 78% 38%;
  --orange-700: 19 80% 30%;
  --orange-800: 19 82% 23%;
  --orange-900: 19 84% 16%;

  /* ---------- NEUTROS = PAPEL & TINTA (direção artesanal, não branco-SaaS) ----------
     Tons quentes de papel/kraft nos claros, tinta marrom-carvão nos escuros.
     Nunca #fff nem #000: o fundo é papel, o texto é tinta. */
  --neutral-0:   40 44% 98%;             /* papel quase-branco, quente (era branco puro) */
  --neutral-50:  38 36% 96%;             /* papel */
  --neutral-100: 36 30% 92%;             /* papel kraft claro */
  --neutral-200: 34 24% 86%;             /* borda papel */
  --neutral-300: 30 18% 76%;
  --neutral-400: 28 14% 60%;
  --neutral-500: 27 14% 44%;
  --neutral-600: 26 18% 32%;
  --neutral-700: 26 22% 22%;
  --neutral-800: 26 26% 14%;
  --neutral-900: 26 30% 9%;
  --neutral-950: 26 32% 6%;              /* tinta quase-preta, quente */

  /* ---------- SEMÂNTICAS ---------- */
  --success: 142 55% 38%;
  --warning: 38 92% 50%;
  --error:   0 72% 48%;
  --info:    205 75% 45%;

  /* ============================================================
     TOKENS SEMÂNTICOS (modo claro) — referenciam a paleta acima
     ============================================================ */
  --bg:            var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --surface:       var(--neutral-0);
  --surface-raised:var(--neutral-0);

  --text:          var(--neutral-950);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-brand: var(--neutral-0);     /* branco sobre laranja/preto */

  --brand:         var(--orange-500);
  --brand-hover:   var(--orange-600);
  --brand-active:  var(--orange-700);
  --brand-subtle:  var(--orange-50);

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --ring:          var(--orange-500);

  /* ---------- TIPOGRAFIA ---------- */
  /* Display = Bebas Neue (oficial, condensada — ecoa "MOLHOS ARTESANAIS").
     Corpo  = Inter (neutra, legível; substituível por system-ui).        */
  --font-display: "Bebas Neue", "Anton", Impact, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (1.250 — major third) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.563rem;  /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 */
  --text-5xl:  3.815rem;  /* 61 */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Bebas Neue pede tracking levemente positivo em caixa-alta */
  --tracking-display: 0.02em;
  --tracking-wide:    0.06em;
  --tracking-normal:  0;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---------- ESPAÇAMENTO (grade base 4px) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12:3rem;     /* 48 */
  --space-16:4rem;     /* 64 */
  --space-24:6rem;     /* 96 */

  /* ---------- RAIO — contido (cara de papel/etiqueta cortada, não tudo pílula).
     Pílula reservada SÓ para botões (assinatura da marca). ---------- */
  --radius-sm:   0.25rem;
  --radius-md:   0.3rem;
  --radius-lg:   0.4rem;
  --radius-xl:   0.5rem;
  --radius-pill: 9999px;     /* só botões */

  /* ---------- SOMBRAS (quentes, ancoradas no laranja) ---------- */
  --shadow-sm: 0 1px 2px hsl(20 30% 10% / 0.08);
  --shadow-md: 0 4px 12px hsl(20 30% 10% / 0.10);
  --shadow-lg: 0 12px 32px hsl(20 30% 10% / 0.14);
  --shadow-brand: 0 8px 24px hsl(var(--orange-500) / 0.32);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   MODO ESCURO — fundo quase-preto do logo, laranja como protagonista
   ============================================================ */
:root[data-theme="dark"],
.dark {
  --bg:            var(--neutral-950);
  --bg-subtle:     var(--neutral-900);
  --bg-muted:      var(--neutral-800);
  --surface:       var(--neutral-900);
  --surface-raised:var(--neutral-800);

  --text:          var(--neutral-50);
  --text-muted:    var(--neutral-300);
  --text-subtle:   var(--neutral-400);
  --text-on-brand: var(--neutral-0);

  --brand:         19 66% 58%;           /* regra 70/60 (#37 Zander): laranja é cor quente, satura menos no dark */
  --brand-hover:   var(--orange-300);
  --brand-active:  var(--orange-200);
  --brand-subtle:  var(--neutral-800);

  --border:        var(--neutral-700);
  --border-strong: var(--neutral-600);
  --ring:          var(--orange-400);

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.5);
  --shadow-lg: 0 12px 32px hsl(0 0% 0% / 0.6);
}

/* ── Fontes servidas do próprio domínio (2026-08-31) ─────────────────────────
   Antes vinham do Google Fonts, que obriga a duas viagens: primeiro a folha em
   fonts.googleapis.com, depois o arquivo em fonts.gstatic.com. Servindo daqui,
   o endereço é fixo e a página consegue pré-carregar a fonte no primeiro
   instante. A Inter é variável: um arquivo cobre 400, 500 e 700.            */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/bebas-neue-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}