* {
    font-optical-sizing: auto;
    font-style: normal;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    font-family: 'Source Sans 3', sans-serif;
    box-sizing: border-box;
    margin: 0;
}

:root {
    color-scheme: light only;
    --force-light-mode: true;
    
    font-size: 16px;
    --branco: #fff;

    --bg1: #FFFCF7;
    --bg2: #D5DDCF;
    --bg3: #BAC7B1;

    --borda: hsl(100, 3%, 12%);
    --texto1: #323431;
    --texto2: hsl(100, 3%, 30%);
    --texto3: hsl(100, 3%, 60%);
    --cor1: #FF5237;
    --cor2: #F8711C;
    /* Fundo suave da marca, para superfícies destacadas (item ativo do menu,
       avatar de lista). Derivado de --cor1 para nao fixar um segundo tom. */
    --cor1-suave: color-mix(in srgb, var(--cor1) 12%, var(--branco));
    --verde: #14b838;
    --amarelo: #F97316;
    --vermelho: #be1212;
    --dark: #323431;
    --radius: 1em;
    --radius-secundario: 0.75em;
    --padding: 1em;
    --largura-modal: 496px;
    --area-segura-topo: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
    --area-segura-baixo: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

button, a, input, textarea, select, [tabindex] {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    touch-action: manipulation;
}

.cor1 {color:--var(cor1)}
.cor2 {color:--var(cor2)}
.sucesso,.verde{color:var(--verde)}
.aviso,.amarelo{color:var(--amarelo)}
.erro,.vermelho{color:var(--vermelho)}
.branco{color: var(--branco)}
.bg-branco{background-color: var(--branco)}
.bg1{background-color: var(--bg1)}
.bg2{background-color: var(--bg2)}
.texto1{color: var(--texto1)}
.texto2{color: var(--texto2)}
.texto3{color: var(--texto3)}

/* EXTRAS */
textarea {resize: vertical;}