/**
 * @Root
 **/

/*------------------------------------*\
  FONTS
\*------------------------------------*/
@font-face {
    font-family: 'Ubuntu';
    src: url('./../../../core/assets/fonts/Ubuntu/Ubuntu-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu-Light';
    src: url('./../../../core/assets/fonts/Ubuntu/Ubuntu-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu-Medium';
    src: url('./../../../core/assets/fonts/Ubuntu/Ubuntu-Medium.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu-Bold';
    src: url('./../../../core/assets/fonts/Ubuntu/Ubuntu-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/*------------------------------------*\
  ROOT
\*------------------------------------*/
:root {
    /* Resolutions */
    --resolution-mobile-breakpoint: 1024px;

    /* Fonts */
    --font-family-theme: 'Ubuntu', sans-serif;
    --font-family-theme-light: 'Ubuntu-Light', sans-serif;
    --font-family-theme-medium: 'Ubuntu-Medium', sans-serif;
    --font-family-theme-bold: 'Ubuntu-Bold', sans-serif;

    /* Color: Default */
    --color-white: #fff;
    --color-black: #000;

    /* Color: Tons de Cinza */
    --color-gray: #a7a7a7;
    --color-gray-light: #f9f9fc;

    /* Color Fnx: Primary */
    --color-magenta: #d10d59;
    --color-magenta-light-20: #dd376c;
    --color-magenta-light-40: #e05a85;
    --color-magenta-dark-20: #a80a47;
    --color-magenta-dark-40: #8a083b;
    --color-magenta-alpha-20: rgba(209, 13, 89, 20%);
    --color-magenta-alpha-10: rgba(209, 13, 89, 10%);

    /* Color Fnx: Secondary */
    --color-purple: #a61644;
    --color-purple-dark-20: #801134;
    --color-purple-dark-40: #5A0C25;

    /* Color Fnx: Tertiary */
    --color-mustard: #f0ad2d;
    --color-mustard-dark-5: #ca9126;
    --color-mustard-dark-40: #ca9126;
    --color-mustard-dark-60: #a3761f;

    /* Color Fnx: Quatiary */
    --color-orange: #ea5820;
    --color-orang-light-40: #ff6023;
    --color-orange-dark-20: #c44a1b;
    --color-orange-dark-40: #9e3b16;
        
    /* Color PO: Field */
    --color-field-container-bottom-color-text-error: var(--color-danger);

    /* Color PO: Primary */
    --color-primary: var(--color-magenta);
    --color-primary-dark-20: var(--color-magenta-dark-20);
    --color-primary-dark-40: var(--color-magenta-dark-40);

    /* Color PO: Secondary */
    --color-secondary: var(--color-purple);
    --color-secondary-dark-20: var(--color-purple-dark-20);
    --color-secondary-dark-40: var(--color-purple-dark-40);

    /* Color PO: Tertiary */
    --color-tertiary: var(--color-mustard);
    --color-tertiary-dark-5: var(--color-mustard-dark-5);
    --color-tertiary-dark-40: var(--color-mustard-dark-40);
    --color-tertiary-dark-60: var(--color-mustard-dark-60);

    /* Color PO: Navbar */
    --color-navbar-color: var(--color-primary);

    /* Color PO: Toaster Error */
    /* --color-toaster-background-color-error: var(--color-danger-light-20);
    --color-toaster-border-color-error: var(--color-danger-light-40);
    --color-toaster-icon-background-color-error: var(--color-danger);
    --color-toaster-icon-color-error: var(--color-white); */

    /* Color PO: Toaster Info */
    /* --color-toaster-background-color-info: var(--color-info-light-20);
    --color-toaster-border-color-info: var(--color-info-light-40);
    --color-toaster-icon-background-color-info: var(--color-info);
    --color-toaster-icon-color-info: var(--color-white); */

    /* Color PO: Toaster Warning */
    /* --color-toaster-background-color-warning: var(--color-warning-light-20);
    --color-toaster-border-color-warning: var(--color-warning-light-40);
    --color-toaster-icon-background-color-warning: var(--color-warning);
    --color-toaster-icon-color-warning: var(--color-white); */

    /* Color PO: Info */
    /* --color-info: #0c9abe;
    --color-info-light-40: #0eadd6;
    --color-info-light-20: #9fe6f9; */
    /* Color PO: Success */
    /* --color-success: #00b28e; */
    /* Color PO: Warning */
    /* --color-warning: #f0ad2d;
    --color-warning-light-40: #f2b645;
    --color-warning-light-20: #fceed4; */
    /* Color PO: Danger */
    /* --color-danger: #ff6023;
    --color-danger-light-40: #ff7742;
    --color-danger-light-20: #ffe2d7;
    --color-danger-dark-5: #d9521e;
    --color-danger-dark-20: #d9521e;
    --color-danger-dark-40: #b34318; */

    /* Color PO: Palette */
    /* --color-01: #0c9abe;
    --color-02: #4f81bd;
    --color-03: #202c44;
    --color-04: #8064a2;
    --color-05: #ab43c8;
    --color-06: #ab4391;
    --color-07: #dd494c;
    --color-08: #f2b801;
    --color-09: #727982;
    --color-10: #00b050;
    --color-11: #00b28e;
    --color-12: #06a6a5; */

    /* Color PO: Brand */
    --color-brand-01-dark: var(--color-primary);

    /* Color Container */
    --background: var(--color-white);
    --border-radius: 4px;
    --border-width: 1px;
    --border-color: #dadedf;
    
    /* Button Primary: Default */
    --color-button-color-primary: var(--color-white);
    --color-button-background-color-primary: var(--color-primary);
    --color-button-border-primary: var(--color-primary);

    /* Button Primary: Hover */
    --color-button-color-primary-hover: var(--color-white);
    --color-button-background-color-primary-hover: var(--color-primary-dark-20);
    --color-button-border-primary-hover: var(--color-primary-dark-20);

    /* Button: Primary - Pressed */
    --color-button-color-primary-pressed: var(--color-white);
    --color-button-background-color-primary-pressed: var(--color-primary-dark-40);
    --color-button-border-color-primary-pressed: var(--color-primary-dark-40);
    --color-button-border-primary-pressed: var(--color-primary-dark-40);

    /* Button Danger: Default */
    /* --color-button-color-danger: var(--color-secondary);
    --color-button-background-color-danger: var(--color-transparent);
    --color-button-border-danger: var(--color-secondary); */

    /* Button Danger: Hover */
    /* --color-button-color-danger-hover: var(--color-white);
    --color-button-background-color-danger-hover: var(--color-secondary);
    --color-button-border-danger-hover: var(--color-secondary); */

    /* Button Danger: Pressed */
    /* --color-button-color-danger-pressed: var(--color-white);
    --color-button-background-color-danger-pressed: var(--color-secondary);
    --color-button-border-danger-pressed: var(--color-secondary); */

    /* Checkbox: Border Input */
    /* --color-checkbox-border-input: var(--color-primary);
    --color-checkbox-border-input-active: var(--color-primary);
    --color-checkbox-hover-active: var(--color-white); */

    /* Loading */
    /* --color-loading-color-label: var(--color-primary);
    --color-loading-icon-color-neutral: var(--color-primary);
    --color-loading-icon-color-primary: var(--color-primary); */

    /* Loading: Overlay */
    /* --color-loading-overlay-background-color-content: null;
    --color-loading-overlay-box-shadow-content: null; */

    /* Overlay: Background */
    /* --color-overlay-background-color-overlay: var(--color-white); */

    /* Modal: Overlay */
    /* --color-modal-color-overlay: var(--color-magenta-alpha-20); */
}

*:focus {
    outline: 0 !important;
}
/*------------------------------------*\
  BODY
\*------------------------------------*/
body {
    background-color: var(--color-gray-light);
}

/*------------------------------------*\
  HTML ELEMENTS
\*------------------------------------*/
h1 {
    font-family: var(--font-family-theme);
    font-size: 36px;
    font-weight: 400;

    color: var(--color-black);

    margin-top: -1%;
}

h2 {
    font-family: var(--font-family-theme-bold), sans-serif;
    font-size: 30px;
    font-weight: 600;

    color: var(--color-black);
}

h3 {
    font-family: var(--font-family-theme-medium), sans-serif;
    font-size: 22px;
    font-weight: 400;

    color: var(--color-black);
}

h4 {
    font-family: var(--font-family-theme-medium), sans-serif;
    font-size: 22px;
    font-weight: 500;

    text-transform: uppercase;
    text-align: center;

    color: var(--color-black);
    margin-bottom: 20px;
}

h6 {
    font-family: var(--font-family-theme-light), sans-serif;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;

    text-align: center;

    color: var(--color-black);
}

p {
    font-family: var(--font-family-theme-light), sans-serif;
    font-size: 20px;

    line-height: 30px;
}

ul li {
    list-style: none;
    font-family: var(--font-family-theme-light), sans-serif;
    font-size: 20px;

    line-height: 30px;
}

/*------------------------------------*\
  MEDIA QUERIES
\*------------------------------------*/
@media screen and (max-width: 1024px) {
    h1 {
        font-size: 24px;
        margin-top: 0%;
    }

    h2 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    p {
        font-size: 18px;
        line-height: 27px;
    }

    ul li {
        font-size: 18px;
        line-height: 27px;
    }
}