@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

:root {

    /* Brand */
    --unnic-color-brand-weni: #00DED2;
    --unnic-color-brand-weni-dark: #005E5A;
    --unnic-color-brand-weni-soft: #009E96;
    --unnic-color-brand-sec-dark: #2F343D;
    --unnic-color-brand-sec-soft: #808080;
    --unnic-color-brand-sec: #D0D0D0;
    
    /* Background */
    --unnic-color-background-solo: #E8F4F4;
    --unnic-color-background-sky: #F3FFFE;
    --unnic-color-background-grass: #F5F6F6;
    --unnic-color-background-carpet: #F9F9F9;
    --unnic-color-background-snow: #FFFFFF;

    /* Neutral */
    --unnic-color-neutral-black: #272B33;
    --unnic-color-neutral-darkest: #3B414D;
    --unnic-color-neutral-dark: #4E5666;
    --unnic-color-neutral-cloudy: #758199;
    --unnic-color-neutral-cleanest: #9CACCC;
    --unnic-color-neutral-clean: #E2E6ED;
    --unnic-color-neutral-soft: #E2E6ED;
    --unnic-color-neutral-lightest: #F4F6F8;
    --unnic-color-neutral-light: #F9F9F9;
    --unnic-color-neutral-snow: #FFFFFF;

    /* Feedback */
    --unnic-color-feedback-red: #FF4545;
    --unnic-color-feedback-green: #47D66F;
    --unnic-color-feedback-yellow: #FDBA38;
    --unnic-color-feedback-blue: #2856FC;
    --unnic-color-feedback-grey: #ECECEC;

    /* Auxiliary colors */
    --unnic-color-aux-blue: #00DED3;
    --unnic-color-aux-blue-rgb: 0, 224, 213;
    --unnic-color-aux-purple: #8416DE;
    --unnic-color-aux-orange: #F4691F;
    --unnic-color-aux-lemon: #CCDE0B;
    --unnic-color-aux-pink: #DE16BA;

    /* Font family */
    --unnic-font-family-primary: 'Aleo', serif;
    --unnic-font-family-secondary: Lato;

    /* Font weight */
    --unnic-font-weight-black: 900;
    --unnic-font-weight-bold: 700;
    --unnic-font-weight-regular: 400;
    --unnic-font-weight-light: 300;

    /* Font size */
    --unnic-font-size-body-sm: 8px;
    --unnic-font-size-body-md: 12px;
    --unnic-font-size-body-gt: 14px;
    --unnic-font-size-body-lg: 16px;

    --unnic-font-size-title-sm: 20px;
    --unnic-font-size-title-md: 24px;
    --unnic-font-size-title-lg: 32px;

    --unnic-font-size-h4: 40px;
    --unnic-font-size-h3: 48px;
    --unnic-font-size-h2: 56px;
    --unnic-font-size-h1: 72px;

    /* Line height */
    --unnic-line-height-small: 4px;
    --unnic-line-height-md: 8px;
    --unnic-line-height-large: 16px;

    /* Icon size */
    --unnic-icon-size-xl: 40px;
    --unnic-icon-size-lg: 32px;
    --unnic-icon-size-md: 24px;
    --unnic-icon-size-sm: 16px;
    --unnic-icon-size-xs: 12px;

    /* Avatar size */
    --unnic-avatar-size-lg: 120px;
    --unnic-avatar-size-md: 104px;
    --unnic-avatar-size-sm: 72px;
    --unnic-avatar-size-xs: 40px;
    --unnic-avatar-size-nano: 20px;

    /* Border radius */
    --unnic-border-radius-none: 0px;
    --unnic-border-radius-sm: 4px;
    --unnic-border-radius-md: 8px;
    --unnic-border-radius-lg: 16px;
    --unnic-border-radius-pill: 600px;

    /* Border width */
    --unnic-border-width-none: 0px;
    --unnic-border-width-thinner: 1px;
    --unnic-border-width-thin: 2px;
    --unnic-border-width-thick: 4px;

    /* Shadow levels */
    --unnic-shadow-level-near: 0px 4px 8 rgba(0, 0, 0, .12);
    --unnic-shadow-level-separated: 0px 8px 16 rgba(0, 0, 0, .08);
    --unnic-shadow-level-far: 0px 12px 32 rgba(0, 0, 0, .08);
    --unnic-shadow-level-further: 0px 20px 40 rgba(0, 0, 0, .06);
    
    /* Opacity levels */
    --unnic-opacity-level-darkest: 0.8;
    --unnic-opacity-level-dark: 0.64;
    --unnic-opacity-level-clarifying: 0.48;
    --unnic-opacity-level-clear: 0.32;
    --unnic-opacity-level-light: 0.16;

    /* Spacing */
    --unnic-inset-nano: 8px;
    --unnic-inset-xs: 12px;
    --unnic-inset-sm: 16px;
    --unnic-inset-md: 24px;
    --unnic-inset-lg: 32px;

    --unnic-squish-nano: 8px 16px;
    --unnic-squish-xs: 12px 16px;
    --unnic-squish-sm: 12px 24px;
    --unnic-squish-md: 16px 24px;
    --unnic-squish-lg: 24px 32px;

    --unnic-inline-nano: 4px;
    --unnic-inline-xs: 8px;
    --unnic-inline-sm: 16px;
    --unnic-inline-md: 24px;
    --unnic-inline-lg: 32px;
    --unnic-inline-xl: 40px;
    --unnic-inline-giant: 48px;
    --unnic-inline-xgiant: 64px;
    --unnic-inline-awesome: 80px;

    --unnic-spacing-stack-nano: 4px;
    --unnic-spacing-stack-xs: 8px;
    --unnic-spacing-stack-sm: 16px;
    --unnic-spacing-stack-md: 24px;
    --unnic-spacing-stack-lg: 32px;
    --unnic-spacing-stack-xl: 40px;
    --unnic-spacing-stack-giant: 48px;
    --unnic-spacing-stack-xgiant: 64px;
    --unnic-spacing-stack-awesome: 80px;
}