/* ============================================================
   GUINCHO MEGA — Design Tokens
   ============================================================ */

:root {
  /* ----- Cores da marca (sóbrias, sólidas, sem brilho fluorescente) ----- */
  --red-primary:        #9e0b1f;   /* vermelho sangue sólido — CTAs, top bar */
  --red-deep:           #6c0815;   /* hover state */
  --red-soft:           #fce4e7;   /* backgrounds suaves */

  --whatsapp-green:     #128c4a;   /* verde WhatsApp escurecido (sóbrio) */
  --whatsapp-deep:      #0d6e3a;   /* hover */
  --whatsapp-soft:      #d8e9dd;

  /* ----- Neutros ----- */
  --black:              #0a0a0a;
  --gray-950:           #111418;
  --gray-900:           #1f2937;
  --gray-800:           #2f3845;
  --gray-700:           #4b5563;
  --gray-600:           #6b7280;
  --gray-500:           #9ca3af;
  --gray-400:           #d1d5db;
  --gray-300:           #e5e7eb;
  --gray-200:           #eef0f3;
  --gray-100:           #f5f6f8;
  --gray-50:            #fafbfc;
  --white:              #ffffff;

  /* ----- Semânticos ----- */
  --bg:                 var(--white);
  --bg-alt:             var(--gray-50);
  --bg-dark:            var(--black);
  --bg-card:            var(--white);
  --bg-overlay:         rgba(10, 10, 10, 0.72);

  --text:               var(--gray-900);
  --text-soft:          var(--gray-600);
  --text-muted:         var(--gray-500);
  --text-on-dark:       var(--white);
  --text-on-dark-soft:  rgba(255, 255, 255, 0.78);

  --border:             var(--gray-200);
  --border-strong:      var(--gray-300);

  /* ----- Tipografia ----- */
  --font-sans:          "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:       "Anton", "Inter", system-ui, sans-serif;

  --fs-xs:              0.75rem;     /* 12px */
  --fs-sm:              0.875rem;    /* 14px */
  --fs-base:            1rem;        /* 16px */
  --fs-lg:              1.125rem;    /* 18px */
  --fs-xl:              1.25rem;     /* 20px */
  --fs-2xl:             1.5rem;      /* 24px */
  --fs-3xl:             1.875rem;    /* 30px */
  --fs-4xl:             2.5rem;      /* 40px */
  --fs-5xl:             3.25rem;     /* 52px */
  --fs-6xl:             4rem;        /* 64px */

  --lh-tight:           1.1;
  --lh-snug:            1.25;
  --lh-base:            1.55;
  --lh-loose:           1.7;

  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-black:           900;

  /* ----- Espaçamento ----- */
  --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;

  /* ----- Layout ----- */
  --container-max:      1200px;
  --container-pad:      clamp(1rem, 4vw, 2.5rem);

  --topbar-h:           38px;
  --nav-h:              68px;

  /* ----- Radius ----- */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-pill:        999px;

  /* ----- Sombras ----- */
  --shadow-sm:          0 1px 2px rgba(10, 10, 10, 0.06), 0 1px 1px rgba(10, 10, 10, 0.04);
  --shadow-md:          0 6px 18px rgba(10, 10, 10, 0.08), 0 2px 6px rgba(10, 10, 10, 0.04);
  --shadow-lg:          0 18px 40px rgba(10, 10, 10, 0.14), 0 6px 14px rgba(10, 10, 10, 0.06);
  --shadow-red:         0 6px 14px rgba(10, 10, 10, 0.10);
  --shadow-green:       0 6px 14px rgba(10, 10, 10, 0.10);

  /* ----- Transições ----- */
  --ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:             140ms var(--ease-out);
  --t-base:             220ms var(--ease-out);
  --t-slow:             420ms var(--ease-out);

  /* ----- Z-Index ----- */
  --z-base:             1;
  --z-nav:              50;
  --z-topbar:           55;
  --z-modal:            90;
  --z-fab:              80;
}