/* ==========================================================================
   MONTE CHIARO — Design Tokens

   A paleta foi derivada do logotipo (vetor CorelDRAW), das peças gráficas do
   cliente e da dominante cromática das ~110 fotos do acervo. Não existe manual
   de marca: cada cor aqui tem lastro em algo real da vinícola.

   Nunca use valor cru nos componentes — sempre estas variáveis.
   ========================================================================== */

:root {

  /* ---- Cor -----------------------------------------------------------

     A paleta é clara: papel, off-white e o marrom da marca. O dourado do
     logotipo (#c89b4a) fica reservado a filetes, marcas e superfícies —
     sobre papel ele rende 2,4:1, então NUNCA em texto. Para texto com
     temperatura de ouro existe o --mc-gold-ink, que rende 5,2:1.

     Cada valor abaixo foi conferido contra o papel base:
       marrom       13,4:1   ·  marrom-2      8,5:1
       carvalho      6,7:1   ·  marrom-suave  6,1:1
       gold-ink      5,9:1   ·  bordô         9,5:1
     -------------------------------------------------------------------- */

  --mc-paper:      #faf8f4;  /* off-white quente — fundo base do site */
  --mc-paper-2:    #f2ede4;  /* creme do logotipo — faixas alternadas */
  --mc-paper-3:    #e7dfd2;  /* bordas cheias, hover de superfície */
  --mc-white:      #ffffff;  /* cards elevados sobre o papel */

  --mc-brown:      #33291f;  /* marrom da marca — títulos e texto forte */
  --mc-brown-2:    #574636;  /* marrom médio — texto corrido */
  --mc-oak:        #6c543c;  /* madeira de barrica */
  --mc-brown-4:    #6f5b45;  /* marrom suave — texto secundário */

  --mc-gold:       #c89b4a;  /* dourado do logotipo — só superfície e filete */
  --mc-gold-ink:   #7d5a1e;  /* dourado legível — chapéus e links */
  --mc-gold-hi:    #9a6f22;  /* hover do dourado legível */
  --mc-gold-dim:   rgba(200, 155, 74, 0.42);
  --mc-gold-luz:   #dcb86b;  /* dourado clareado — chapéus SOBRE foto */

  --mc-wine:       #7a2323;  /* bordô — selos e destaques raros */
  --mc-olive:      #52543f;  /* araucária */

  /* Só para texto POR CIMA de foto, onde o fundo é a imagem e não o papel. */
  --mc-cream:      #f6f2ea;
  --mc-cream-dim:  rgba(246, 242, 234, 0.80);
  --mc-scrim:      rgba(26, 20, 15, 0.58);
  --mc-scrim-forte: rgba(26, 20, 15, 0.62);

  --mc-border:      rgba(51, 41, 31, 0.16);
  --mc-border-soft: rgba(51, 41, 31, 0.09);

  /* Papéis semânticos — use ESTES nos componentes, não os valores acima. */
  --mc-bg:            var(--mc-paper);
  --mc-surface:       var(--mc-paper-2);
  --mc-surface-2:     var(--mc-white);
  --mc-text:          var(--mc-brown-2);
  --mc-text-strong:   var(--mc-brown);
  --mc-text-muted:    var(--mc-brown-4);
  --mc-text-heading:  var(--mc-brown);
  --mc-text-accent:   var(--mc-gold-ink);
  --mc-text-inverse:  var(--mc-paper);

  /* ---- Tipografia --------------------------------------------------- */

  /* Cinzel é a letra do próprio logotipo: capitular romana, alto contraste.
     Jost é a geométrica contemporânea — a copy do cliente fala em "conectar
     o passado à contemporaneidade", e a dupla encena exatamente isso. */
  --mc-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --mc-font-body:    "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --fs-display: clamp(2.25rem, 1rem + 5.2vw, 5.5rem);
  --fs-h1:      clamp(2.125rem, 1.35rem + 3.5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.6vw, 3.125rem);
  --fs-h3:      clamp(1.375rem, 1.1rem + 1.3vw, 2rem);
  --fs-h4:      clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-numeral: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);

  --lh-display: 1.02;
  --lh-heading: 1.14;
  --lh-body:    1.72;
  --lh-tight:   1.3;

  --ls-display: -0.005em;
  --ls-heading: 0.01em;
  --ls-eyebrow: 0.28em;
  --ls-caps:    0.16em;
  --ls-body:    0.005em;

  /* ---- Espaçamento e layout ----------------------------------------- */

  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  --section-y:       clamp(4.5rem, 9vw, 8.5rem);
  --section-y-dense: clamp(3rem, 5.5vw, 5rem);
  --gutter:          clamp(1.25rem, 4vw, 3rem);

  --container:       1280px;
  --container-wide:  1560px;
  --container-prose: 720px;

  --header-h:        108px;
  --header-h-scroll: 82px;

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-pill: 999px;

  /* ---- Movimento ----------------------------------------------------- */

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-sun:   cubic-bezier(0.65, 0, 0.15, 1); /* momento-assinatura: o sol nascendo */

  --dur-fast:  240ms;
  --dur-base:  400ms;
  --dur-slow:  900ms;
  --dur-sun:   1600ms;

  /* ---- Textura e profundidade ----------------------------------------- */

  /* Grão fino sobre a página inteira — tira o "chapado" do fundo e aproxima
     da sensação de papel impresso. */
  --mc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --shadow-card:  0 18px 44px -26px rgba(51, 41, 31, 0.30);
  --shadow-lift:  0 32px 70px -32px rgba(51, 41, 31, 0.36);

  --z-header: 900;
  --z-menu:   950;
  --z-modal:  1100;
  --z-lightbox: 1200;  /* acima do modal de aviso, abaixo da folha da transição */
}

/* ==========================================================================
   Classes utilitárias de tipografia
   ========================================================================== */

.display,
.h1, .h2, .h3, .h4 {
  font-family: var(--mc-font-display);
  font-weight: 500;
  color: var(--mc-text-heading);
  text-wrap: balance;
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 400;
}

.h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-tight);   letter-spacing: var(--ls-heading); }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* Chapéu: a linha curta e espaçada acima dos títulos. */
.eyebrow {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mc-text-accent);
  margin: 0 0 var(--sp-md);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--mc-text-muted);
}

.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

.caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.c-gold  { color: var(--mc-text-accent); }
.c-cream { color: var(--mc-cream); }
.c-muted { color: var(--mc-text-muted); }