@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
    font-size: 16px;
    /*COLORS*/
    --primary-blue: #4692F5;
    --primary-blue-faded: rgba(70,146,245,0.6);
    --muted-blue: #60A2D5;
    --muted-light-blue: #A1CCE7;
    --vivid-blue: #0C79E4;
    --vivid-blue-rgb: 12, 121, 228;
    --midnight-blue: #1F213C;
    --navy-blue: #1C4694;
    --light-charcoal: #576271;
    --light-blue: #82D8F6;
    --light-blue-faded: rgba(130, 216, 246, 0.1);
    --light-blue-half-faded: rgba(130, 216, 246, 0.5);
    --coral-red: #FF3A52;
    --green: #6ACE3C;
    --dark-green: #418920;
    --dark-red: #E22A41;
    --yellow: #FFBA3A;
    --orange: #FF973A;
    --black: #18191e;
    --gray100: #2B2D32;
    --gray90: #3C3D44;
    --gray80: #41424B;
    --gray70: #6A6D7B;
    --gray60: #92949E;
    --gray50: #B1B3BC;
    --gray40: #d1d5da;
    --gray30: #ECEFF2;
    --gray30-faded: rgba(237, 240, 243, 1);
    --gray50-faded: rgba(177, 179, 188, .3);
    --gray20: #F6F8FA;
    --gray10: #FAFCFE;
    --white: #FFFFFF;


    /*FONT*/
    --font-family: Inter, Helvetica, sans-serif;
    --font-family-heading: GT-America , Helvetica, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;

    --fz-1: 2rem;
    --fz-2: 1.75rem;
    --fz-3: 1.5rem;
    --fz-4: 1.25rem;
    --fz-5: 1.125rem;
    --fz-6: 1rem;
    --fz-7: 0.875rem;
    --fz-8: 0.75rem;
    --fz-9: 0.625rem;
    --base-line-height: 1.5;

    --heading-1: normal var(--font-weight-regular) var(--fz-1)/2.5rem var(--font-family-heading);
    --heading-2: normal var(--font-weight-regular) var(--fz-2)/2.25rem var(--font-family-heading);
    --heading-3: normal var(--font-weight-medium) var(--fz-3)/1.875rem var(--font-family-heading);
    --heading-4: normal var(--font-weight-medium) var(--fz-4)/1.625rem var(--font-family-heading);
    --heading-5: normal var(--font-weight-medium) var(--fz-5)/1.5rem var(--font-family-heading);
    --heading-6: normal var(--font-weight-medium) var(--fz-6)/1.375rem var(--font-family-heading);
    --heading-7: normal var(--font-weight-medium) var(--fz-7)/1.25rem var(--font-family-heading);
    --base-fz-1: var(--fz-6);
    --base-fz-2: var(--fz-7);
    --base-fz-3: var(--fz-8);
    --base-fz-4: var(--fz-9);


    /*Social Icons*/
    --icon-social-fz-1: 18px;
    --icon-social-fz-2: 20px;
    --icon-social-fz-3: 24px;
    --icon-social-fz-4: 36px;
    --icon-social-fz-5: 48px;


    /*UI, metric & content type icons*/
    --icon-fz-1: 12px;
    --icon-fz-2: 14px;
    --icon-fz-3: 16px;
    --icon-fz-4: 18px;
    --icon-fz-5: 20px;
    --icon-fz-6: 24px;


    /*Theme*/

    /* Primary interactive color, Primary buttons, Primary links, Selected elements, Active elements, Accent icons */
    --primary-color: var(--primary-blue);


    /*TEXT*/
    --text: var(--black);
    --text-secondary: var(--gray70);
    --text-tertiary: var(--gray60);
    --text-active: var(--primary-blue);
    --text-active-secondary: var(--white);
    --text-hover-rgb: var(--vivid-blue-rgb);
    --text-hover: rgb(var(--text-hover-rgb));
    --text-hover-secondary: var(--black);
    --text-inverse: var(--white);
    --text-inverse-secondary: var(--gray60);
    --text-accent: var(--navy-blue);
    --text-disabled: var(--gray40);
    --text-disabled-secondary: var(--gray50);


    /*BG*/
    --background-page: var(--gray20);
    --background-surface: var(--white);
    --background-surface-secondary: var(--gray30);
    --background-navbar: var(--midnight-blue);
    --background-inverse: var(--black);
    --background-inverse-secondary: var(--gray100);

    --background-inverse-tertiary: var(--gray80);

    --background-active: var(--primary-blue);
    --background-active-secondary: var(--primary-blue-faded);

    --background-hover: var(--vivid-blue);
    --background-hover-secondary: var(--gray50-faded);

    --background-hover-row: var(--light-blue-faded); /* [DEPRECATED] */

    --background-hover-inverse: rgba(225,225,225, 0.4);

    --background-overlay: rgba(65, 66, 75, 0.7);
    --background-overlay-secondary: rgba(255, 255, 255, 0.9);

    --background-disabled: var(--gray30);

    --background-toast: var(--midnight-blue);

    --background-skeleton: var(--gray30);
    --background-skeleton-secondary: var(--gray40);

    --background-scroll: var(--gray40);

    --background-surface-transparent: rgba(255, 255, 255, 0);
    --background-surface-secondary-transparent: rgba(250, 250, 250, 0);
    --background-inverse-transparent: rgba(0, 0, 0, 0);
    --background-inverse-secondary-transparent: rgba(35, 35, 35, 0);


    /*BORDERS*/
    --border: var(--gray40);
    --border-secondary: var(--gray30);
    --border-tertiary: var(--gray50);
    --border-active: var(--primary-blue);
    --border-hover: var(--vivid-blue);
    --border-disabled: var(--gray30);
    --border-inverse: var(--white);
    --border-inverse-secondary: var(--gray70);
    --border-quaternary: var(--gray70);
    --border-quaternary-active: var(--black);

    --border-style-default: 1px solid var(--border);


    /*ICONS*/
    --icon: var(--black);
    --icon-secondary: var(--gray70);
    --icon-inverse: var(--white);
    --icon-inverse-secondary: var(--gray70);
    --icon-active: var(--primary-blue);
    --icon-active-secondary: var(--white);
    --icon-disabled: var(--gray40);
    --icon-disabled-secondary: var(--gray50);


    /*SUPPORT*/
    --support-info: var(--muted-blue);
    --support-info-secondary: var(--muted-light-blue);

    --support-error: var(--coral-red);
    --support-error-secondary: var(--dark-red);

    --support-success: var(--dark-green);
    --support-success-secondary: var(--green);

    --support-warning: var(--orange);
    --support-warning-secondary: var(--yellow);


    /*SHADOWS*/
    --shadow-default: 0 2px 4px 0 rgba(0,0,0,0.05);
    --shadow-card: 0 2px 4px 0 rgba(0,0,0,0.10);
    --shadow-modal: 0 1px 10px 0 rgba(0,0,0,0.15);
    --shadow-menu: 2px 2px 4px 0 rgba(0,0,0,0.15);
    --shadow-hover: 0 2px 12px 0 rgba(0,0,0,0.20);

    /*CHARTS*/
    --chart: var(--light-blue);
    --chart-faded: var(--light-blue-half-faded);

    /*FACEBOOK*/
    --facebook-btn-background: #164689;
    --facebook-btn-text: var(--white);

    /*MISC ( border-radiuses)*/

    /*TODO*/
}