/* ---- Font Face ---- */

@font-face {
    font-family: 'Montserrat';
    src: url('../font/montserrat-variable.ttf');
    font-weight: 100 900;
    font-display: swap;
}

/* ---- Variables ---- */

:root {

    /* ---- Core Colors ---- */

    --harvest-midnight-25: #F9FAFB;
    --harvest-midnight-50: #F5F6F8;
    --harvest-midnight-100: #F0F1F5;
    --harvest-midnight-200: #E6E8ED;
    --harvest-midnight-300: #CCD0DB;
    --harvest-midnight-400: #B3B8C8;
    --harvest-midnight-500: #677292;
    --harvest-midnight-600: #34436D;
    --harvest-midnight-700: #011449;
    --harvest-midnight-800: #01103A;
    --harvest-midnight-900: #00081D;

    --evergreen-25: #F5F8F7;
    --evergreen-50: #E6EDEC;
    --evergreen-100: #CCDBD9;
    --evergreen-200: #99B8B4;
    --evergreen-300: #66948E;
    --evergreen-400: #337169;
    --evergreen-500: #004D43;
    --evergreen-600: #003931;
    --evergreen-700: #001F1B;
    --evergreen-800: #000F0D;

    --lime-25: #FCFEF5;
    --lime-50: #F7FDE1;
    --lime-100: #F2FDCE;
    --lime-200: #E5FC9E;
    --lime-300: #D8FB6D;
    --lime-400: #CBFA3D;
    --lime-500: #BFF90D;
    --lime-600: #99C70A;
    --lime-700: #4C6305;
    --lime-800: #263102;

    --rustic-coral-25: #FFFAF9;
    --rustic-coral-50: #FFF2F1;
    --rustic-coral-100: #FFDFDB;
    --rustic-coral-200: #FFC0B7;
    --rustic-coral-300: #FFA094;
    --rustic-coral-400: #FF8170;
    --rustic-coral-500: #FF614C;
    --rustic-coral-600: #CC4E3D;
    --rustic-coral-700: #923529;
    --rustic-coral-800: #33130F;

    --dairy-cream-25: #FDFDFB;
    --dairy-cream-50: #FCFCF9;
    --dairy-cream-100: #F9F8F3;
    --dairy-cream-200: #F7F6EF;
    --dairy-cream-300: #F3F1E7;
    --dairy-cream-400: #EFEDDF;
    --dairy-cream-500: #EBE8D7;
    --dairy-cream-600: #BCBAAC;
    --dairy-cream-700: #5E5D56;
    --dairy-cream-800: #2F2E2B;

    --gray-0: #FFFFFF;
    --gray-25: #FAFAFA;
    --gray-50: #F5F5F5;
    --gray-100: #EFEFEF;
    --gray-200: #E2E2E2;
    --gray-300: #B1B1B1;
    --gray-400: #838383;
    --gray-500: #646464;
    --gray-600: #505050;
    --gray-700: #323232;
    --gray-800: #1E1E1E;
    --gray-900: #000000;

    --emerald-25: #F6FBF8;
    --emerald-50: #EAF6EF;
    --emerald-100: #D5EDDF;
    --emerald-200: #ABDCBF;
    --emerald-300: #81cb9f;
    --emerald-400: #56ba7e;
    --emerald-500: #2DA95F;
    --emerald-600: #24874c;
    --emerald-700: #124326;
    --emerald-800: #092113;

    --green-50: #F1FCF1;
    --green-200: #90EC92;
    --green-500: #38B33B;
    --green-700: #1C591D;

    --red-50: #FEEFEF;
    --red-200: #EB8770;
    --red-500: #DE3712;
    --red-700: #9B260C;

    --yellow-50: #FFFAEB;
    --yellow-100: #FEF0C7;
    --yellow-200: #FEC84B;
    --yellow-400: #FBD022;
    --yellow-500: #F79009;
    --yellow-700: #B54708;

    --blue-50: #E3F0FC;
    --blue-100: #C5E5FF; /* This will get removed eventually because it is not intended. */
    --blue-200: #77B8F5;
    --blue-500: #1D8AEF;
    --blue-700: #0B375F;

    --purple-50: #F2EFFE;
    --purple-200: #D6CCFD;
    --purple-500: #7A5AF8;
    --purple-700: #372870;

    --teal-400: #56F4F3;
    --teal-700: #1B9190;

    /* ---- Derived Colors ---- */

    --text-primary: var(--harvest-midnight-700);
    --text-secondary: var(--harvest-midnight-600);
    --text-tertiary: var(--harvest-midnight-500);
    --text-inverse-primary: var(--harvest-midnight-25);
    --text-inverse-secondary: var(--harvest-midnight-100);
    --text-inverse-tertiary: var(--harvest-midnight-300);
    --text-link: var(--emerald-600);
    --text-button-primary: var(--gray-0);
    --text-red: var(--red-500);
    --input-text-disabled: var(--gray-500);
    --text-manditory-indicator: var(--rustic-coral-500);

    --icon-primary: var(--harvest-midnight-700);
    --icon-secondary: var(--harvest-midnight-600);
    --icon-tertiary: var(--harvest-midnight-500);
    --icon-inverse-primary: var(--gray-0);
    --icon-link: var(--emerald-600);
    --icon-success: var(--green-500);
    --icon-error: var(--red-500);
    --icon-warning: var(--yellow-500);

    --background-foreground: var(--harvest-midnight-25);
    --background-inverse: var(--gray-0);

    --border-default-weak: var(--gray-200);
    --border-default: var(--gray-300);
    --border-default-strong: var(--gray-500);
    --border-disabled: var(--gray-400);
    --border-error: var(--red-500);

    /* ---- Component Colors ---- */

    --input-text-default-label: var(--text-primary);
    --input-text-default-input-text: var(--text-secondary);
    --input-text-default-hint-text: var(--text-secondary);
    --input-text-default-border: var(--border-default);
    --input-text-default-filled: var(--white);

    --input-text-active-input-text: var(--text-primary);
    --input-text-active-border: var(--gray-500);

    --input-text-selected-border: var(--emerald-300);

    --input-text-disabled-input-text: var(--gray-600);
    --input-text-disabled-border: var(--border-default);
    --input-text-disabled-filled: var(--gray-50);

    --input-text-error-hint-text: var(--red-500);
    --input-text-error-border: var(--red-500);

    /* ---- Breakpoints ---- */

    /*
    Can't be used in media queries due to how css works, but are here for easy access.
    The names are relative to min-width e.g. becomes tablet at min-width 40rem.
    */
    --breakpoint-mobile: 0; /* 0px */
    --breakpoint-mobile-landscape: 24.375rem; /* 390px */
    --breakpoint-tablet: 40rem; /* 640px */
    --breakpoint-xs: 59.25rem; /* 948px */
    --breakpoint-sm: 80rem; /* 1280px */
    --breakpoint-md: 90rem; /* 1440px */
    --breakpoint-lg: 100rem; /* 1600px */
    --breakpoint-xl: 120rem; /* 1920px */

    /* ---- Typography ---- */

    --font-family: Montserrat, 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, serif;

    --font-size-2xs: 0.625rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --letter-spacing-none: normal;
    --letter-spacing-sm: -0.02em;
    --letter-spacing-lg: 0.05em;

    --line-height-sm: 1.2;
    --line-height-md: 1.3;
    --line-height-lg: 1.4;
    --line-height-xl: 1.5;

    /* ---- Icons ---- */

    --icon-xxs: 0.75rem;
    --icon-xs: 0.875rem;
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 2rem;

    /* ---- Spacing ---- */

    --spacing-00: 0.125rem;
    --spacing-01: 0.25rem;
    --spacing-02: 0.5rem;
    --spacing-03: 0.75rem;
    --spacing-04: 1rem;
    --spacing-05: 1.25rem;
    --spacing-06: 1.5rem;
    --spacing-07: 1.75rem;
    --spacing-08: 2rem;
    --spacing-09: 2.5rem;
    --spacing-10: 3rem;
    --spacing-11: 4rem;
    --spacing-12: 5rem;
    --spacing-13: 6rem;
    --spacing-14: 8rem;
    --spacing-15: 10rem;
    --spacing-16: 12rem;
    --spacing-17: 14rem;
    --spacing-18: 16rem;

    --spacing-n-00: -0.125rem;
    --spacing-n-01: -0.25rem;
    --spacing-n-02: -0.5rem;
    --spacing-n-03: -0.75rem;
    --spacing-n-04: -1rem;

    /* ---- Radius ---- */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 32px;
    --radius-pill: 120px;

    /* ---- Utility ---- */

    --disabled-opacity: 0.4;
}

/* ---- Reset ---- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: unset;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

button:focus {
    outline: none;
}

/* ---- Scrollbar ---- */

* {
    --scrollbar-color: var(--gray-200);
    --scrollbar-hover-color: var(--gray-300);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    /* Important for horizontal scrollbar. */
    /* noinspection CssUnknownTarget */
    background: transparent url('/img/transparent.png') repeat-y;
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gray-300);
}

/* ---- Font Family ---- */
body,
button,
input,
textarea {
    font-family: var(--font-family), serif;
}

.font-family-default {
    font-family: var(--font-family), serif;
}

/* ---- Typography ---- */

.heading-2 {
    font-size: var(--font-size-6xl);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-sm);
}
.heading-3 {
    font-size: var(--font-size-5xl);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-sm);
}
.heading-4 {
    font-size: var(--font-size-4xl);
    letter-spacing: var(--letter-spacing-sm);
    line-height: var(--line-height-sm);
}
.heading-5 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-md);
}
.heading-6 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-md);
}
.subtitle-1 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
}
.subtitle-2 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
}
.body-1 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-lg);
}
.body-2 {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-lg);
}
.caption-1 {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xl);
}
.caption-2 {
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-xl);
}

/* ---- Text Style ---- */

.font-regular {
    font-weight: var(--font-weight-regular);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semi-bold {
    font-weight: var(--font-weight-semi-bold);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-italic {
    font-style: italic;
}
.font-loose {
    letter-spacing: var(--letter-spacing-lg);
}

.text-capitalize {
    text-transform: capitalize;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-lowercase {
    text-transform: lowercase;
}

/* ---- Text Colors ---- */

.text-primary {
    color: var(--text-primary);
}
.text-secondary {
    color: var(--text-secondary);
}
.text-tertiary {
    color: var(--text-tertiary);
}
.text-inverse-primary {
    color: var(--text-inverse-primary);
}
.text-inverse-secondary {
    color: var(--text-inverse-secondary);
}
.text-inverse-tertiary {
    color: var(--text-inverse-tertiary);
}

/* ---- Icons ---- */

.icon-xxs {
    font-size: var(--icon-xxs);
}
.icon-xs {
    font-size: var(--icon-xs);
}
.icon-sm {
    font-size: var(--icon-sm);
}
.icon-md {
    font-size: var(--icon-md);
}
.icon-lg {
    font-size: var(--icon-lg);
}
.icon-xl {
    font-size: var(--icon-xl);
}

.icon-primary {
    color: var(--icon-primary);
}
.icon-secondary {
    color: var(--icon-secondary);
}
.icon-tertiary {
    color: var(--icon-tertiary);
}
.icon-inverse-primary {
    color: var(--icon-inverse-primary);
}