/* ===================================================================
   ROTABRAS THEME
   -------------------------------------------------------------------
   Arquivo : global.css
   Versão  : 1.0
   Etapa   : Passo 03 - Identidade Visual Global

   Descrição:
   Configurações globais do tema.
   Este arquivo contém apenas estilos compartilhados por todo o site.

   Organização
   01 - Reset
   02 - Design Tokens
   03 - HTML e Body
   04 - Tipografia Base
   05 - Links
   06 - Imagens
   07 - Container
   08 - Utilitários
   09 - Seleção
   10 - Scrollbar
===================================================================*/


/*===================================================================
01 - RESET
===================================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
}

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

ul,
ol{
    margin:0;
    padding:0;
    list-style:none;
}

a{
    text-decoration:none;
}

button,
input,
textarea,
select{
    font:inherit;
}


/*===================================================================
02 - DESIGN TOKENS
===================================================================*/

:root{

    /* Fundo */

    --rb-bg:#041322;
    --rb-surface:#071A33;
    --rb-surface-light:#0B2748;

    /* Marca */

    --rb-primary:#1ED760;
    --rb-primary-hover:#18C652;

    /* Texto */

    --rb-white:#FFFFFF;
    --rb-text:#EAF1F8;
    --rb-text-light:#C9D5E3;
    --rb-text-muted:#91A4BA;

    /* Bordas */

    --rb-border:#173250;

    /* Tipografia */

    --rb-font:'Poppins',sans-serif;

    /* Layout */

    --rb-container:1200px;

    /* Espaçamentos */

    --rb-space-xs:8px;
    --rb-space-sm:16px;
    --rb-space-md:24px;
    --rb-space-lg:40px;
    --rb-space-xl:64px;

    /* Bordas */

    --rb-radius-sm:8px;
    --rb-radius-md:16px;
    --rb-radius-lg:24px;

    /* Sombras */

    --rb-shadow-sm:0 6px 18px rgba(0,0,0,.12);

    --rb-shadow-md:0 12px 30px rgba(0,0,0,.20);

    --rb-shadow-lg:0 24px 60px rgba(0,0,0,.30);

    /* Transições */

    --rb-transition:.30s ease;

}


/*===================================================================
03 - HTML / BODY
===================================================================*/

html{
    font-size:16px;
}

body{

    background:var(--rb-bg);

    color:var(--rb-text);

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

    line-height:1.6;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}


/*===================================================================
04 - TIPOGRAFIA BASE
===================================================================*/

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

    margin:0;

    font-weight:700;

    line-height:1.2;

}

p{

    margin:0 0 1rem;

}


/*===================================================================
05 - LINKS
===================================================================*/

a{

    color:var(--rb-primary);

    transition:var(--rb-transition);

}

a:hover{

    color:var(--rb-white);

}


/*===================================================================
06 - IMAGENS
===================================================================*/

picture{

    display:block;

}


/*===================================================================
07 - CONTAINER
===================================================================*/

.rb-container{

    width:min(92%,var(--rb-container));

    margin-inline:auto;

}


/*===================================================================
08 - UTILITÁRIOS
===================================================================*/

.rb-text-center{

    text-align:center;

}

.rb-hidden{

    display:none !important;

}

.rb-radius{

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

}

.rb-shadow{

    box-shadow:var(--rb-shadow-md);

}

.rb-bg-surface{

    background:var(--rb-surface);

}

.rb-bg-light{

    background:var(--rb-surface-light);

}


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

::selection{

    background:var(--rb-primary);

    color:var(--rb-bg);

}


/*===================================================================
10 - SCROLLBAR
===================================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--rb-bg);

}

::-webkit-scrollbar-thumb{

    background:var(--rb-primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--rb-primary-hover);

}