@import url('reset.css');
@import url('header.css');
@import url('modal.css');
@import url('user-field.css');
@import url('card-section.css');
@import url('footer.css');

:root{
   --family-title: 'Sacramento', cursive;
   --family-text: 'Quicksand', sans-serif;

   /* --size-tiny:clamp(.75rem, 1.8vw, 3rem);
   --size-small:clamp(1rem, 2.1vw, 3.5rem);
   --size-medium:clamp(1.25rem, 2.6vw, 4rem);
   --size-large:clamp(1.5rem, 3.2vw, 4.5rem);
   --size-title:clamp(2rem, 3.9vw, 5.5rem); */
   --size-tiny: clamp(0.75rem, calc(0.68rem + 0.36vw), 1.25rem);
   --size-small: clamp(0.94rem, calc(0.79rem + 0.74vw), 1.97rem);
   --size-medium: clamp(1.17rem, calc(1.02rem + 0.75vw), 2.22rem);
   --size-large: clamp(1.47rem, calc(1.32rem + 0.73vw), 2.49rem);
   --size-title: clamp(1.83rem, calc(1.69rem + 0.69vw), 2.80rem);

   --color1: var(--color1-light);
   --color2: var(--color2-light);
   --color3: var(--color3-light);   
   --contrast: var(--black);
   --contrast-transparent: var(--black-transparent);
   --gradient: var(--gradient-light);

   --color1-light: #C2929D;
   --color2-light: #BF0637;
   --color3-light: #D9843B;   
   --black: #23261D;
   --black-transparent: #23261Dbb;
   --gradient-light: linear-gradient(180deg, #F2F2F0 0%, #C2929D 175%);


   --color1-dark: #223C3F;
   --color2-dark: #597C7C;
   --color3-dark: #5B2E70;
   --white: #F2F2F0;
   --white-transparent: #F2F2F0bb;
   --gradient-dark: linear-gradient(180deg, #23261D 0%, #223C3F 175%);

   --side-spacing: 5vw;
}

*{
   box-sizing: border-box;   
}

:is(html, body){
   min-height: 100%;
}

body{
   background-image: var(--gradient);
   font-family: var(--family-text);
}


body, 
body *,
svg > *{
   transition: background-color 1s ease, 
   background-image 1s ease, 
   stroke 1s ease, 
   fill 1s ease, 
   color 1s ease;
}

.dark{
   --color1: var(--color1-dark);
   --color2: var(--color2-dark);
   --color3: var(--color3-dark);   
   --contrast: var(--white);
   --contrast-transparent: var(--white-transparent);
   --gradient: var(--gradient-dark);
}

.avoid-scroll{
   overflow: hidden;
}

::selection{
   color: var(--color2);
   background-color: var(--color3) ;
}

html{
   scrollbar-color: var(--color1) var(--color2);
   scrollbar-width: 1vw; /*Melhorar medida*/
}

::-webkit-scrollbar{
    width: calc(.5em + .5vw); /*Melhorar medida*/
    background: var(--color1);
}

::-webkit-scrollbar-track{
   background-color: var(--color2);
   border-radius: calc(.25em + .25vw);   
   box-shadow: inset 0 0 2px var(--contrast);
   margin-block: .25em;
}

::-webkit-scrollbar-thumb{
    background-image: var(--gradient);
    outline: none;
    border-radius: calc(.25em + .25vw);
}

.coming-soon{
   filter: opacity(0.35) brightness(0.95);
}

.coming-soon::after{
   content: 'Upcoming feature';
   color: var(--contrast-transparent);
   background-image: var(--gradient);
   position: absolute;
   font-size: var(--size-tiny);
   padding: .25em 1em; 
   filter: opacity(0);
   z-index: -1;
   text-align: center;
   line-height: 1.2;
   border-radius: calc(var(--size-tiny) * .6);

}

.coming-soon-left::after{
   
   top: calc(-3.5 * var(--size-tiny));
   left: 50%;
   
}

.coming-soon-right::after{

   bottom: calc(-3.5 * var(--size-tiny));
   right: 50%;

}

.coming-soon:hover{
   filter: opacity(1) brightness(1);
}

.coming-soon:hover::after{
   filter: opacity(1);
   z-index: 0;
}