/**
 * Design tokens TREFEL — três camadas.
 *
 *   1. ESCALA DE MARCA  (--forest-*, --gold-*, --bone…)  valores brutos
 *   2. SEMÂNTICA        (--bg, --surface, --text, --accent…)  papéis
 *   3. ESCOPO           .section-invert / .on-light redefinem a camada 2
 *
 * Os componentes em main.css só consomem a camada 2. Por isso uma seção
 * invertida (fundo areia, texto escuro) re-tematiza cartões, tags, bordas e
 * botões sem uma única regra duplicada — basta trocar os papéis.
 *
 * PROCEDÊNCIA DAS CORES
 * Champagne Gold (#e3c99a) foi extraído por amostragem de pixel do arquivo
 * oficial (`LOGO - TREFEL - MOVEIS PLANEJADOS.pdf`) e é confiável.
 *
 * O fundo dos cartões de logo no mesmo PDF amostrou quase preto/dessaturado
 * (#1c1c16, R≈G>B — tecnicamente não lê como "verde"). Esse valor exato é
 * preservado em --forest-ink e usado apenas onde precisa combinar com o
 * próprio cartão do logo. A escala verde da interface (--forest-1000 a
 * --forest-600) permanece PROVISÓRIA até a TREFEL confirmar se o quase-preto
 * do PDF é intencional ou artefato — não inventar o valor definitivo.
 */

:root {
  /* ======================================================================
     1. ESCALA DE MARCA
     ====================================================================== */

  /* --- Verde Floresta (PROVISÓRIO — ver nota de procedência acima) --- */
  --forest-1000: #081814;  /* mais profundo: rodapé, overlays, lightbox */
  --forest-950:  #0b201b;  /* fundo base do site */
  --forest-900:  #0f2822;  /* fundo alternado de seção */
  --forest-800:  #163229;  /* superfície: cartões, campos de formulário */
  --forest-700:  #1f4437;  /* superfície elevada, hover */
  --forest-600:  #2d5040;  /* tom claro do verde, detalhes */
  --forest-ink:  #1c1c16;  /* extraído do PDF — usar junto ao logo */

  /* --- Champagne Gold (extraído do PDF) --- */
  --gold-600: #c9a56b;  /* sombra do dourado: bordas, filetes */
  --gold-500: #e3c99a;  /* oficial */
  --gold-300: #ead7b3;  /* tint claro derivado */

  /* --- Neutros --- */
  --bone:      #f7f5f0;
  --cream:     #f2ecdf;  /* texto sobre verde — levemente mais quente que bone */
  --mist:      #f1ece0;
  --ink:       #1c1f1b;
  --ink-soft:  #55584f;
  --ink-gold:  #241905;  /* texto sobre fundo areia */

  /* ======================================================================
     2. SEMÂNTICA — modo escuro (padrão do site)
     ====================================================================== */
  --bg:            var(--forest-950);
  --bg-alt:        var(--forest-900);
  --surface:       var(--forest-800);
  --surface-hover: var(--forest-700);

  --text:       var(--cream);
  --text-soft:  rgba(242, 236, 223, 0.72);
  /* 0.62 e não 0.52: sobre --surface (o verde um passo mais claro) o valor
     antigo caía para 4.31:1 e reprovava em AA. Corrigido no token para valer
     em toda superfície, não só onde o problema apareceu. */
  --text-muted: rgba(242, 236, 223, 0.62);

  --accent:      var(--gold-500);
  --accent-soft: var(--gold-600);
  --on-accent:   var(--ink-gold);   /* texto sobre o dourado */

  --border:        rgba(227, 201, 154, 0.16);
  --border-strong: rgba(227, 201, 154, 0.34);

  /* Erro de formulário — terracota clara, legível sobre o verde escuro. */
  --danger: #e2917d;

  --focus-ring: var(--gold-500);

  /* Overlay usado sobre fotografia para garantir contraste de texto */
  --scrim: linear-gradient(160deg, rgba(8, 24, 20, 0.86), rgba(8, 24, 20, 0.68));

  /* ======================================================================
     Tipografia
     Serifada para títulos grandes: ecoa a serifada usada no wordmark oficial
     da TREFEL (ver LOGO - TREFEL - MOVEIS PLANEJADOS.pdf) — não é um serif
     genérico "porque combina com premium", é o mesmo caráter já aprovado na
     marca. Outfit fica para rótulos/UI (precisão geométrica), Manrope para
     leitura longa (parágrafos, formulário).
     ====================================================================== */
  --font-serif:   'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.68;

  /* Títulos em display grande pedem tracking mais fechado que o corpo. */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.005em;
  --tracking-wide:    0.06em;
  --tracking-label:   0.16em;   /* rótulos/eyebrow em caixa alta */

  /* ======================================================================
     Espaçamento (escala base 4px)
     ====================================================================== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Ritmo vertical das seções — um só valor governa a página inteira. */
  --section-pad: var(--space-24);

  /* ======================================================================
     Forma
     Raio sutil (não zero, não arredondado-SaaS) para tirar a rigidez
     excessiva mantendo a precisão arquitetônica da marca.
     ====================================================================== */
  --radius:      3px;
  --radius-card: 6px;
  --radius-pill: 999px;

  /* --- Sombra (sutil, tingida na cor institucional, nunca preto puro) --- */
  --shadow-soft:  0 20px 48px -28px rgba(8, 24, 20, 0.6);
  --shadow-deep:  0 40px 90px -30px rgba(8, 24, 20, 0.75);

  /* --- Movimento --- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-standard: 500ms;

  /* --- Layout --- */
  --container-max:  1280px;
  --container-text: 46rem;   /* largura de leitura confortável */
  --container-pad:  clamp(1.25rem, 4vw, 3rem);
  --nav-height:     76px;
}

@media (min-width: 768px) {
  :root {
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;
  }
}

@media (max-width: 767px) {
  :root {
    --section-pad: var(--space-16);
  }
}

/* ==========================================================================
   3. ESCOPOS DE TEMA

   Redefinem apenas a camada semântica. Qualquer componente colocado dentro
   passa a ler os novos papéis automaticamente.
   ========================================================================== */

/* Seção invertida — fundo Champagne Gold, texto escuro.
   É a quebra de ritmo da página: usar no máximo uma ou duas vezes, sempre
   onde a mensagem precisa de peso (manifesto, oferta, CTA final). */
.section-invert {
  --bg:            var(--gold-500);
  --bg-alt:        var(--gold-300);
  --surface:       rgba(255, 255, 255, 0.34);
  --surface-hover: rgba(255, 255, 255, 0.52);

  --text:       var(--ink-gold);
  --text-soft:  rgba(36, 25, 5, 0.76);
  --text-muted: rgba(36, 25, 5, 0.56);

  --accent:      var(--forest-950);
  --accent-soft: var(--forest-700);
  --on-accent:   var(--gold-500);

  --border:        rgba(36, 25, 5, 0.18);
  --border-strong: rgba(36, 25, 5, 0.38);

  --danger: #8a3b2b;

  --focus-ring: var(--forest-950);
  --shadow-soft: 0 20px 48px -28px rgba(36, 25, 5, 0.45);
}

/* Seção clara — fundo bone. Usar em páginas de conteúdo denso
   (formulário de contato, políticas), onde leitura longa em escuro cansa. */
.section-light {
  --bg:            var(--bone);
  --bg-alt:        var(--mist);
  --surface:       #ffffff;
  --surface-hover: var(--mist);

  --text:       var(--ink);
  --text-soft:  var(--ink-soft);
  --text-muted: rgba(85, 88, 79, 0.7);

  --accent:      var(--forest-800);
  --accent-soft: var(--forest-600);
  --on-accent:   var(--bone);

  --border:        #e3dfd2;
  --border-strong: #cfc9b6;

  --danger: #8a3b2b;

  --focus-ring: var(--forest-600);
  --shadow-soft: 0 20px 48px -28px rgba(20, 40, 34, 0.35);
}