/* NaveNET — Design tokens
   Fonte única de verdade para cor, tipografia, espaçamento, raio,
   sombra e timing de animação. Landing e painel compartilham isto. */

:root {
  /* Cor */
  --nv-navy-950: #050b16;
  --nv-navy-900: #0a1128;
  --nv-navy-800: #0f1c3f;
  --nv-navy-700: #16265a;
  --nv-blue-500: #2a5cff;
  --nv-blue-400: #4f7dff;
  --nv-blue-300: #7ea0ff;
  --nv-white: #ffffff;
  --nv-ink-100: #eef1fb;
  --nv-ink-300: #b9c2e0;
  --nv-ink-500: #8790b3;
  --nv-red-600: #e11d2e;
  --nv-red-500: #ff2d3d;
  --nv-red-400: #ff5c68;
  --nv-green-500: #17c964;
  --nv-green-600: #12a352;

  /* Superfícies */
  --nv-bg: var(--nv-navy-950);
  --nv-surface: var(--nv-navy-900);
  --nv-surface-2: var(--nv-navy-800);
  --nv-text: var(--nv-ink-100);
  --nv-text-muted: var(--nv-ink-300);
  --nv-border: rgba(255, 255, 255, 0.08);

  /* Tipografia */
  --nv-font-display: "Space Grotesk", "Segoe UI", Arial, sans-serif;
  --nv-font-body: "Inter", "Segoe UI", Arial, sans-serif;
  --nv-fs-hero: clamp(2.4rem, 9vw, 4.75rem);
  --nv-fs-h2: clamp(1.9rem, 6vw, 3.25rem);
  --nv-fs-h3: clamp(1.25rem, 4vw, 1.75rem);
  --nv-fs-body: clamp(1rem, 2.4vw, 1.125rem);
  --nv-fs-small: 0.875rem;
  --nv-lh-tight: 1.05;
  --nv-lh-normal: 1.5;
  --nv-tracking-tight: -0.02em;

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

  /* Raio */
  --nv-radius-sm: 8px;
  --nv-radius-md: 16px;
  --nv-radius-lg: 24px;
  --nv-radius-pill: 999px;

  /* Sombra */
  --nv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --nv-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
  --nv-shadow-glow-blue: 0 0 48px rgba(42, 92, 255, 0.35);
  --nv-shadow-glow-red: 0 0 48px rgba(255, 45, 61, 0.3);

  /* Timing de animação */
  --nv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nv-dur-fast: 150ms;
  --nv-dur-normal: 320ms;
  --nv-dur-slow: 640ms;

  --nv-max-width: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nv-dur-fast: 1ms;
    --nv-dur-normal: 1ms;
    --nv-dur-slow: 1ms;
  }
}

/* =========================================================
   Camada de tokens semânticos — usada pela landing pública
   (segunda rodada de redesign). Definida EM CIMA dos tokens
   --nv-* acima, nunca os substitui: o painel administrativo
   (painel.css) continua lendo --nv-* diretamente, sem nenhuma
   mudança de valor. Isso existe só para dar à landing nomes
   organizados (--color-*, --space-*, --radius-*, --shadow-*,
   --font-size-*, --transition-*) sem duplicar a fonte de
   verdade nem arriscar o painel.
   ========================================================= */

:root {
  /* Cor */
  --color-bg: var(--nv-bg);
  --color-bg-alt: var(--nv-navy-900);
  --color-surface: var(--nv-surface);
  --color-surface-2: var(--nv-surface-2);
  --color-surface-glass: rgba(255, 255, 255, 0.04);
  --color-border: var(--nv-border);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: var(--nv-text);
  --color-text-muted: var(--nv-text-muted);
  --color-text-dim: var(--nv-ink-500);

  --color-primary: var(--nv-blue-500);
  --color-primary-light: var(--nv-blue-400);
  --color-primary-pale: var(--nv-blue-300);
  --color-accent: var(--nv-red-500);
  --color-accent-strong: var(--nv-red-600);
  --color-accent-soft: var(--nv-red-400);
  --color-success: var(--nv-green-500);
  --color-success-strong: var(--nv-green-600);
  --color-white: var(--nv-white);

  /* Tipografia */
  --font-display: var(--nv-font-display);
  --font-body: var(--nv-font-body);

  --font-size-xs: 0.75rem;
  --font-size-sm: var(--nv-fs-small);
  --font-size-base: 1rem;
  --font-size-lg: clamp(1.125rem, 2.6vw, 1.35rem);
  --font-size-xl: clamp(1.35rem, 3.4vw, 1.75rem);
  --font-size-2xl: var(--nv-fs-h3);
  --font-size-3xl: var(--nv-fs-h2);
  --font-size-hero: var(--nv-fs-hero);

  /* Espaçamento */
  --space-3xs: 2px;
  --space-2xs: var(--nv-space-1);
  --space-xs: var(--nv-space-2);
  --space-sm: var(--nv-space-3);
  --space-md: var(--nv-space-4);
  --space-lg: var(--nv-space-5);
  --space-xl: var(--nv-space-6);
  --space-2xl: var(--nv-space-7);
  --space-3xl: var(--nv-space-8);
  --space-4xl: var(--nv-space-9);

  /* Raio */
  --radius-sm: var(--nv-radius-sm);
  --radius-md: var(--nv-radius-md);
  --radius-lg: var(--nv-radius-lg);
  --radius-xl: 32px;
  --radius-pill: var(--nv-radius-pill);

  /* Sombra */
  --shadow-sm: var(--nv-shadow-sm);
  --shadow-md: var(--nv-shadow-md);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-glow-primary: var(--nv-shadow-glow-blue);
  --shadow-glow-accent: var(--nv-shadow-glow-red);

  /* Transição (duração + easing prontos para uso direto) */
  --transition-fast: var(--nv-dur-fast) var(--nv-ease-out);
  --transition-base: var(--nv-dur-normal) var(--nv-ease-out);
  --transition-slow: var(--nv-dur-slow) var(--nv-ease-out);
  --transition-in-out: var(--nv-dur-normal) var(--nv-ease-in-out);

  --max-width: var(--nv-max-width);
}