/* ============================================
   VOOAPP — DESIGN TOKENS
   Variáveis centrais. NÃO usar cores hard-coded
   em outros arquivos — sempre via var(--cor-x).
   ============================================ */

:root {
  /* ===== CORES — PALETA AERONÁUTICA ===== */
  
  /* Primárias */
  --cor-azul-noite: #0B1A2F;        /* Fundo escuro, header, dark mode */
  --cor-azul-ceu: #1E5FBA;          /* Primária, botões, links */
  --cor-azul-ceu-hover: #1850A0;
  --cor-azul-ceu-light: #E8F0FB;    /* Fundo de destaque suave */
  
  /* Acento */
  --cor-amarelo-pista: #F5B301;     /* CTA, badges, destaques */
  --cor-amarelo-pista-hover: #DCA001;
  --cor-amarelo-pista-light: #FEF6DD;
  
  /* Neutros */
  --cor-branco: #FFFFFF;
  --cor-branco-nevoa: #F8F9FB;      /* Fundo de página */
  --cor-cinza-50: #F1F3F6;
  --cor-cinza-100: #E2E6EC;
  --cor-cinza-200: #C7CDD6;
  --cor-cinza-300: #9BA3AF;
  --cor-cinza-400: #6C7580;          /* Texto secundário */
  --cor-cinza-500: #4A5260;
  --cor-cinza-600: #2E3540;
  --cor-cinza-700: #1A1F28;
  
  /* Status */
  --cor-sucesso: #1FAA64;
  --cor-sucesso-light: #E3F7EC;
  --cor-alerta: #F39C12;
  --cor-alerta-light: #FDF1DC;
  --cor-erro: #E23C3C;
  --cor-erro-light: #FCE3E3;
  --cor-info: #3B82F6;
  --cor-info-light: #DBEAFE;
  
  /* Texto */
  --texto-primario: var(--cor-azul-noite);
  --texto-secundario: var(--cor-cinza-400);
  --texto-terciario: var(--cor-cinza-300);
  --texto-inverso: var(--cor-branco);
  --texto-link: var(--cor-azul-ceu);
  
  /* Backgrounds */
  --bg-pagina: var(--cor-branco-nevoa);
  --bg-card: var(--cor-branco);
  --bg-escuro: var(--cor-azul-noite);
  --bg-destaque: var(--cor-azul-ceu-light);
  
  /* Bordas */
  --borda-padrao: 1px solid var(--cor-cinza-100);
  --borda-input: 1px solid var(--cor-cinza-200);
  --borda-input-focus: 2px solid var(--cor-azul-ceu);
  
  /* ===== TIPOGRAFIA ===== */
  
  --fonte-titulo: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-corpo: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fonte-mono: 'JetBrains Mono', 'Courier New', monospace;
  
  /* Tamanhos — escala modular 1.25 */
  --fs-xs: 0.75rem;        /* 12px — labels, badges */
  --fs-sm: 0.875rem;       /* 14px — texto secundário */
  --fs-base: 1rem;         /* 16px — corpo */
  --fs-lg: 1.125rem;       /* 18px — destaque */
  --fs-xl: 1.25rem;        /* 20px — h4 */
  --fs-2xl: 1.5rem;        /* 24px — h3 */
  --fs-3xl: 1.875rem;      /* 30px — h2 */
  --fs-4xl: 2.25rem;       /* 36px — h1 */
  --fs-5xl: 3rem;          /* 48px — hero desktop */
  --fs-6xl: 3.75rem;       /* 60px — hero grande */
  
  /* Pesos */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  
  /* Line height */
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.75;
  
  /* ===== ESPAÇAMENTO ===== */
  
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  
  /* ===== BORDAS / RAIOS ===== */
  
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 14px;
  --raio-xl: 20px;
  --raio-full: 9999px;
  
  /* ===== SOMBRAS ===== */
  
  --sombra-sm: 0 1px 2px rgba(11, 26, 47, 0.06);
  --sombra-md: 0 4px 12px rgba(11, 26, 47, 0.08);
  --sombra-lg: 0 10px 30px rgba(11, 26, 47, 0.12);
  --sombra-xl: 0 20px 50px rgba(11, 26, 47, 0.18);
  --sombra-azul: 0 8px 24px rgba(30, 95, 186, 0.25);
  --sombra-amarelo: 0 8px 24px rgba(245, 179, 1, 0.30);
  
  /* ===== TRANSIÇÕES ===== */
  
  --transicao-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-padrao: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transicao-lenta: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX ===== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;
  
  /* ===== LAYOUT ===== */
  
  --container-max: 1200px;
  --container-narrow: 800px;
  --header-altura: 72px;
  --tap-target-min: 44px;     /* Mínimo para botões mobile (luva piloto) */
}

/* ===== DARK MODE (futuro) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Inverter tokens quando ativar dark mode */
    /* --bg-pagina: var(--cor-azul-noite); */
    /* --texto-primario: var(--cor-branco); */
  }
}