/**
 * ============================================================================
 * NEOX TELECOM — DESIGN SYSTEM & TOKENS DE DESIGN ULTRA-MODERNOS
 * ============================================================================
 * Paleta Premium: Deep Space Blue, Electric Cyber Blue, Luminous Cyan Neon
 * Tipografia de Alta Performance: Outfit (Display) + Plus Jakarta Sans (Body)
 * ============================================================================
 */

:root {
  /* Cores de Fundo Espacial / Dark Theme */
  --bg-base: #050811;               /* Preto cósmico azulado de fundo */
  --bg-surface: #0a0f1d;            /* Superfície secundária */
  --bg-card: rgba(14, 22, 41, 0.7);  /* Vidro escuro translúcido com blur */
  --bg-card-hover: rgba(20, 31, 56, 0.85);
  --bg-card-active: rgba(26, 41, 74, 0.95);
  --bg-glass-subtle: rgba(255, 255, 255, 0.03);

  /* Acentos de Alta Energia & Neon Fibra */
  --blue-primary: #0066ff;          /* Azul elétrico da marca */
  --blue-light: #2979ff;
  --blue-glow: rgba(0, 102, 255, 0.35);
  --cyan-neon: #00f0ff;             /* Ciano neon brilhante */
  --cyan-glow: rgba(0, 240, 255, 0.4);
  --purple-accent: #7928ca;
  --emerald-accent: #10b981;

  /* Hierarquia Tipográfica e Contrastes */
  --text-white: #ffffff;
  --text-body: #94a3b8;             /* Slate 400 - leitura suave sem cansaço */
  --text-muted: #64748b;            /* Slate 500 */
  --text-dim: #475569;              /* Slate 600 */
  --text-cyan: #00f0ff;

  /* Bordas e Delimitadores com Efeito de Vidro */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-hover: rgba(0, 240, 255, 0.3);
  --border-glass-active: rgba(0, 102, 255, 0.6);
  --border-glow: rgba(0, 240, 255, 0.4);

  /* Gradientes Tecnológicos */
  --grad-primary: linear-gradient(135deg, #0066ff 0%, #00f0ff 100%);
  --grad-primary-hover: linear-gradient(135deg, #1f77ff 0%, #38f4ff 100%);
  --grad-cyan-soft: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
  --grad-text-display: linear-gradient(180deg, #ffffff 30%, #94a3b8 100%);
  --grad-text-glow: linear-gradient(135deg, #ffffff 20%, #00f0ff 80%, #0066ff 100%);
  --grad-card-border: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 240, 255, 0.2) 50%, rgba(255, 255, 255, 0.02) 100%);
  --grad-mesh: radial-gradient(ellipse at 50% -20%, rgba(0, 102, 255, 0.25) 0%, transparent 60%),
               radial-gradient(circle at 90% 70%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
               #050811;

  /* Sombras & Glows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
  --shadow-glow-cyan: 0 0 40px rgba(0, 240, 255, 0.25);
  --shadow-glow-blue: 0 0 50px rgba(0, 102, 255, 0.35);
  --shadow-btn-primary: 0 8px 24px -4px rgba(0, 102, 255, 0.5);

  /* Tipografia */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Layout & Espaçamentos Estruturais Amplos */
  --container-width: 1240px;
  --section-spacing: 120px;
  --section-spacing-mobile: 80px;

  /* Raios de Arredondamento */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Transições Fluidas */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-normal: 0.35s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
}