/* ============================================
   ESTÚDIO LEPE — Design Tokens / Variables
   Rebrand 2026
   ============================================ */

:root {
  /* === CORES PRINCIPAIS === */
  --color-primary:        #DF1B79;  /* Rosa intenso */
  --color-primary-light:  #F58DBA;  /* Rosa claro (destaque) */
  --color-primary-dark:   #B8155F;  /* Rosa escuro (hover) */

  /* === FUNDO === */
  --color-bg-dark:        #102A2E;  /* Azul petróleo muito escuro */
  --color-bg-secondary:   #174B4B;  /* Verde petróleo */
  --color-bg-light:       #F7F3EF;  /* Off-white (texto claro) */
  --color-bg-white:       #FFFFFF;  /* Branco puro */

  /* === TEXTO === */
  --color-text-light:     #F7F3EF;  /* Off-white */
  --color-text-secondary: #AAB8B8;  /* Cinza azulado */fs-hero:
  --color-text-dark:      #102A2E;  /* Azul petróleo (texto escuro) */
  --color-text-body:      #2D3E42;  /* Texto corpo */

  /* === ACCENTS === */
  --color-accent:         #DF1B79;
  --color-accent-light:   #F58DBA;
  --color-success:        #2EC4B6;
  --color-warning:        #FFB627;

  /* === GRADIENTES === */
  --gradient-primary:     linear-gradient(135deg, #DF1B79 0%, #F58DBA 100%);
  --gradient-dark:        linear-gradient(180deg, #102A2E 0%, #174B4B 100%);
  --gradient-hero:        linear-gradient(135deg, #102A2E 0%, #174B4B 50%, #102A2E 100%);

  /* === TIPOGRAFIA === */
  --font-primary:         'DM Sans', 'Segoe UI', sans-serif;
  --font-heading:         'Baloo 2', 'DM Sans', sans-serif;

  /* Font Sizes (clamp para responsividade) */
  --fs-hero:              clamp(1.8rem, 3.5vw, 3.2rem);
  --fs-h1:                clamp(2.2rem, 4vw, 3.5rem);
  --fs-h2:                clamp(1.8rem, 3vw, 2.8rem);
  --fs-h3:                clamp(1.3rem, 2vw, 1.8rem);
  --fs-h4:                clamp(1.1rem, 1.5vw, 1.4rem);
  --fs-body:              1.05rem;
  --fs-body-lg:           1.2rem;
  --fs-small:             0.875rem;
  --fs-tiny:              0.75rem;

  /* Font Weights */
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* Line Heights */
  --lh-tight:             1.15;
  --lh-normal:            1.5;
  --lh-relaxed:           1.75;

  /* === ESPAÇAMENTOS === */
  --space-xs:             0.25rem;
  --space-sm:             0.5rem;
  --space-md:             1rem;
  --space-lg:             1.5rem;
  --space-xl:             2rem;
  --space-2xl:            3rem;
  --space-3xl:            4rem;
  --space-4xl:            6rem;
  --space-5xl:            8rem;

  /* === LAYOUT === */
  --container-max:        1280px;
  --container-narrow:     960px;
  --container-padding:    clamp(1rem, 4vw, 2.5rem);
  --section-padding:      clamp(4rem, 8vw, 7rem);

  /* === BORDAS E RAIO === */
  --radius-sm:            0.375rem;
  --radius-md:            0.75rem;
  --radius-lg:            1rem;
  --radius-xl:            1.5rem;
  --radius-full:          9999px;

  /* === SOMBRAS === */
  --shadow-sm:            0 1px 3px rgba(16, 42, 46, 0.08);
  --shadow-md:            0 4px 12px rgba(16, 42, 46, 0.12);
  --shadow-lg:            0 8px 30px rgba(16, 42, 46, 0.16);
  --shadow-xl:            0 16px 48px rgba(16, 42, 46, 0.2);
  --shadow-primary:       0 4px 20px rgba(223, 27, 121, 0.35);

  /* === TRANSIÇÕES === */
  --transition-fast:      0.15s ease;
  --transition-normal:    0.3s ease;
  --transition-slow:      0.5s ease;

  /* === Z-INDEX === */
  --z-header:             1000;
  --z-dropdown:           1010;
  --z-topbar:             1020;
  --z-modal:              2000;
  --z-toast:              3000;
}

/* === DARK MODE (opcional futuro) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-light:     #102A2E;
    --color-text-body:    #F7F3EF;
  }
}