@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /* ARKE DESIGN */
    /* Headings */
    --font-head-18-semiBold: 600 18px/110% "Manrope", sans-serif;
    --font-head-18-medium: 500 18px/130% "Manrope", sans-serif;
    --font-head-24-regular: 400 24px/130% "Manrope", sans-serif;

    /* Body */
    --font-body-24-bold: 700 24px/110% "Manrope", sans-serif;
    --font-body-18-bold: 700 18px/110% "Manrope", sans-serif;
    --font-body-18-semiBold: 600 18px/110% "Manrope", sans-serif;
    --font-body-18-medium: 500 18px/130% "Manrope", sans-serif;
    --font-body-16-bold: 700 16px/110% "Manrope", sans-serif;
    --font-body-16-regular: 400 16px/110% "Manrope", sans-serif;
    --font-body-14-bold: 700 14px/120% "Manrope", sans-serif;
    --font-body-14-regular: 400 14px/130% "Manrope", sans-serif;
    --font-body-12-regular: 400 12px/130% "Manrope", sans-serif;
    --font-body-12-bold: 700 12px/130% "Manrope", sans-serif;

    --font-body-10-regular: 400 10px/130% "Manrope", sans-serif;

    /* Buttons */
    --font-button-14-semiBold: 600 14px/110% "Manrope", sans-serif;
    --font-button-14-semiBold-sub: 600 14px/110% "Manrope", sans-serif;

    /* Captions */
    --font-caption-16-bold: 700 16px/110% "Manrope", sans-serif;
    --font-caption-14-regular: 400 14px/130% "Manrope", sans-serif;
    --font-caption-12-regular: 400 12px/110% "Manrope", sans-serif;

    /* Primary Colors */
    --primary-color-base: #06A7CA;
    --primary-color-500: #05C3DD;
    --primary-color-400: #2FDEF5;
    --primary-color-300: #C3F3FF;
    --primary-color-baseopacity-2: #06A7CA2A;
    --primary-color-baseopacity-1: #06A7CA1A;
    --primary-color-baseopacity-0: #06A7CA03;

    /* Secondary Colors */
    --secondary-color-base: #539828;
    --secondary-color-500: #70BE3F;
    --secondary-color-400: #87CD5B;
    --secondary-color-300: #E1B8F5;
    --secondary-color-400-opacity-0: #CB69FB00;

    /* Gray Colors */
    --gray-color-600: #090c0c;
    --gray-color-500: #0D1112;
    --gray-color-400: #1C2325;
    --gray-color-300: #2A373B;
    --gray-color-200: #8493A5;
    --gray-color-100: #CBD5E0;
    --gray-color-500-opacity-05: #0d1112be;
    --gray-color-500-opacity-0: #0D1112B3;
    --gray-color-500-opacity-1: #0D111299;

    /* Black Colors */
    --black-color-full: #0D1011;
    --white-color-full: #FAFAFA;

    --red-color-alert: #EC4747;
    --red-color-danger: #FF0000;
    --warning-color: #FFA500;

    /* Branding */
    --pantone-blackened-blue: #0D171A;
    --pantone-311-c: #05C3DD;
    --pantone-2191-c: #00A3E1;
    --pantone-656-u: #E2EAF2;

    --default-100: var(--white-color-full);

    /* ========================== */
    /* OLD VERSION */
    /* --primary-color-100: #49FFFD;
    --primary-color-200: #38E9FA;
    --primary-color-300: #23CFFF;
    --primary-color-400: #2BC6EE;
    --primary-color-500: #23CFFF;
    --primary-color-600: #19B5E6;
    --primary-color-700: #1499C9;

    --secondary-color-100: #1E2B39;
    --secondary-color-200: #374552;
    --secondary-color-300: #3D4C5B; 
    --secondary-color-400: #3F5A6C;
    --secondary-color-500: #587b93;

    --default-100: #FDFFFF;
    --default-200: #F6FBF7;
    --default-300: #FAFDF5;
    --default-400: #DDEEE6;
    --default-500: #ACC2C9;

    --gray-100: #F6FBF7;
    --gray-200: #DDEEE6;
    --gray-300: #ACC2C9;
    --gray-400: #3D4C5B;
    --gray-500: #374552;
    --gray-600: #3F5A6C; */


    /* Card */
    --card-bg: var(--default-300);
    --card-border-color: var(--secondary-color-100);

    /* Input */
    --input-border-color: var(--secondary-color-100);
    --input-color: var(--secondary-color-100);
    --input-placeholder-color: var(--secondary-color-100);

    /* Modal */
    --modal-bg: var(--secondary-color-100);
    --modal-border-color: var(--secondary-color-500);
}

* {
    box-sizing: border-box;
    font-family: 'Manrope';
}

body {
    background: var(--black-color-full);
    min-height: 100vh;
    margin: 0;
    background-attachment: fixed;
    background-size: 100vw 100vh;
}

a {
    text-decoration: none;
    color: var(--secondary-color-400);
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9,
p,
span,
label {
    margin: 0px;
}

/* Estilização da barra de rolagem */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-color-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-500);
}

.page-container {
    padding: 32px;
    height: 100%;
    min-height: 80vh;
}