@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');

/* #region Color Palette */
:root {
    --blue-100: #d8dee9;
    --blue-200: #b2bed4;
    --blue-300: #8c9fbf;
    --blue-400: #6581aa;
    --blue-500: #3a6495;    
    --blue-600: #2d5177;
    --blue-700: #223f5a;
    --blue-800: #1a2d3e;
    --blue-900: #121c25;

    --gray-900: #2A2A2A;
    --gray-800: #454545;
    --gray-700: #646464;
    --gray-600: #838383;
    --gray-500: #929292;
    --gray-400: #c9c9c9;
    --gray-300: #d3d3d3;
    --gray-200: #E0E0E0;
    --gray-100: #F8F8F8;
    --white: #ffffff;
    --black: var(--gray-900);

    --orange-100: #ffe1d0;
    --orange-200: #ffc3a3;
    --orange-300: #f9a577;
    --orange-400: #ef874c;
    --orange-500: #e3691c;
    --orange-600: #be4b00;
    --orange-700: #9a2c00;
    --orange-800: #780400;
    --orange-900: #590000;

    --red-100: #ffddd4;
    --red-200: #ffbaaa;
    --red-300: #ff9781;
    --red-400: #f6735a;
    --red-500: #EB4A34;
    --red-600: #c8271b;
    --red-700: #a50000;
    --red-800: #830000;
    --red-900: #640000;

    --yellow-100: #fff4d7;
    --yellow-200: #ffe9b0;
    --yellow-300: #ffde88;
    --yellow-400: #ffd45f;
    --yellow-500: #fdca2a;
    --yellow-600: #c99d00;
    --yellow-700: #977200;
    --yellow-800: #694a00;
    --yellow-900: #442400;
    
    --green-100: #dcf3df;
    --green-200: #b8e6bf;
    --green-300: #92d9a0;
    --green-400: #69cc81;
    --green-500: #33be63;
    --green-600: #009841;
    --green-700: #007420;
    --green-800: #005100;
    --green-900: #003100;
}
/* #endregion */

/* #region Theme Tokens */
:root {
    --theme-primary: var(--blue-500);
    --theme-secondary: var(--blue-450);
    --theme-tertiary: var(--yellow-500);
    /* Shades */
    --theme-primary-lightest: var(--blue-100);
    --theme-primary-light: var(--blue-300);
    --theme-primary-dark: var(--blue-700);
    --theme-primary-darkest: var(--blue-900);
    --theme-tertiary-light: var(--yellow-200);
    --theme-tertiary-dark: var(--yellow-800);
    --theme-highlight: var(--blue-350);
    --theme-link: var(--orange-500);
    --theme-link-interact: var(--orange-800);
    --theme-link-active: var(--blue-350);
}
/* #endregion */

/* #region System Colors */
:root {
    --success: var(--green-500);
    --success-light: var(--green-200);
    --success-dark: var(--green-800);
    --caution: var(--yellow-500);
    --caution-light: var(--yellow-200);
    --caution-dark: var(--yellow-800);
    --warning: var(--orange-500);
    --warning-light: var(--orange-200);
    --warning-dark: var(--orange-800);
    --danger: var(--red-500);
    --danger-light: var(--red-200);
    --danger-dark: var(--red-800);
    --info: var(--blue-500);
    --info-light: var(--blue-300);
    --info-dark: var(--blue-700);
    --neutral: var(--gray-600);
    --neutral-light: var(--gray-200);
    --neutral-dark: var(--gray-800);
    --highlight: var(--blue-100);
    --border: var(--gray-200);
}
/* #endregion */

/* #region Type Scale */
:root {
    /*  !! Assumes font-size: 100%/16px !! */
    --text-base: 1em;
    --text-xs: 0.64rem;
    --text-s: 0.8rem;
    --text-m: 1rem;
    --text-l: 1.25rem;
    --text-xl: 1.563rem;
    --text-xxl: 1.953rem;
    --text-xxxl: 2.441rem;
    --text-xxxxl: 3.052rem;
}
/* #endregion */

/* #region Typography */
:root {
    --font: 'Catamaran', helvetica, arial, sans-serif;
    --font: 'Poppins', helvetica, arial, sans-serif;
    --font: 'Fira Sans', helvetica, arial, sans-serif;
    --font: 'Oxygen', helvetica, arial, sans-serif;
    --font-color: var(--gray-900);
    --font-inverse: var(--white);
    --font-size: var(--text-base);
    --font-weight-light: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
}
/* #endregion */

/* #region Spacing */
:root {
    --space: 16px;
    --space-0: 0;
    --space-xxs: calc(var(--space) * .125); /* 2px */
    --space-xs: calc(var(--space) * .25); /* 4px */
    --space-s: calc(var(--space) * .50); /* 8px */
    --space-m: var(--space); /* 16px */
    --space-l: calc(var(--space) * 1.50); /* 24px */
    --space-xl: calc(var(--space) * 2.00); /* 32px */
    --space-xxl: calc(var(--space) * 4.00); /* 64px */
}
/* #endregion */