/* Tokens de design da ECOAR.
 *
 * Este e o UNICO arquivo onde cor e medida crua podem aparecer. O resto do CSS
 * consome var(). tests/test_css.php cobra isso para cor.
 */

:root {
  /* ---------------------------------------------------------------- cores
   * Do kit global do Elementor do ecoar.co (post-6.css, lido em 25/09/2026):
   *   primary #F5F0E4 (creme) · secondary #003B2A (verde) · text #C1A165
   *   (dourado) · accent #A0B899 (salvia). Fundo do header: #F9F5EE.
   * Contraste medido pela formula WCAG, nao estimado.
   */
  --c-green:      #003b2a;  /* verde da marca                          */
  --c-green-deep: #002a1e;  /* rodape e hover de botao                 */
  --c-cream:      #f5f0e4;  /* fundo principal                         */
  --c-paper:      #fbf8f2;  /* fundo alternado, um tom acima do creme  */
  --c-header:     #f9f5ee;
  --c-gold:       #c1a165;  /* dourado da marca: 5.16:1 sobre o verde  */
  /* ⛔ O dourado da marca da 2.16:1 sobre o creme e reprova como texto.
   * Este e o mesmo matiz escurecido ate 5.21:1 no creme e 5.59:1 no papel.
   * Divergencia consciente, mesmo criterio usado no ECOAR Care. */
  --c-gold-deep:  #7a6030;
  --c-white:      #ffffff;

  /* Papeis semanticos. O CSS usa ESTES; a dobra verde (.section--green)
   * redefine os papeis e todo componente acompanha sozinho. */
  --c-bg:          var(--c-cream);
  --c-ink:         var(--c-green);    /* 11.13:1 no creme                 */
  --c-ink-muted:   #4a5e54;           /*  6.11:1 no creme, SOLIDO         */
  --c-accent:      var(--c-gold-deep);
  --c-rule:        rgba(0, 59, 42, 0.14);
  --c-card:        var(--c-white);
  --c-btn-bg:      var(--c-green);
  --c-btn-ink:     var(--c-cream);    /* 11.13:1                          */
  --c-btn-hover:   var(--c-green-deep);
  --c-focus:       #b0772a;

  /* ----------------------------------------------------------- espacamento
   * Escala unica, base 4px. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 10rem;

  /* Ritmo vertical entre dobras: uma curva so, fluida, sem media query. */
  --section-y: clamp(var(--space-8), 9vw, var(--space-10));  /* 64 -> 128 */

  /* ----------------------------------------------------------- tipografia
   * Cormorant nos titulos, Montserrat no corpo: as duas familias que o
   * ecoar.co carrega. ⚠️ O site antigo escrevia o CORPO em Cormorant de 12px,
   * que e ilegivel; aqui o corpo e Montserrat, o titulo continua Cormorant.
   * Cormorant tem olho pequeno: a escala de titulo e mais alta que o normal
   * para a mesma presenca na tela. */
  --font-display: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0:  clamp(0.97rem, 0.93rem + 0.20vw, 1.06rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.36rem + 0.70vw, 1.95rem);
  --step-3:  clamp(1.90rem, 1.66rem + 1.20vw, 2.70rem);
  --step-4:  clamp(2.30rem, 1.95rem + 1.75vw, 3.50rem);
  --step-5:  clamp(2.70rem, 2.10rem + 3.00vw, 4.75rem);

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.75;

  --tracking-label: 0.2em;   /* rotulo em caixa alta */
  --tracking-brand: 0.06em;  /* nome de marca: "ECOAR CARE" do original */

  /* ---------------------------------------------------------------- forma
   * Canto quase reto: o luxo do original e de linha fina, nao de pilula. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  --measure: 62ch;
  --page-max: 1240px;
  --gutter: clamp(var(--space-5), 5vw, var(--space-7));

  /* Altura do header grudento. O scroll-padding das ancoras usa o MESMO
   * numero: se andarem separados, o titulo da secao para atras do header. */
  --header-pad-y:  var(--space-4);
  --header-logo-h: clamp(40px, 4.2vw, 48px);
  --header-h: calc(var(--header-logo-h) + (var(--header-pad-y) * 2) + 1px);

  --shadow-card: 0 1px 2px rgba(0, 42, 30, 0.05), 0 12px 32px rgba(0, 42, 30, 0.07);
  --shadow-lift: 0 2px 4px rgba(0, 42, 30, 0.06), 0 20px 48px rgba(0, 42, 30, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}