/* =========================================================================
   Kawamac — Design Tokens
   Paleta preservada da marca (verde Kawamac) + conceito "industrial moderno".
   Camadas: primitivos (--c-*) -> semânticos (--color-*).
   Mesmos NOMES de variáveis do design system base (base/components/proposta.css).
   ========================================================================= */

:root {
  /* ---- Primitivos de cor (marca Kawamac) ---- */
  --c-bg:          #FBFCFB;
  --c-ink:         #1C2620;   /* verde-grafite p/ texto */
  --c-ink-soft:    #45514A;
  --c-petrol:      #2E7D46;   /* VERDE Kawamac (primária) */
  --c-petrol-700:  #256A3A;
  --c-petrol-600:  #38924F;
  --c-petrol-hover:#215F35;
  --c-pastel-1:    #BFE2C8;
  --c-pastel-2:    #D6EEDC;
  --c-pastel-3:    #E8F6EC;
  --c-gold-1:      #E7952A;   /* âmbar industrial (secundária / CTA) */
  --c-gold-2:      #F7A83B;
  --c-gold-3:      #FFC266;
  --c-gray-1:      #F1F3F1;
  --c-gray-2:      #9AA39D;
  --c-white:       #FFFFFF;

  /* mistura para fundos sutis */
  --c-mist:        #F3F8F4;   /* verde quase imperceptível */
  --c-sand:        #FBF5EC;   /* âmbar lavado, quente */

  /* ---- Semânticos ---- */
  --color-surface:      var(--c-bg);
  --color-surface-alt:  var(--c-mist);
  --color-surface-warm: var(--c-sand);
  --color-card:         var(--c-white);
  --color-text:         var(--c-ink);
  --color-text-soft:    var(--c-ink-soft);
  --color-muted:        var(--c-gray-2);
  --color-accent:       var(--c-petrol);
  --color-accent-hover: var(--c-petrol-hover);
  --color-on-accent:    var(--c-white);
  --color-gold:         var(--c-gold-1);
  --color-divider:      #E4EBE6;
  --color-whatsapp:     #25D366;
  --color-whatsapp-700: #1da851;

  /* gradiente escuro (hero / footer) — verde profundo */
  --grad-night: radial-gradient(120% 140% at 80% -10%, #124a2b 0%, #0d3b23 45%, #08281a 100%);
  --grad-dawn:  linear-gradient(180deg, #FBF5EC 0%, #FBFCFB 100%);

  /* ---- Tipografia ---- */
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Montserrat", system-ui, sans-serif;

  /* escala fluida (~major third) */
  --fs-200: clamp(.78rem, .76rem + .1vw, .82rem);
  --fs-300: clamp(.875rem, .85rem + .12vw, .94rem);
  --fs-400: clamp(1rem, .97rem + .18vw, 1.06rem);
  --fs-500: clamp(1.18rem, 1.08rem + .45vw, 1.42rem);
  --fs-600: clamp(1.5rem, 1.3rem + .9vw, 2.05rem);
  --fs-700: clamp(1.95rem, 1.55rem + 1.8vw, 2.95rem);
  --fs-800: clamp(2.4rem, 1.8rem + 3vw, 4rem);
  --fs-hand: clamp(1.15rem, 1rem + .6vw, 1.5rem);

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  --tracking-wide: .14em;

  /* ---- Espaçamento (escala 4px) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Raios ---- */
  --radius-pill: 100px;
  --radius-card: 18px;
  --radius-sm:   12px;
  --radius-xl:   28px;

  /* ---- Sombras suaves (tom verde) ---- */
  --shadow-xs: 0 1px 3px rgba(13, 59, 35, .06);
  --shadow-sm: 0 4px 16px rgba(13, 59, 35, .08);
  --shadow-md: 0 14px 40px rgba(13, 59, 35, .11);
  --shadow-lg: 0 30px 70px rgba(13, 59, 35, .17);
  --shadow-gold: 0 10px 30px rgba(231, 149, 42, .28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .5s;
  --dur-fast: .25s;

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 76px;
}