/* RAILTag Global Styles */

:root {
    /* ── Cor Primária ───────────────────────────────────────────────────────── */
    --rail-primary: #3776BB;
    --rail-900: #3776BB;   /* cor primária: botões, links ativos, nav ativo     */

    /* ── Cinzentos — ajustar aqui para controlar os tons de toda a interface ─ */
    --rail-800: #1e293b;   /* títulos principais (h1, valores KPI)              */
    --rail-700: #334155;   /* texto de corpo, conteúdo de tabelas               */
    --rail-600: #475569;   /* texto secundário (descrições, subtítulos)         */
    --rail-500: #64748b;   /* texto de apoio (subtítulo do header de página)    */
    --rail-400: #94a3b8;   /* labels de formulário ("COMPONENTE", "ESTADO"...)  */
    --rail-300: #a8b6c4;   /* texto de apoio suave ("Opcional —", posições...)  */
    --rail-200: #d8e0e8;   /* bordas de cards, inputs e separadores             */
    --rail-100: #eaeff4;   /* fundo de cabeçalhos de tabela, hover de nav       */
    --rail-50:  #f4f7fa;   /* fundo de inputs, hover de linhas de tabela        */
}

body { 
    font-family: 'Quicksand', sans-serif !important;
    -webkit-font-smoothing: antialiased; 
}

/* Navigation */
.nav-link.active { 
    background-color: var(--rail-900); 
    color: white; 
}

.nav-link.active svg { 
    color: white; 
}

/* Forms */
input:focus {
    outline: none;
}