/* ==========================================================================
   SUPER LED — DESIGN TOKENS
   Identidade: Vermelho e Branco com fundos escuros de alto contraste
   DNA: O COPY / Padrão Internacional de Alta Conversão
   ========================================================================== */

:root {
  /* Cores Principais da Marca */
  --color-primary: #E50914;
  --color-primary-rgb: 229, 9, 20;
  --color-primary-hover: #F6121D;
  --color-primary-glow: rgba(229, 9, 20, 0.45);
  --color-primary-soft: rgba(229, 9, 20, 0.12);
  --color-primary-border: rgba(229, 9, 20, 0.3);

  /* Branco e Tons Claros */
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;
  --color-text-main: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.76);
  --color-text-muted: rgba(255, 255, 255, 0.48);
  --color-text-dim: rgba(255, 255, 255, 0.28);

  /* Superfícies e Fundos Escuros (Neutros para iluminação de destaque) */
  --color-bg-body: #07080A;
  --color-bg-surface: #0E1015;
  --color-bg-card: rgba(16, 19, 26, 0.75);
  --color-bg-card-hover: rgba(24, 28, 38, 0.88);
  --color-bg-card-solid: #12151D;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.18);
  --color-border-active: rgba(229, 9, 20, 0.5);

  /* Cores Oficiais de Plataformas */
  --color-whatsapp: #25D366;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.35);
  --color-instagram: #E4405F;
  --color-instagram-glow: rgba(228, 64, 95, 0.35);

  /* Tipografia */
  --font-display: 'Syne', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Espaçamentos */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Raios de Borda */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Sombras e Efeitos */
  --shadow-card: 0 16px 36px -8px rgba(0, 0, 0, 0.6);
  --shadow-glow-red: 0 0 35px var(--color-primary-glow);
  --shadow-glow-btn: 0 10px 28px -4px var(--color-primary-glow);

  /* Curvas e Transições Suaves */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-smooth);
  --transition-slow: 0.6s var(--ease-smooth);
}