/* =========================================================
   DR. ELETRICIDADE — DESIGN TOKENS
   Base visual extraída das artes: roxo elétrico + dourado,
   ícones em chip roxo arredondado, tipografia de impacto
   para títulos e sans-serif limpa para leitura.
   ========================================================= */

:root {
  /* ---- Cor: Roxo (primária da marca) ---- */
  --purple-900: #250A45;
  --purple-800: #331159;
  --purple-700: #46177A;
  --purple-600: #5B1E96;
  --purple-500: #7A2FC0;
  --purple-400: #9B4FDE;
  --purple-300: #C08CEC;

  /* ---- Cor: Dourado / Amarelo (acento principal) ---- */
  --gold-600: #E6A400;
  --gold-500: #FDC500;
  --gold-400: #FFD400;
  --gold-300: #FFE066;

  /* ---- Cor: Laranja (gradiente secundário, cartões quentes) ---- */
  --orange-500: #F7941D;
  --orange-400: #F9AA45;

  /* ---- Neutros ---- */
  --ink-900: #1B1626;
  --gray-800: #232733;
  --gray-500: #6E6A78;
  --gray-200: #E7E3EF;
  --gray-100: #F5F3FA;
  --white: #FFFFFF;

  /* ---- Semântica ---- */
  --whatsapp: #25D366;
  --success: #2FB35B;
  --alert: #E8453C;

  /* ---- Gradientes de marca ---- */
  --gradient-hero: linear-gradient(135deg, var(--purple-800) 0%, var(--purple-600) 45%, var(--purple-700) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-600) 0%, var(--gold-400) 100%);
  --gradient-warm: linear-gradient(135deg, var(--orange-500) 0%, var(--gold-400) 100%);
  --gradient-chip: linear-gradient(160deg, var(--purple-500) 0%, var(--purple-700) 100%);

  /* ---- Tipografia ---- */
  --font-display: "Anton", "Archivo Black", sans-serif; /* títulos de impacto, uppercase */
  --font-body: "Poppins", "Segoe UI", sans-serif;        /* leitura, UI, botões */

  --fs-h1: clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2: clamp(1.8rem, 3.2vw, 2.6rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  /* ---- Espaçamento (escala 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Raios ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-chip: 20px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 2px 8px rgba(37, 10, 69, 0.15);
  --shadow-md: 0 8px 24px rgba(37, 10, 69, 0.25);
  --shadow-gold: 0 8px 20px rgba(230, 164, 0, 0.35);

  /* ---- Container ---- */
  --container-max: 1180px;
}