/* ==========================================================================
   O Meu Tarot — utilitárias

   Este ficheiro é carregado DEPOIS de components.css e sections.css, e é por
   isso que existe separado. Enquanto estas classes viviam em base.css,
   `.creed { margin: 0 }` (reset de lista, em components.css) ganhava a
   `.mt-8` — mesma especificidade, mas declarada depois — e o espaço entre o
   título da Filosofia e as frases era zero. Utilitária que não ganha não é
   utilitária.
   ========================================================================== */

/* --- Fluxo vertical -----------------------------------------------------
   Uma classe em vez de margens espalhadas por todos os componentes.        */
.flow > * + * { margin-top: var(--s-4); }
.flow--tight > * + * { margin-top: var(--s-3); }
.flow--loose > * + * { margin-top: var(--s-6); }

/* --- Margem superior ----------------------------------------------------- */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }

/* --- Texto --------------------------------------------------------------- */
.font-serif { font-family: var(--font-serif); font-weight: 500; }

.text-sm { font-size: var(--t-small); }
.text-micro { font-size: var(--t-micro); }
.text-dim { color: var(--fg-dim); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }