/* =============================================================
   DESIGN SYSTEM — Wolf Soluções Integradas
   Identidade oficial: grafite · ciano · amarelo
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── Paleta oficial da marca ── */
  --black:       #0b0d10;
  --ink:         #14171c;   /* fundo escuro principal */
  --graphite:    #1d2129;   /* cartões em fundo escuro */
  --steel:       #3a4149;   /* grafite do logo */
  --gray:        #6b7280;
  --light-gray:  #aab2bd;
  --mist:        #e8ebef;
  --paper:       #f5f6f8;
  --white:       #ffffff;

  --cyan:        #00aeef;   /* azul ciano do logo */
  --cyan-deep:   #0087c1;   /* hover */
  --cyan-glow:   rgba(0,174,239,.35);
  --yellow:      #ffc907;   /* amarelo do logo */
  --yellow-deep: #e0ae00;

  /* aliases legados (evita quebrar regras antigas) */
  --orange:      var(--cyan);
  --orange-deep: var(--cyan-deep);
  --amber:       var(--yellow);

  --whatsapp:    #25d366;
  --whatsapp-dk: #128c4a;

  /* ── Tipografia ── */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-main:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ── Espaçamentos ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Raios ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(11,13,16,.12), 0 1px 2px rgba(11,13,16,.08);
  --shadow-md:  0 6px 18px rgba(11,13,16,.14);
  --shadow-lg:  0 14px 40px rgba(11,13,16,.22);
  --shadow-xl:  0 24px 70px rgba(11,13,16,.30);
  --shadow-cyan:   0 8px 28px var(--cyan-glow);
  --shadow-orange: 0 8px 28px var(--cyan-glow);

  /* ── Transições ── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --duration:      250ms;
  --duration-long: 600ms;

  /* ── Layout ── */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 2rem);

  /* ── Header ── */
  --header-h: 76px;
}