/* ==========================================================================
   AppAgilStudio — Design Tokens
   Fonte: Fase 5 (Direção Visual Inicial)
   ========================================================================== */

:root {
  /* Cores — Fase 13: migração para a paleta escura "nocturne" (Versão A: troca de tokens) */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #E9E9ED;
  --color-text-secondary: #AAAAB1;
  --color-primary: #9184D9;       /* acento principal (era petróleo; agora é o "blurple" do nocturne) */
  --color-primary-hover: #A7A1DB;
  --color-secondary: #A7A1DB;     /* acento secundário/variação, usado em hover e detalhes */
  --color-accent: #9184D9;        /* mesmo acento — nocturne usa uma única família de cor de destaque */
  --color-accent-hover: #A7A1DB;
  --color-on-accent: #12151A;     /* NOVO: texto escuro para uso sobre fundo de acento (ver nota de contraste abaixo) */
  --color-border: #2B2D3A;        /* divisor decorativo, baixo contraste por design (não usado em campos de formulário) */
  --color-border-strong: #75798C; /* uso restrito a componentes interativos (ex: campos de formulário) que exigem contraste 3:1 */
  --color-white: #FFFFFF;         /* mantido por compatibilidade; uso mínimo neste tema */
  --color-error: #F1876B;
  --color-success: #4FBBA8;
  --color-section-band: #262A60;      /* NOVO: faixa de destaque escura (ex: CTA final), mais rica que o fundo padrão */
  --color-section-band-glow: #353B80; /* NOVO: usado em gradiente com a cor acima */

  /* NOTA DE CONTRASTE (Fase 13): texto claro (--color-text) sobre o acento
     (--color-accent) mede ~2.7:1 — abaixo do mínimo de 4,5:1. Por isso,
     qualquer botão ou selo com fundo --color-accent usa --color-on-accent
     como cor de texto (medido em ~5,7:1), nunca --color-text ou --color-white. */

  /* Tipografia */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --fs-hero: clamp(2.2rem, 5vw, 3.6rem);
  --fs-h1: clamp(1.9rem, 3.6vw, 2.6rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  /* Espaçamento */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;

  /* Layout */
  --container-max: 1180px;
  --container-narrow: 700px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --border-w: 1px;

  /* Sombra sutil (uso comedido, só em hover) — recalibrada para fundo escuro */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);

  /* Transições */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}