/* ============================================================
   SitePronto — Variáveis de Design (Design Tokens)
   ============================================================ */

:root {
  /* === Paleta === */
  --sp-wine:        #5c2027;
  --sp-wine-light:  #7a2e38;
  --sp-wine-dark:   #3d151a;
  --sp-cream:       #fdf6f0;
  --sp-cream-deep:  #f5e6d8;
  --sp-gold:        #c4963c;
  --sp-gold-light:  #d4a94d;

  --sp-white:       #ffffff;
  --sp-black:       #1a1a1a;
  --sp-gray-50:     #f9f9f9;
  --sp-gray-100:    #f0f0f0;
  --sp-gray-200:    #e0e0e0;
  --sp-gray-300:    #cccccc;
  --sp-gray-400:    #767676;
  --sp-gray-500:    #666666;
  --sp-gray-600:    #444444;
  --sp-gray-700:    #333333;

  /* === Tipografia === */
  --sp-font:        'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-fw-regular:  400;
  --sp-fw-medium:   500;
  --sp-fw-semibold: 600;
  --sp-fw-extrabold: 800;

  --sp-fs-xs:       clamp(0.75rem, 1.5vw, 0.8125rem);
  --sp-fs-sm:       clamp(0.875rem, 1.8vw, 0.9375rem);
  --sp-fs-base:     clamp(1rem, 2vw, 1.0625rem);
  --sp-fs-md:       clamp(1.125rem, 2.2vw, 1.25rem);
  --sp-fs-lg:       clamp(1.25rem, 2.8vw, 1.5rem);
  --sp-fs-xl:       clamp(1.5rem, 3.5vw, 2rem);
  --sp-fs-2xl:      clamp(1.75rem, 4.5vw, 2.5rem);
  --sp-fs-3xl:      clamp(2rem, 5.5vw, 3.25rem);
  --sp-fs-hero:     clamp(2.25rem, 6vw, 3.75rem);

  /* === Espaçamento === */
  --sp-section-py:  clamp(3rem, 6vh, 5rem);
  --sp-container-px: clamp(1rem, 4vw, 2rem);
  --sp-container-max: 72rem;

  /* === Bordas e Sombras === */
  --sp-radius-sm:   0.375rem;
  --sp-radius:      0.5rem;
  --sp-radius-lg:   0.75rem;
  --sp-radius-xl:   1rem;
  --sp-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --sp-shadow:      0 2px 12px rgba(0,0,0,0.1);
  --sp-shadow-lg:   0 4px 24px rgba(0,0,0,0.12);

    /* === Transições === */
  --sp-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sp-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sp-transition:  0.2s var(--sp-ease-out);
  --sp-transition-slow: 0.3s var(--sp-ease-out);
  --sp-shadow-hover: 0 1.5rem 3.5rem rgba(61, 21, 26, 0.16);

}