/* ==========================================================================
   VARIABLES.CSS — Design Tokens do projeto Clube da Costura
   Centraliza cores, tipografia, espaçamentos, raios e sombras.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     CORES
     ------------------------------------------------------------------ */
  --color-background: #F7F3EA;   /* Fundo geral da página              */
  --color-surface: #FFFFFF;      /* Superfícies (cards)                */
  --color-heading: #273757;      /* Títulos                            */
  --color-text: #4E4E4E;         /* Textos corridos                    */
  --color-text-muted: #8A8A8A;   /* Textos de apoio / notas            */

  --color-green: #45C61A;        /* CTA principal (WhatsApp)           */
  --color-green-dark: #3AAD14;   /* CTA principal em hover             */
  --color-purple: #7D3AED;       /* CTA secundário                     */
  --color-purple-dark: #6C2BD9;  /* CTA secundário em hover            */
  --color-gold: #D4AF37;         /* Detalhes dourados (linha do card)  */

  /* ------------------------------------------------------------------
     TIPOGRAFIA
     ------------------------------------------------------------------ */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --font-size-hero-title: clamp(2.5rem, 5vw, 3.75rem);  /* Título da hero    */
  --font-size-section-title: clamp(1.75rem, 3.2vw, 2.5rem); /* Títulos H2    */
  --font-size-body: 1.0625rem;   /* 17px — texto corrido               */
  --font-size-small: 0.875rem;   /* 14px — notas e textos de apoio     */
  --font-size-overline: 0.9375rem; /* 15px — texto pequeno acima do H1 */

  /* ------------------------------------------------------------------
     LAYOUT E ESPAÇAMENTOS
     ------------------------------------------------------------------ */
  --container-max-width: 1200px;
  --container-padding: 24px;
  --section-spacing: 120px;      /* Espaço vertical entre as seções    */

  /* ------------------------------------------------------------------
     BORDAS E SOMBRAS
     ------------------------------------------------------------------ */
  --radius: 20px;                /* Raio padrão de bordas              */
  --radius-pill: 999px;          /* Botões totalmente arredondados     */

  --shadow-soft: 0 10px 40px rgba(39, 55, 87, 0.08);      /* Sombra discreta */
  --shadow-card: 0 8px 30px rgba(39, 55, 87, 0.06);       /* Sombra do card  */
  --shadow-image: 0 24px 60px rgba(39, 55, 87, 0.14);     /* Sombra de imagem*/
  --shadow-green: 0 12px 28px rgba(69, 198, 26, 0.35);    /* Glow verde CTA  */
  --shadow-purple: 0 12px 28px rgba(125, 58, 237, 0.35);  /* Glow roxo CTA   */

  /* ------------------------------------------------------------------
     TRANSIÇÕES
     ------------------------------------------------------------------ */
  --transition-fast: 300ms ease;
}