/* static/css/base.css — o corpo da página e os elementos soltos.
 * Só tokens (tokens.css); componente vai em components.css. */

body {
    /* Manual de marca: Montserrat, sans-serif geométrica. */
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
}

/* hidden esconde sempre: sem isto, uma classe com display:flex/grid vence o
   atributo e o elemento "escondido" aparece (o JS usa el.hidden = true). */
[hidden] { display: none !important; }

a { color: var(--accent-text); }
h1, h2, h3 { color: var(--heading); }
code, kbd, samp { font-family: var(--font-mono); }

.container-central {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Botão legado de algumas telas antigas; o do sistema é o .mg-btn (components.css). */
.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--accent-strong);
}

/* A escala das fases da ocorrência (--fase-*) mora em tokens.css. */