/* ============================================================
   Gramado Parks · Design Tokens (ds-gparks)
   Extraído da marca Gramado Parks (logo verde + braço de hotelaria · 2026-05-21).
   Identidade do GRUPO: verde-floresta (assinatura) + dourado/bronze (acento premium).
   Tipografia: Montserrat (display) + Raleway (corpo).
   ============================================================ */

/* -------- Fontes (Google Fonts · OFL · embutidas) -------- */
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url("../fonts/Montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url("../fonts/Montserrat-700.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:800;font-display:swap;src:url("../fonts/Montserrat-800.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-weight:300;font-display:swap;src:url("../fonts/Raleway-300.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-weight:400;font-display:swap;src:url("../fonts/Raleway-400.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-weight:500;font-display:swap;src:url("../fonts/Raleway-500.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-weight:600;font-display:swap;src:url("../fonts/Raleway-600.woff2") format("woff2")}

:root{
  /* ============ PALETA ============ */
  --gp-green:   #244A31;  /* verde-floresta · cor-marca (assinatura do grupo, do logo) */
  --gp-green-2: #356B45;  /* verde claro · gradientes / hover */
  --gp-deep:    #15301F;  /* verde-quase-preto · faixas escuras / rodapé */
  --gp-gold-l:  #C9A86A;  /* dourado claro · acento sobre verde escuro */
  --gp-goldhex: #B6965E;  /* dourado/bronze oficial (extraído · botão do site deles) */
  --gp-ink:     #1B2E20;  /* títulos / texto forte (verde-tinta) */
  --gp-body:    #3C4A40;  /* corpo (verde-grafite · 8.7 AA sobre branco) */
  --gp-bg:      #FFFFFF;
  --gp-soft:    #F4F1E8;  /* superfície clara · creme quente (casa com dourado) */
  --gp-line:    #E2DDCF;  /* bordas (creme) */
  --gp-mute:    #6B726A;  /* texto secundário (verde-grafite claro) */

  /* ---- ALIASES p/ o site.css compartilhado (mesmos nomes do template) ----
     Acento (--gp-gold) = VERDE sobre claro (WCAG-safe, on-brand); em faixas
     escuras vira DOURADO (premium sobre verde) · ver tema abaixo. */
  --gp-gold:  var(--gp-green);   /* "acento" = verde sobre claro */
  --gp-brown: var(--gp-green);   /* superfície escura secundária = verde */
  --gp-dark:  var(--gp-deep);    /* faixas escuras = verde profundo */
  --gp-azul:  var(--gp-green);   /* link / acento alternativo */
  --gp-navy:  var(--gp-green);   /* btn/pin/dock/chat = verde */
  --gp-navy-2:var(--gp-green-2); /* gradiente/hover = verde claro */

  /* ============ PARES ACESSÍVEIS (WCAG · daltonismo) ============
     Verde-tinta e verde-marca passam sobre branco. Dourado é DECORATIVO
     (baixo contraste sobre branco) — nunca como texto sobre claro; só sobre
     verde escuro, ou como fio/preenchimento. Cor nunca é pista única. */
  --on-white-ink:   var(--gp-ink);    /* ~13 AA */
  --on-white-body:  var(--gp-body);   /* ~8.7 AA */
  --on-white-green: var(--gp-green);  /* ~8.2 AA · acento verde texto OK */
  --on-green-white: #FFFFFF;          /* branco sobre verde · AA */
  --on-green-gold:  var(--gp-gold-l); /* dourado claro sobre verde escuro · decorativo/grande */

  /* ============ TIPOGRAFIA ============ */
  --gp-font-display: "Montserrat", system-ui, Helvetica, Arial, sans-serif; /* títulos · 700/800 */
  --gp-font-body:    "Raleway", system-ui, Helvetica, Arial, sans-serif;     /* corpo / nav / botões */

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px;
  --text-4xl:50px; --text-5xl:64px;
  --lh-tight:1.08; --lh-snug:1.2; --lh-base:1.6; --lh-loose:1.7;
  --tracking-wide:0.04em; --tracking-wider:0.16em;

  /* ============ RAIOS (marca alegre/familiar · um pouco mais arredondada) ============ */
  --gp-radius-sm: 8px; --gp-radius: 6px; --gp-radius-pill: 999px;

  /* ============ SOMBRAS / ESPAÇO (tom verde) ============ */
  --gp-shadow-e1: 0 6px 18px rgba(21,48,31,0.10);
  --gp-shadow-e2: 0 16px 40px rgba(21,48,31,0.18);
  --gp-sp-1:4px;--gp-sp-2:8px;--gp-sp-3:12px;--gp-sp-4:16px;--gp-sp-5:24px;--gp-sp-6:32px;--gp-sp-8:48px;--gp-sp-10:64px;
  --gp-ease:cubic-bezier(.16,1,.3,1);
}

/* ============ TEMA · wrapper .v-gparks ============ */
.v-gparks{
  --brand-primary: var(--gp-green);
  --brand-accent: var(--gp-goldhex);
  --brand-bg: var(--gp-bg);
  --brand-text: var(--gp-body);
  background: var(--gp-bg);
  color: var(--gp-body);
  font-family: var(--gp-font-body);
  line-height: var(--lh-base);
}
/* Em faixas escuras (verde), o acento (--gp-gold) vira DOURADO automaticamente:
   reposiciona todos os var(--gp-gold) do site.css (eyebrow, fios, h4 do rodapé,
   prêmios) p/ dourado sobre verde · sem editar o template. */
.v-gparks .bg-brown,
.v-gparks .bg-dark,
.v-gparks .awards,
.v-gparks .foot,
.v-gparks .hero,
.v-gparks .uhero{ --gp-gold: var(--gp-gold-l); }

/* Classes utilitárias de tipografia (paridade com as outras ds-*) */
.v-gparks .t-eyebrow{font-family:var(--gp-font-body);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--gp-green)}
.v-gparks .t-h1{font-family:var(--gp-font-display);font-weight:800;font-size:clamp(34px,5vw,var(--text-4xl));line-height:var(--lh-tight);color:var(--gp-ink)}
.v-gparks .t-h2{font-family:var(--gp-font-display);font-weight:700;font-size:clamp(26px,3.4vw,var(--text-2xl));color:var(--gp-ink)}
.v-gparks .t-lead{font-family:var(--gp-font-body);font-size:var(--text-md);font-weight:400;color:var(--gp-mute);line-height:var(--lh-loose)}
.v-gparks .t-gold{color:var(--gp-goldhex)}