/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   base.css

   Caminho:
   assets/css/base.css

   Versão:
   2.0.0

   Descrição:
   Reset moderno e configurações globais da aplicação.

   ============================================================================= */


/* =============================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


/* =============================================================================
   HTML
   ========================================================================== */

html{

    font-size:16px;

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


/* =============================================================================
   BODY
   ========================================================================== */

body{

    background:var(--color-background);

    color:var(--color-text);

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

    font-size:var(--fs-body);

    font-weight:var(--fw-regular);

    line-height:var(--line-relaxed);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* =============================================================================
   SELEÇÃO
   ========================================================================== */

::selection{

    background:var(--color-accent);

    color:var(--color-white);

}

::-moz-selection{

    background:var(--color-accent);

    color:var(--color-white);

}


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

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}


/* =============================================================================
   FIGURE
   ========================================================================== */

figure{

    margin:0;

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition-default);

}


/* =============================================================================
   LISTAS
   ========================================================================== */

ul,
ol{

    list-style:none;

}


/* =============================================================================
   BOTÕES
   ========================================================================== */

button{

    border:none;

    background:none;

    color:inherit;

    font:inherit;

    cursor:pointer;

    transition:var(--transition-default);

}


/* =============================================================================
   INPUTS
   ========================================================================== */

input,
textarea,
select{

    font:inherit;

    color:inherit;

    background:transparent;

    border:none;

    outline:none;

}


/* =============================================================================
   TEXTAREA
   ========================================================================== */

textarea{

    resize:vertical;

}


/* =============================================================================
   TABELAS
   ========================================================================== */

table{

    border-collapse:collapse;

    border-spacing:0;

}


/* =============================================================================
   IFRAMES
   ========================================================================== */

iframe{

    border:0;

}


/* =============================================================================
   SVG
   ========================================================================== */

svg{

    display:block;

}


/* =============================================================================
   HIDDEN
   ========================================================================== */

[hidden]{

    display:none !important;

}


/* =============================================================================
   FOCUS
   ========================================================================== */

:focus{

    outline:none;

}

:focus-visible{

    outline:2px solid var(--color-accent);

    outline-offset:4px;

}


/* =============================================================================
   PLACEHOLDER
   ========================================================================== */

::placeholder{

    color:var(--color-text-soft);

    opacity:1;

}


/* =============================================================================
   HR
   ========================================================================== */

hr{

    border:none;

    border-top:1px solid var(--color-line);

}


/* =============================================================================
   SECTION
   ========================================================================== */

section{

    position:relative;

}


/* =============================================================================
   MAIN
   ========================================================================== */

main{

    display:block;

}


/* =============================================================================
   HEADER
   ========================================================================== */

header{

    position:relative;

}


/* =============================================================================
   FOOTER
   ========================================================================== */

footer{

    position:relative;

}


/* =============================================================================
   DESABILITA TAP HIGHLIGHT
   ========================================================================== */

a,
button{

    -webkit-tap-highlight-color:transparent;

}


/* =============================================================================
   SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--color-background);

}

::-webkit-scrollbar-thumb{

    background:var(--color-line);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-accent);

}


/* =============================================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}