/* ==========================
   BASE CSS
   Colégio dos Magos
   ========================== */

/* ==========================
   DOCUMENTO
   ========================== */

body {
    background-color: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--line-normal);
}

/* ==========================
   CONTAINER
   ========================== */

.container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}

/* ==========================
   TÍTULOS
   ========================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);

    font-weight: var(--fw-bold);
    line-height: var(--line-tight);

    text-wrap: balance;
}

h1 {
    color: var(--color-primary);
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-xl);
}

/* ==========================
   PARÁGRAFOS
   ========================== */

p {
    color: var(--color-text);
    line-height: var(--line-relaxed);
}

/* ==========================
   LINKS
   ========================== */

a {
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

/* ==========================
   SEÇÕES
   ========================== */

section {
    padding-block: var(--space-4xl);
}

/* ==========================
   IMAGENS
   ========================== */

img {
    height: auto;
}

/* ==========================
   SELEÇÃO DE TEXTO
   ========================== */

::selection {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ==========================
   FOCO PARA ACESSIBILIDADE
   ========================== */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}