/* ============================================================
   Samuel Vigiano · tokens + reset + tipografia base (Bloco 1)
   Fonte da verdade: 05_Site/docs/DESIGN-TOKENS.md
   Paleta: 7 tokens declarados (Paleta - Samuel Vigiano.pdf).
   ============================================================ */

/* ---------- Tipografia self-hosted ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/CormorantGaramond-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Manrope-Bold.woff2") format("woff2");
}

/* ---------- Tokens declarados (Paleta - Samuel Vigiano.pdf) ---------- */
:root {
  --color-verde:             #163B35; /* Verde Viggno · Primária */
  --color-verde-agua:        #4AA294; /* Acento cromático */
  --color-dourado:           #C09A5C; /* Dourado Viggno · Acento */
  --color-dourado-champagne: #E9BD75; /* Hover/glow do dourado */
  --color-preto:             #181818; /* Neutro escuro */
  --color-grafite:           #2A2A2A; /* Suporte · ink primária */
  --color-creme:             #F5F3EF; /* Creme Pristino · Fundo */

  /* Semânticos */
  --bg:            var(--color-creme);
  --bg-section:    #EFEBE3;             /* variação sutil do creme (derivada) */
  --bg-dark:       var(--color-verde);  /* hero/footer/CTA sobre verde */
  --ink:           var(--color-grafite);
  --ink-strong:    var(--color-preto);
  --ink-muted:     #6E6E6E;             /* derivado do grafite para meta/legenda */
  --ink-on-dark:   var(--color-creme);
  --brand:         var(--color-verde);
  --accent:        var(--color-dourado);
  --accent-hover:  var(--color-dourado-champagne);
  --accent-cool:   var(--color-verde-agua);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "Manrope", "Inter", system-ui, sans-serif;

  /* Métricas */
  --gutter: clamp(20px, 5vw, 48px);
  --measure-body: 62ch;
  --measure-lead: 48ch;
  --stack-xs: 8px;
  --stack-s: 16px;
  --stack-m: 32px;
  --stack-l: 64px;
  --stack-xl: 96px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-hair: 1px solid rgba(22, 59, 53, 0.14);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- Reset moderno enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Tipografia base ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; font-weight: 700; }
h2 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.1; }
h3 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; }
p  { margin: 0; max-width: var(--measure-body); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
}
.lead {
  max-width: var(--measure-lead);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
}

/* ---------- Layout utilitário ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(48px, 8vw, 96px); }
.section-dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--accent); }
.section-dark .eyebrow { color: var(--accent-hover); }
.section-alt { background: var(--bg-section); }

/* ---------- Foco/acessibilidade ---------- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--accent); color: var(--color-verde); }

/* ---------- Placeholder do Bloco 1 (removido no Bloco 2) ---------- */
.gate-placeholder {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  text-align: center;
}
.gate-placeholder .container { max-width: 640px; }
.gate-placeholder .logo-wrap { margin-bottom: var(--stack-l); }
.gate-placeholder .logo-wrap img { height: 44px; width: auto; margin-inline: auto; }
.gate-placeholder .kicker { color: var(--accent); margin-bottom: var(--stack-s); }
.gate-placeholder .status {
  margin-top: var(--stack-m);
  padding: var(--stack-s);
  border: var(--border-hair);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--ink-muted);
}
.gate-placeholder .status code {
  color: var(--brand);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}