/** CONFIG VARIABLES **/

/* Colors */
:root {
    --color-brand: #99CCEE;
    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-primary-100: #FBFCFF;
    --color-primary-200: #E7F2FE;
    --color-primary-300: #CBE6FC;
    --color-primary-400: var(--color-brand);
    --color-primary-500: #6AB4E6;
    --color-primary-600: #276296;
    --color-primary-700: #1C4A72;
    --color-primary-800: #113350;
    --color-primary-900: #061C30;

    --color-secondary-100: #FFFBFF;
    --color-secondary-200: #FFF3E1;
    --color-secondary-300: #FFE0B5;
    --color-secondary-400: #FFB656;
    --color-secondary-500: #FF9922;
    --color-secondary-600: #84511A;
    --color-secondary-700: #643D11;
    --color-secondary-800: #462A09;
    --color-secondary-900: #2A1703;

    --color-tertiary-100: #FBFCFF;
    --color-tertiary-200: #E7F3FE;
    --color-tertiary-300: #D6E4F2;
    --color-tertiary-400: #BAC8D6;
    --color-tertiary-500: #9FADBB;
    --color-tertiary-600: #53606C;
    --color-tertiary-700: #3B4854;
    --color-tertiary-800: #25333D;
    --color-tertiary-900: #0F1D27;

    --color-neutral-100: #FAFAFA;
    --color-neutral-200: #F6F6F6;
    --color-neutral-300: #EEEEEE;
    --color-neutral-400: #D4D4D4;
    --color-neutral-500: #888888;
    --color-neutral-600: #555555;
    --color-neutral-700: #333333;
    --color-neutral-800: #222222;
    --color-neutral-900: #111111;

    --color-success-400: #C6EF9D;
    --color-success-500: #559E38;
    --color-success-600: #0E3900;

    --color-error-400: #FFDAD5;
    --color-error-500: #C22C24;
    --color-error-600: #690003;
}


/* Shades */
:root {
    --shade-black-5:   rgba(0, 0, 0, 0.05);
    --shade-black-10:  rgba(0, 0, 0, 0.1);
    --shade-black-15:  rgba(0, 0, 0, 0.15);
    --shade-black-20:  rgba(0, 0, 0, 0.2);
    --shade-black-30:  rgba(0, 0, 0, 0.3);
    --shade-black-60:  rgba(0, 0, 0, 0.6);
    --shade-black-70:  rgba(0, 0, 0, 0.7);
    --shade-black-80:  rgba(0, 0, 0, 0.8);
    --shade-black-90:  rgba(0, 0, 0, 0.9);
    --shade-black-100: var(--color-black);

    --shade-white-5:   rgba(255, 255, 255, 0.05);
    --shade-white-10:  rgba(255, 255, 255, 0.1);
    --shade-white-15:  rgba(255, 255, 255, 0.15);
    --shade-white-20:  rgba(255, 255, 255, 0.2);
    --shade-white-60:  rgba(255, 255, 255, 0.6);
    --shade-white-70:  rgba(255, 255, 255, 0.7);
    --shade-white-80:  rgba(255, 255, 255, 0.8);
    --shade-white-90:  rgba(255, 255, 255, 0.9);
    --shade-white-100: var(--color-white);

    --shade-brand-5:   rgba(153, 204, 238, 0.05);
    --shade-brand-10:  rgba(153, 204, 238, 0.1);
    --shade-brand-15:  rgba(153, 204, 238, 0.15);
    --shade-brand-20:  rgba(153, 204, 238, 0.2);
    --shade-brand-25:  rgba(153, 204, 238, 0.25);
    --shade-brand-30:  rgba(153, 204, 238, 0.3);
    --shade-brand-40:  rgba(153, 204, 238, 0.4);
    --shade-brand-50:  rgba(153, 204, 238, 0.5);
    --shade-brand-60:  rgba(153, 204, 238, 0.6);
}


/* Font Sizes */
:root {
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-36: 36px;
    --font-size-46: 46px;
    --font-size-60: 60px;
}


/* Font Weights */
:root {
    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
}


/* Line Heights */
:root {
    --line-height-sm: 1;
    --line-height-md: 1.2;
    --line-height-lg: 1.5;
}


/* Letter Spacing */
:root {
    --letter-spacing-xxs:  -1px;
    --letter-spacing-xs:   -0.5px;
    --letter-spacing-sm:   -0.25px;
    --letter-spacing-md:   0px;
    --letter-spacing-lg:   0.15px;
    --letter-spacing-xl:   0.25px;
    --letter-spacing-xxl:  0.4px;
    --letter-spacing-xxxl: 1.25px;
}


/* Spacing */
:root {
    --space-1:      8px;
    --space-half:   calc(var(--space-1) / 2);
    --space-1-half: calc(var(--space-1) + var(--space-half));
    --space-2:      calc(var(--space-1) * 2);
    --space-3:      calc(var(--space-1) * 3);
    --space-4:      calc(var(--space-1) * 4);
    --space-5:      calc(var(--space-1) * 5);
    --space-6:      calc(var(--space-1) * 6);
    --space-7:      calc(var(--space-1) * 7);
    --space-8:      calc(var(--space-1) * 8);
    --space-9:      calc(var(--space-1) * 9);
    --space-10:     calc(var(--space-1) * 10);
}


/* Sizes */
:root {
    --size-1:      8px;
    --size-half:   calc(var(--size-1) / 2);
    --size-1-half: calc(var(--size-1) + var(--size-half));
    --size-2:      calc(var(--size-1) * 2);
    --size-3:      calc(var(--size-1) * 3);
    --size-4:      calc(var(--size-1) * 4);
    --size-5:      calc(var(--size-1) * 5);
    --size-6:      calc(var(--size-1) * 6);
    --size-7:      calc(var(--size-1) * 7);
    --size-8:      calc(var(--size-1) * 8);
    --size-9:      calc(var(--size-1) * 9);
    --size-10:     calc(var(--size-1) * 10);
}


/* Containers */
:root {
    --container-sm: 320px;
}


/* Radii */
:root {
    --border-radius-sm: var(--space-half);
    --border-radius-md: var(--space-1);
}