/* ============================================================
   DIVINO FOGÃO — DESIGN TOKENS
   Editorial gastronômico · paleta oficial · Bebas Neue + Roboto
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');

:root {
  /* ——— Brand colors (oficial) ——— */
  --df-cream:        #FDFBEF;
  --df-cream-2:      #F4EFDD;   /* warm cream tone for layering */
  --df-yellow:       #FFC760;
  --df-yellow-deep:  #E8A93C;
  --df-red:          #FF0E22;
  --df-red-deep:     #D40A1B;
  --df-terra:        #A73C21;
  --df-brown:        #560A02;
  --df-brown-ink:    #2A0501;
  --df-black:        #000000;
  --df-line:         rgba(86, 10, 2, 0.14);
  --df-line-strong:  rgba(86, 10, 2, 0.32);

  /* ——— Typography ——— */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;

  /* ——— Density tokens (driven by Tweaks) ——— */
  --section-y:    140px;   /* default = airy */
  --container-x:  clamp(24px, 5vw, 80px);
  --stack-md:     32px;
  --stack-lg:     56px;

  /* ——— Radii — editorial is mostly sharp ——— */
  --r-sm: 2px;
  --r-md: 6px;
  --r-lg: 12px;

  /* ——— Shadows — used sparingly ——— */
  --shadow-card: 0 1px 0 rgba(86,10,2,0.06), 0 24px 48px -24px rgba(86,10,2,0.18);
  --shadow-pop:  0 28px 80px -32px rgba(86,10,2,0.45);
}

[data-density="compact"] {
  --section-y:    72px;
  --stack-md:     20px;
  --stack-lg:     36px;
}

/* ——— Reset ——— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: 100px; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--df-brown-ink);
  background: var(--df-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ——— Type scale ——— */
.df-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--df-terra);
}

.df-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.005em;
  color: var(--df-brown);
  margin: 0;
}

.df-display.is-mega   { font-size: clamp(72px, 13vw, 240px); }
.df-display.is-xxl    { font-size: clamp(56px, 9vw, 168px); }
.df-display.is-xl     { font-size: clamp(40px, 6vw, 112px); }
.df-display.is-lg     { font-size: clamp(32px, 4.4vw, 80px); }
.df-display.is-md     { font-size: clamp(24px, 3vw, 48px); }

.df-serif-feel { letter-spacing: -0.01em; }

.df-h-sans {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.df-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.5;
  color: var(--df-brown);
  max-width: 56ch;
}

.df-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--df-terra);
  line-height: 1.5;
}

.df-rule {
  height: 1px;
  background: var(--df-line);
  border: 0;
}

/* ——— Container ——— */
.df-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--container-x);
  padding-right: var(--container-x);
}

.df-container--wide {
  max-width: 1680px;
}

/* ——— Section ——— */
.df-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.df-section--tight {
  padding-top: calc(var(--section-y) * 0.5);
  padding-bottom: calc(var(--section-y) * 0.5);
}

/* ——— Buttons ——— */
.df-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.df-btn--primary {
  background: var(--df-red);
  color: var(--df-cream);
}
.df-btn--primary:hover {
  background: var(--df-brown);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(255,14,34,0.6);
}

.df-btn--ghost {
  background: transparent;
  color: var(--df-brown);
  border: 1.5px solid var(--df-brown);
}
.df-btn--ghost:hover {
  background: var(--df-brown);
  color: var(--df-cream);
}

.df-btn--light {
  background: var(--df-cream);
  color: var(--df-brown);
}
.df-btn--light:hover {
  background: var(--df-yellow);
}

.df-btn--link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-brown);
}
.df-btn--link:hover { color: var(--df-red); }

.df-btn .df-btn__arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.df-btn:hover .df-btn__arrow { transform: translateX(4px); }

/* ——— Editorial number markers ——— */
.df-numbermark {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--df-terra);
}

/* ——— Animated reveal ——— */
.df-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
}
.df-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ——— Form elements ——— */
.df-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.df-field label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--df-terra);
  font-weight: 500;
}
.df-field input,
.df-field select,
.df-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--df-line-strong);
  color: var(--df-brown-ink);
  width: 100%;
  outline: none;
  border-radius: 0;
  transition: border-color .2s;
}
.df-field input::placeholder,
.df-field textarea::placeholder {
  color: rgba(86,10,2,0.4);
}
.df-field input:focus,
.df-field select:focus,
.df-field textarea:focus {
  border-bottom-color: var(--df-red);
}

/* ——— Card base ——— */
.df-card {
  background: var(--df-cream);
  border: 1px solid var(--df-line);
  padding: 32px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.df-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--df-brown);
}

/* ——— Tag/chip ——— */
.df-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--df-line-strong);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--df-brown);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.df-chip:hover { border-color: var(--df-brown); }
.df-chip[aria-pressed="true"], .df-chip.is-active {
  background: var(--df-brown);
  color: var(--df-cream);
  border-color: var(--df-brown);
}

/* ——— Marquee ——— */
.df-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.df-marquee__track {
  display: flex;
  gap: 64px;
  width: max-content;
  animation: df-marquee 40s linear infinite;
}
@keyframes df-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ——— Utility ——— */
.df-flex { display: flex; }
.df-grid { display: grid; }
.df-align-center { align-items: center; }
.df-justify-between { justify-content: space-between; }
.df-gap-md { gap: 16px; }
.df-gap-lg { gap: 32px; }
.df-text-center { text-align: center; }
.df-color-red { color: var(--df-red); }
.df-color-terra { color: var(--df-terra); }
.df-color-cream { color: var(--df-cream); }
.df-bg-brown { background: var(--df-brown); color: var(--df-cream); }
.df-bg-cream2 { background: var(--df-cream-2); }
.df-bg-red { background: var(--df-red); color: var(--df-cream); }