/* ==========================================================================
   Bunker Foods · Design System · tokens.css
   Foundation: design tokens, reset, base typography, utility classes
   Version: 1.0.0
   ========================================================================== */

/* --- Design Tokens ------------------------------------------------------ */
:root {
  /* Paleta — base */
  --c-cream:        #FAF6F0;
  --c-cream-soft:   #F5EFE6;
  --c-cream-warm:   #F0E8D8;
  --c-brown:        #3D1A0A;
  --c-brown-deep:   #2A1308;
  --c-brown-mid:    #5C2A12;
  --c-brown-soft:   #8B4513;
  --c-orange:       #F26B1F;
  --c-orange-deep:  #E55A0F;
  --c-orange-light: #FF8C42;
  --c-red:          #E62E1A;
  --c-success:      #2D7A3E;

  /* Aliases semânticos */
  --bg:             var(--c-cream);
  --bg-soft:        var(--c-cream-soft);
  --bg-warm:        var(--c-cream-warm);
  --bg-dark:        var(--c-brown-deep);
  --text:           var(--c-brown-deep);
  --text-mid:       var(--c-brown-mid);
  --text-soft:      var(--c-brown-soft);
  --text-inverse:   var(--c-cream);
  --primary:        var(--c-orange);
  --primary-deep:   var(--c-orange-deep);
  --accent:         var(--c-red);
  --border:         rgba(61, 26, 10, 0.12);
  --border-strong:  rgba(61, 26, 10, 0.25);

  /* Tipografia */
  --font-display:   'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* Escala tipográfica fluida */
  --fs-xs:    clamp(11px, 0.7vw, 12px);
  --fs-sm:    clamp(13px, 0.85vw, 14px);
  --fs-base:  clamp(15px, 1vw, 17px);
  --fs-md:    clamp(17px, 1.15vw, 20px);
  --fs-lg:    clamp(20px, 1.4vw, 24px);
  --fs-xl:    clamp(24px, 1.8vw, 32px);
  --fs-2xl:   clamp(32px, 2.6vw, 48px);
  --fs-3xl:   clamp(40px, 4vw, 64px);
  --fs-4xl:   clamp(48px, 5.2vw, 84px);
  --fs-hero:  clamp(44px, 6.2vw, 96px);

  /* Pesos */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Espaçamento (escala 4/8) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  80px;
  --s-10: 96px;
  --s-11: 128px;
  --s-12: 160px;

  /* Container */
  --max-w:        1440px;
  --max-w-narrow: 1100px;
  --max-w-text:   720px;
  --gutter:       clamp(24px, 4vw, 64px);

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 999px;

  /* Sombras */
  --shadow-sm:   0 2px 8px -2px rgba(61, 26, 10, 0.08);
  --shadow-md:   0 12px 32px -10px rgba(61, 26, 10, 0.18);
  --shadow-lg:   0 32px 64px -20px rgba(61, 26, 10, 0.35);
  --shadow-cta:  0 16px 36px -10px rgba(242, 107, 31, 0.55);
  --shadow-cta-hover: 0 24px 48px -12px rgba(242, 107, 31, 0.7);

  /* Animação */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:      150ms;
  --t-base:      250ms;
  --t-slow:      500ms;

  /* Dot grid effect tokens */
  --dg-bg:               var(--c-cream);
  --dg-dot-color:        #5C2A12;
  --dg-glow-color:       #F26B1F;
  --dg-dot-size:         1.8;
  --dg-spacing:          28;
  --dg-mouse-radius:     240;
  --dg-connect-distance: 90;
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--c-orange); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tipografia base ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--text);
}
h1 { font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.042em; }
h2 { font-size: var(--fs-3xl); line-height: 0.95; letter-spacing: -0.038em; }
h3 { font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.032em; }
h4 { font-size: var(--fs-xl); line-height: 1.1; letter-spacing: -0.025em; }
p { font-size: var(--fs-base); line-height: 1.6; color: var(--text-mid); }

/* --- Container & section utils ------------------------------------------ */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--max-w-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section {
  padding-block: clamp(64px, 8vw, 120px);
  position: relative;
}
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-dark); color: var(--text-inverse); }
.section--dark p { color: rgba(250, 246, 240, 0.7); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-inverse); }

.section__head { max-width: 60ch; margin-bottom: var(--s-8); }
.section__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: var(--s-4);
}
.section__eyebrow::before { content: '// '; }
.section__title { margin-bottom: var(--s-4); }
.section__sub {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-mid);
  max-width: 60ch;
}



/* --- Reveal scroll utility --------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}