/* =============================================================
   Green Place — Design Tokens · "Esmeralda ao Entardecer"
   Tradução fiel de dados/fase-2-design-system/tokens.md
   Camada 1: PRIMITIVOS (--c-*)  ·  Camada 2: SEMÂNTICOS (por face)
   Face clara = default (:root) · Face escura = [data-face="escura"], .face-escura
   ============================================================= */

:root {
  /* ---- 1 · PRIMITIVOS (pigmentos brutos — nunca usar direto na UI) ---- */
  --c-marfim:            #F7F3EA;
  --c-branco:            #FFFFFF;
  --c-esmeralda-tinta:   #14261E;
  --c-sabia:             #5D6B60;
  --c-esmeralda-noite:   #06231B;
  --c-esmeralda-salao:   #0B3327;
  --c-sabia-luar:        #9DB0A4;
  --c-verde-marca:       #0B4D3A;
  --c-verde-marca-alt:   #0F6B4E;
  --c-ouro:              #C6A15B;
  --c-ouro-claro:        #D2B26A;
  --c-cta-escuro:        #0B2E22;
  --c-whatsapp:          #25D366;
  --c-sucesso:           #2E7D5B;
  --c-sucesso-claro:     #3E9E75;
  --c-erro:              #B23A2E;
  --c-erro-claro:        #E08A7F;

  /* ---- 2 · SEMÂNTICOS — face CLARA (marfim / dia) ---- */
  --fundo:            var(--c-marfim);
  --superficie:       var(--c-branco);
  --superficie-2:     var(--c-marfim);   /* = fundo: elevação vem de sombra/hairline */
  --texto:            var(--c-esmeralda-tinta);
  --texto-suave:      var(--c-sabia);
  --borda:            rgba(20, 38, 30, .12);
  --borda-forte:      rgba(93, 107, 96, .28);
  --marca:            var(--c-verde-marca);
  --marca-alt:        var(--c-verde-marca-alt);
  --ouro:             var(--c-ouro);
  --ouro-claro:       var(--c-ouro-claro);
  --ouro-fio:         rgba(198, 161, 91, .55);
  --marca-veu:        rgba(11, 77, 58, .06);
  --cta:              var(--c-verde-marca);
  --cta-texto:        var(--c-marfim);
  --cta-assinatura:   var(--c-ouro);
  --cta-assin-texto:  var(--c-cta-escuro);
  --whatsapp:         var(--c-whatsapp);
  --sucesso:          var(--c-sucesso);
  --erro:             var(--c-erro);
  --erro-halo:        rgba(178, 58, 46, .18);
  --foco:             var(--c-verde-marca-alt);
  --foco-halo:        rgba(15, 107, 78, .45);

  /* texto claro fixo (sobre foto/scrim, independente de face) */
  --texto-sobre-foto: var(--c-marfim);
  --texto-sobre-foto-suave: var(--c-sabia-luar);

  /* overlays / scrims */
  --scrim-hero:    linear-gradient(to top, var(--c-esmeralda-noite) 0%, rgba(6,35,27,.60) 45%, rgba(6,35,27,.12) 100%);
  --scrim-lateral: linear-gradient(90deg, rgba(6,35,27,.86) 0%, rgba(6,35,27,.52) 38%, rgba(6,35,27,.18) 66%, rgba(6,35,27,0) 100%);
  --scrim-centro:  linear-gradient(rgba(6,35,27,.58), rgba(6,35,27,.80));
  --scrim-card:    rgba(20, 38, 30, .40);
  --scrim-lightbox: rgba(6, 35, 27, .93);
  --text-shadow-foto: 0 1px 14px rgba(6,35,27,.45);

  /* header (vidro fosco) */
  --header-fundo: rgba(247, 243, 234, .82);
  --header-rim:   inset 0 1px 0 rgba(255, 255, 255, .55);
  --header-texto: var(--c-esmeralda-tinta);   /* quando sólido */

  /* ---- Tipografia ---- */
  --font-display: "EB Garamond", "Alegreya", Georgia, "Times New Roman", serif;
  --font-texto:   "Figtree", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display-hero: clamp(2.75rem, 6vw + 1rem, 5.5rem);
  --fs-h1:           clamp(2.25rem, 4vw + .5rem, 3.5rem);
  --fs-h2:           clamp(1.75rem, 2.5vw + .5rem, 2.5rem);
  --fs-h3:           clamp(1.375rem, 1.5vw + .5rem, 1.75rem);
  --fs-h4:           1.125rem;
  --fs-corpo:        1rem;
  --fs-corpo-grande: clamp(1.125rem, .5vw + 1rem, 1.375rem);
  --fs-corpo-peq:    .875rem;
  --fs-eyebrow:      .75rem;
  --fs-botao:        .9375rem;
  --fs-legenda:      .8125rem;
  --fs-dado-heroi:   clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-chip:         .875rem;

  --lh-tight: 1.02;
  --lh-title: 1.12;
  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.2;
  --lh-corpo: 1.6;
  --ls-eyebrow: .14em;
  --ls-title: -.01em;

  /* ---- Espaçamento (4/8) ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---- Raio ---- */
  --radius-none:     0;
  --radius-sutil:    4px;
  --radius-medio:    8px;
  --radius-grande:   16px;
  --radius-pill:     999px;
  --radius-circular: 50%;

  /* ---- Sombra / elevação ---- */
  --shadow-0:   none;
  --shadow-1:   0 1px 2px rgba(20,38,30,.06), 0 1px 3px rgba(20,38,30,.05);
  --shadow-2:   0 4px 12px rgba(20,38,30,.08), 0 2px 4px rgba(20,38,30,.05);
  --shadow-3:   0 12px 32px rgba(20,38,30,.12), 0 4px 8px rgba(20,38,30,.06);
  --shadow-cta: 0 6px 18px rgba(11,77,58,.28);
  --shadow-cta-hover: 0 10px 26px rgba(11,77,58,.34);
  --shadow-ouro:0 6px 20px rgba(198,161,91,.32);
  --shadow-ouro-hover: 0 10px 24px -6px rgba(198,161,91,.45), inset 0 1px 0 rgba(255,255,255,.18);
  --glow-ouro:  0 0 24px rgba(210,178,106,.35);
  /* WhatsApp como affordance on-palette (verde da marca só no glifo) */
  --wa-superficie: var(--c-esmeralda-salao);
  --wa-glifo:      var(--c-whatsapp);
  --glow-escuro-1: 0 0 0 1px var(--borda);            /* anel = hairline da face */
  --glow-escuro-2: 0 8px 40px rgba(0,0,0,.45);

  /* ---- Motion ---- */
  --dur-instant: 90ms;
  --dur-rapido:  160ms;
  --dur-medio:   260ms;
  --dur-lento:   420ms;
  --dur-cinema:  700ms;
  --dur-kenburns:12000ms;
  --ease-padrao: cubic-bezier(.4, 0, .2, 1);
  --ease-saida:  cubic-bezier(.16, 1, .3, 1);
  --ease-entrada:cubic-bezier(.5, 0, .75, 0);
  --ease-suave:  cubic-bezier(.65, 0, .35, 1);
  --ease-linear: linear;

  /* ---- Containers / breakpoints (ref) ---- */
  --container-max: 1280px;
  --container-editorial: 768px;
  --container-form: 560px;
  --bleed: 100vw;

  /* ---- z-index (escala semântica — nunca valores mágicos) ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ---- Calendário / wizard ---- */
  --cal-cel: 42px;
  --cal-sel-bg: var(--c-ouro);
  --cal-sel-texto: var(--c-cta-escuro);
  --cal-hoje-anel: var(--c-verde-marca-alt);
}

/* =============================================================
   Face ESCURA (esmeralda / noite) — heros full-bleed, salão à noite
   Dois seletores equivalentes: [data-face="escura"] e .face-escura
   ============================================================= */
[data-face="escura"], .face-escura {
  --fundo:        var(--c-esmeralda-noite);
  --superficie:   var(--c-esmeralda-salao);
  --superficie-2: var(--c-verde-marca);
  --texto:        var(--c-marfim);
  --texto-suave:  var(--c-sabia-luar);
  --borda:        rgba(247, 243, 234, .14);
  --borda-forte:  rgba(247, 243, 234, .30);
  --marca:        var(--c-verde-marca-alt);
  --marca-alt:    var(--c-ouro-claro);
  --ouro:         var(--c-ouro-claro);
  --marca-veu:    rgba(247, 243, 234, .08);
  --cta-assinatura: var(--c-ouro-claro);
  --sucesso:      var(--c-sucesso-claro);
  --erro:         var(--c-erro-claro);
  --erro-halo:    rgba(224, 138, 127, .28);
  --foco:         var(--c-ouro-claro);
  --foco-halo:    rgba(210, 178, 106, .55);
  --header-fundo: rgba(6, 35, 27, .74);
  --header-texto: var(--c-marfim);
}