/* ============================================================
   TOMÉ — Concretos e Pré-Moldados
   Design Tokens
   Paleta extraída da marca: verde folha + cinza concreto
   ============================================================ */

:root {
  /* ---------- Brand greens ---------- */
  --green-50:  #F2F8EC;
  --green-100: #E6F1DA;
  --green-200: #CDE6B7;
  --green-300: #A8D585;
  --green-400: #88C75E;
  --green-500: #6CB63F;   /* Verde Tomé — primário */
  --green-600: #57A338;   /* hover / pressionado */
  --green-700: #2F9E46;   /* Verde folha (gradiente) */
  --green-800: #267C39;
  --green-900: #1C5B2B;

  /* ---------- Concrete / neutrals (warm) ---------- */
  --paper:     #F7F6F1;   /* fundo claro principal */
  --paper-2:   #EFEDE5;   /* fundo alternado / cards */
  --paper-3:   #E4E1D6;   /* bordas suaves de concreto */
  --concrete:  #6C6C6C;   /* Cinza concreto — marca */
  --concrete-light: #9A9893;
  --ink-900:   #23231F;   /* texto principal (quase preto quente) */
  --ink-700:   #3C3B36;
  --ink-500:   #5B5A53;
  --ink-300:   #8B897F;
  --white:     #FFFFFF;

  /* ---------- Dark section (concreto escuro) ---------- */
  --night-900: #1B1D19;
  --night-800: #23261F;
  --night-700: #2E322A;

  /* ---------- Semantic ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--paper-2);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --primary:      var(--green-500);
  --primary-deep: var(--green-700);
  --line:         color-mix(in oklch, var(--concrete) 22%, transparent);

  /* ---------- Typography ---------- */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* responsive type scale */
  --fs-700: clamp(2.6rem, 1.4rem + 5.4vw, 6rem);    /* hero display */
  --fs-600: clamp(2rem, 1.2rem + 3.4vw, 3.9rem);    /* section title */
  --fs-500: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);  /* subtitle */
  --fs-400: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);/* lead */
  --fs-300: 1.0625rem;  /* body */
  --fs-200: 0.9375rem;  /* small */
  --fs-100: 0.78rem;    /* caption / overline */

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;

  --tracking-wide: 0.18em;   /* overlines (igual tagline da logo) */
  --tracking-mid: 0.04em;

  /* ---------- Spacing ---------- */
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;
  --space-8: 10rem;
  --section-pad: clamp(4.5rem, 3rem + 7vw, 10rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --maxw: 1320px;
  --maxw-narrow: 880px;

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(35,35,31,.05), 0 2px 8px rgba(35,35,31,.05);
  --shadow-md: 0 4px 14px rgba(35,35,31,.07), 0 14px 40px rgba(35,35,31,.08);
  --shadow-lg: 0 10px 30px rgba(35,35,31,.10), 0 30px 70px rgba(35,35,31,.12);
  --shadow-green: 0 10px 30px color-mix(in oklch, var(--green-700) 28%, transparent);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --dur: .5s;
}