:root {
  /* Cor da marca */
  --green-700: #43654F;   /* pressionado / ícone escuro */
  --green-600: #51795F;   /* cor oficial da marca */
  --green-500: #5E8B6D;   /* hover */
  --mint-accent: #9DC2AC; /* acento sobre fundo escuro */

  /* Cor de texto */
  --ink-90: rgba(0, 0, 0, 0.90);  /* títulos */
  --ink-85: rgba(0, 0, 0, 0.85);  /* links da navbar */
  --ink-80: rgba(0, 0, 0, 0.80);  /* texto corrido */
  --ink-75: rgba(0, 0, 0, 0.75);  /* ícones */
  --ink-70: rgba(0, 0, 0, 0.70);  /* notas e legendas */

  --white:    #FFFFFF;
  --white-95: rgba(255, 255, 255, 0.95); /* texto do botão primário */

  /* Texto sobre o card escuro da Seção 10 */
  --on-ink-90:     rgba(255, 255, 255, 0.94);
  --on-ink-80:     rgba(255, 255, 255, 0.78);
  --on-ink-border: rgba(255, 255, 255, 0.14);

  /* Superfícies */
  --card-bg:       rgba(255, 255, 255, 0.82);
  --card-border:   rgba(28, 38, 32, 0.08);
  --hairline:      rgba(28, 38, 32, 0.10); /* filete divisor */
  --hairline-soft: rgba(28, 38, 32, 0.06);

  /* Vidro (navbar, botões, card do hero) */
  --glass-bg:       rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.68);
  --glass-border:   rgba(255, 255, 255, 0.60);
  --glass-blur:     blur(20px) saturate(140%);
  --glass-shadow:   0 8px 32px rgba(60, 45, 35, 0.08);

  /* Fallback para navegadores sem backdrop-filter */
  --glass-bg-solid:       rgba(255, 255, 255, 0.92);
  --glass-bg-solid-hover: rgba(255, 255, 255, 0.97);

  /* Círculo branco que expande nos botões com ícone */
  --btn-fill-bg: rgba(255, 255, 255, 0.92);

  /* Fundo da página */
  --bg-cream: #FDF9F5;
  --bg-ink:   #1C2620;   /* só o card em destaque da Seção 10 */

  --glow-a: radial-gradient(38% 30% at 8% 12%, rgba(81, 121, 95, 0.10) 0%, transparent 70%);
  --glow-b: radial-gradient(32% 28% at 92% 34%, rgba(81, 121, 95, 0.08) 0%, transparent 72%);
  --glow-c: radial-gradient(46% 34% at 50% 96%, rgba(81, 121, 95, 0.07) 0%, transparent 74%);

  /* Grão sutil por cima do creme */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Espaço e ritmo */
  --gutter: 16px;              
  --section-y:    66px;   /* respiro vertical padrão (celular) */
  --section-y-lg: 84px;   /* seções com mais respiro (celular) */

  /* Raio */
  --radius-pill: 999px;

  /* Movimento */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* entradas */
  --ease-smooth:   cubic-bezier(0.22, 1, 0.36, 1); /* hover e acordeões */
  --dur-fast: 240ms;
  --dur-base: 900ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-y:    80px;
    --section-y-lg: 100px;
  }
}

@media (min-width: 1024px) {
  :root { --gutter: 80px; }
}