/*
==================================================
PorteroQR Design System
app.css
==================================================
*/

@import url("variables.css");
@import url("buttons.css");
@import url("cards.css");
@import url("forms.css");
@import url("utilities.css");

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

html{
    scroll-behavior:smooth;
}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--background);

    color:var(--text-primary);

    font-family:var(--font-family);

    font-size:var(--font-normal);

    line-height:1.5;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

.brand-origin{
    margin:7px 0 0;
    color:#7d8da2;
    font-size:12px;
    line-height:1.4;
}

.brand-origin--light{
    color:#abc2c8;
}

img{
    display:block;
    max-width:100%;
}

a{

    color:var(--color-secondary);

    text-decoration:none;

    transition:color var(--transition);

}

a:hover{

    color:var(--color-primary);

}

h1,h2,h3,h4,h5,h6{

    margin:0;

    color:var(--text-primary);

}

.container{

    width:100%;

    max-width:430px;

    padding:24px;

}

.logo{

    text-align:center;

    margin-bottom:28px;

}

.logo h1{

    font-size:34px;

    color:var(--color-primary);

    margin-bottom:6px;

    font-weight:700;

}

.logo p{

    color:var(--text-secondary);

    font-size:15px;

}

.error{

    margin-top:20px;

    padding:14px;

    border-radius:var(--border-radius);

    background:#FEE2E2;

    color:#991B1B;

    border:1px solid #FECACA;

}

@media (max-width:480px){

    .container{

        padding:18px;

    }

    .card{

        padding:22px;

    }

}