/* Pode adicionar estilos globais aqui, se necessário */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
   
/* Importa as classes base, componentes e utilitários do Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --light-bg: #f5f5f5; /* #f0f4f8; #0d1117 */
    --light-text: #2c3e50; /*#1a202c; #c9d1d9*/
    --dark-bg: #1f2937;
    --dark-text: #e5e7eb;
    --light-card: #ffffff;
    --dark-card: #374151;
    --primary-accent: #3b82f6;
    --secondary-accent: #22c55e;
    --light-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --dark-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);  /*Default light mode background */
    /*color:  var(--light-text); Default light mode text */
    transition: background-color 0.3s, color 0.3s;
}

.light {
    background-color: var(--light-bg);
    color: var(--light-text);
}

.dark {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

.light .card {
    background-color: var(--light-card);
    box-shadow: var(--light-shadow);
}

.dark .card {
    background-color: var(--dark-card);
    box-shadow: var(--dark-shadow);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-button.active {
    background-color: #3b82f6;
    color: white;
}

.diagram-step {
    transition: transform 0.3s, box-shadow 0.3s;
}

.diagram-step:hover {
    transform: translateY(-8px);
}