@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --color-primary: #000000;
    --color-primary-container: #3b3b3b;
    --color-on-primary: #e2e2e2;
    --color-primary-fixed: #5e5e5e;

    --color-surface: #f9f9f9;
    --color-background: #f9f9f9;
    --color-surface-container: #eeeeee;
    --color-surface-container-low: #f3f3f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e8e8e8;
    --color-surface-container-highest: #e2e2e2;
    --color-surface-dim: #dadada;

    --color-on-surface: #1a1c1c;
    --color-on-surface-variant: #474747;
    --color-outline-variant: #c6c6c6;
    --color-error: #ba1a1a;

    --barra-topo-altura: 4rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    border-radius: 0;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--color-background);
    color: var(--color-on-surface-variant);
    -webkit-font-smoothing: antialiased;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

.shell {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.shell__conteudo {
    grid-column: 2;
    grid-row: 2;
    min-height: calc(100vh - var(--barra-topo-altura));
    padding: 2rem;
    background-color: var(--color-surface);
}

@media (max-width: 1023px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .shell__conteudo {
        grid-column: 1;
    }
}