/* syapp/css/base.css */
:root { --cor-primaria: #007bff; --cor-primaria-hover: #0056b3; --cor-primaria-rgb: 0, 123, 255; --cor-fundo: #f4f7f9; --cor-surface: #ffffff; --cor-texto: #212529; --cor-texto-claro: #ffffff; --cor-borda: #dee2e6; --fonte-principal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --raio-borda: 8px; --sombra-padrao: 0 4px 6px rgba(0,0,0,0.05); }
* { box-sizing: border-box; }
body { font-family: var(--fonte-principal); background-color: var(--cor-fundo); color: var(--cor-texto); margin: 0; line-height: 1.6; transition: background-color 0.3s, color 0.3s; }
.site-container { display: flex; flex-direction: column; min-height: 100vh; }
main.container { flex-grow: 1; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; }
h1, h2, h3 { color: var(--cor-texto); }
h1 { font-size: 2rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cor-borda); padding-bottom: 0.5rem; }
h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); background-color: var(--cor-fundo); color: var(--cor-texto); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), 0.25); }
.btn { display: inline-block; background-color: var(--cor-primaria); color: var(--cor-texto-claro); padding: 0.75rem 1.5rem; border: none; border-radius: var(--raio-borda); font-size: 1rem; font-weight: bold; text-decoration: none; cursor: pointer; text-align: center; transition: background-color 0.2s; }
.btn:hover { background-color: var(--cor-primaria-hover); }
.card { background-color: var(--cor-surface); border-radius: var(--raio-borda); box-shadow: var(--sombra-padrao); padding: 1.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0,0,0,0.1); }