/* ═════════════════════════════════════════════════════════════════════
   BEM INTELLIGENCE — DESIGN SYSTEM TOKENS
   Baseado no Manual de Marca oficial e Brand Voice
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Cores Oficiais da Marca (Manual de Marca) ─────────────────── */
  --color-primary:        #39C5EB;   /* Azul Claro — CTAs, botões principais, destaques */
  --color-accent:         #94E5F7;   /* Azul Mais Claro — Badges, gradientes, brilhos */
  --color-secondary:      #49494A;   /* Cinza Escuro — Superfícies secundárias, bordas neutras */
  --color-muted:          #A4A5A5;   /* Cinza Principal (Ícone) — Texto secundário, legendas */
  --color-text-dim:       #737374;   /* Cinza suave para labels e meta-dados */
  --color-bg:             #0A0A0B;   /* Fundo Geral da Página (Dark High-Tech) */
  --color-surface:        #141415;   /* Superfície Nível 1: Cards e seções */
  --color-surface-raised: #1C1C1E;   /* Superfície Nível 2: Modais, hovers, inputs */
  --color-text:           #F0F0F0;   /* Texto Principal (Alto Contraste WCAG AAA) */
  --color-black:          #000000;   /* Preto Absoluto */
  --color-border:         rgba(255, 255, 255, 0.08); /* Bordas sutis */
  --color-border-glow:    rgba(57, 197, 235, 0.4);   /* Borda ativa iluminada */

  /* ─── Tipografia Oficial ────────────────────────────────────────── */
  --font-heading: 'Chivo', system-ui, -apple-system, sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ─── Espaçamento Padronizado ───────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ─── Curvaturas de Borda (Border Radius) ───────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ─── Sombras & Efeitos de Glow ─────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.8);
  --glow-primary:        0 0 24px rgba(57, 197, 235, 0.18);
  --glow-primary-strong: 0 0 40px rgba(57, 197, 235, 0.32);

  /* ─── Gradientes da Marca ───────────────────────────────────────── */
  --gradient-hero:   radial-gradient(circle at 50% 0%, rgba(57, 197, 235, 0.14) 0%, rgba(10, 10, 11, 0.98) 75%);
  --gradient-accent: linear-gradient(135deg, #39C5EB 0%, #94E5F7 100%);
  --gradient-card:   linear-gradient(180deg, rgba(28, 28, 30, 0.65) 0%, rgba(16, 16, 17, 0.85) 100%);
  --gradient-border: linear-gradient(135deg, rgba(57, 197, 235, 0.4), rgba(255, 255, 255, 0.05));

  /* ─── Transições & Easing ───────────────────────────────────────── */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --transition-fast: 0.15s var(--ease);
  --transition-base: 0.25s var(--ease);

  /* ─── Container ─────────────────────────────────────────────────── */
  --max-w: 1140px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}