:root {
  /* Brand Colors - Primary and Secondary */
  --color-indigo: #102b45;

  /* Interleasing Indigo: RGB 16 43 69 / HEX #102B45 */
  --color-sky: #45e3d2;

  /* Interleasing Sky: RGB 69 227 210 / HEX #45E3D2 */
  --color-mist: #7d94aa;

  /* Interleasing Mist: RGB 112 148 170 / HEX #7D94AA */
  --color-ochre: #a77b15;

  /* Interleasing Ochre: RGB 167 123 21 / HEX #A77B15 */
  --color-gum: #45634f;

  /* Interleasing Gum: RGB 69 99 79 / HEX #45634F */
  --color-plum: #895c77;

  /* Interleasing Plum: RGB 137 92 119 / HEX #895C77 */
  --color-grass: #a2b427;

  /* Interleasing Grass: RGB 162 180 39 / HEX #A2B427 */
  --color-blue: #339;

  /* Interleasing Blue: RGB 51 51 153 / HEX #333399 */

  /* Neutral colors */
  --color-white: #fff;
  --color-sky-blue: #4ac7e9;
  --color-black: #000;
  --color-grey: #777;
  --color-grey-alt: #4f575e;
  --color-dark-grey: #4f575e;
  --color-light-grey: #f2f2f2;
  --color-medium-grey: #f7f7f7;
  --color-error: #bb2a2e;

  /* Functional colors */
  --color-brand: var(--color-indigo);
  --color-primary: var(--color-indigo);
  --color-secondary: var(--color-sky);
  --color-hover: var(--color-indigo);
  --link-color: var(--color-primary);
  --link-hover-color: var(--color-brand);
  --color-disclaimer: #a2a2a2;
  --border-color: #ddd;
  --border-color-card: #ccc;
  --border-color-alt: #dee2e6;
  --background-color: var(--color-white);
  --bg-input-number-calculator: #f8f9fa;
  --bg-color-paper: #f7f7f7;
  --bg-color-calculator: var(--color-indigo);
  --bg-color-savingscard: var(--color-indigo);
  --bg-color-neutral: var(--color-medium-grey);
  --bg-button: var(--color-brand);
  --bg-button-hover: var(--color-indigo);
  --color-active-outline: #bccbd9;
  --color-focus-outline: #ffd337;
  --color-disabled: #adb5bd;
  --button-bg-color: linear-gradient(90deg, var(--color-indigo), var(--color-indigo));
  --button-hover-bg-color: var(--color-indigo);
  --notification-text-color: var(--color-dark-grey);
  --asterisk-required-color: var(--color-primary);
  --bg-color-green: var(--color-primary);

  /* Font */
  --font-size-xxl: 4rem;

  /* 64px */
  --font-size-xxl-alt: 3.5rem;

  /* 56px */
  --font-size-xl: 3rem;

  /* 48px */
  --font-size-xl-alt: 2.875rem;

  /* 46px */
  --font-size-lg: 2.5rem;

  /* 40px */
  --font-size-lg-alt: 2.375rem;

  /* 38px */
  --font-size-lg-alt-s: 2.25rem;

  /* 36px */
  --font-size-l-alt: 2rem;

  /* 32px */
  --font-size-l-m-alt: 1.75rem;

  /* 28px */
  --font-size-l-m: 1.625rem;

  /* 26px */
  --font-size-l: 1.5rem;

  /* 24px */
  --font-size-m-alt: 1.375rem;

  /* 22px */
  --font-size-m: 1.25rem;

  /* 20px */
  --font-size-s-alt: 1.375rem;

  /* 22px */
  --font-size-s: 1.125rem;

  /* 18px */
  --font-size-xs: 1rem;

  /* 16px */
  --font-size-xs-alt: 0.875rem;

  /* 14px */
  --font-size-xxs: 0.75rem;

  /* 12px */

  /* Body font */
  --font-family-body: 'Source Sans 3', 'Arial', sans-serif;
  --font-weight-light: 300;
  --font-weight-body: 400;
  --font-weight-body-alt: 400;
  --font-color-body: var(--color-grey);
  --line-height-body: 1.6;
  --line-height-xl: 3.0625rem;

  /* 49px */
  --line-height-xl-alt: 2.8125rem;

  /* 45px */
  --line-height-lg: 2.5rem;

  /* 40px */
  --line-height-m-l-alt: 2.1875rem;

  /* 35px */
  --line-height-m-l: 2rem;

  /* 32px */
  --line-height-m: 1.875rem;

  /* 30px */
  --line-height-s-m: 1.75rem;

  /* 28px */
  --line-height-s: 1.5625rem;

  /* 25px */
  --line-height: 1.5rem;

  /* 24px */
  --line-height-s-s: 1.4375rem;

  /* 23px */
  --line-height-s-alt: 1.375rem;

  /* 22px */
  --line-height-xs-alt: 1.3125rem;

  /* 21px */
  --line-height-xs: 1.25rem;

  /* 20px */
  --line-height-xxs: 1.125rem;

  /* 18px */

  /* Semibold font */
  --font-family-semibold: 'Source Sans 3', 'Arial', sans-serif;
  --font-weight-semibold: 600;
  --font-color-semibold: var(--color-dark-grey);
  --line-height-semibold: 1.5;

  /* Bold font */
  --font-family-bold: 'Source Sans 3', 'Arial', sans-serif;
  --font-weight-bold: 700;
  --font-color-bold: var(--color-dark-grey);
  --line-height-bold: 1.5;

  /* Decorative font */
  --font-family-decorative: 'Kabut Hitam', cursive;

  /* Headings */
  --heading-font-family: 'Source Sans 3', 'Arial', sans-serif;
  --heading-font-weight: 600;
  --color-heading: #333333;
  --heading-color: var(--color-heading);
  --heading-line-height: 1.25;

  /* Spacing */
  --spacing-xxxxs: 4px;
  --spacing-xxxs-l: 4px;
  --spacing-xxxs-alt: 6px;
  --spacing-xxxs: 8px;
  --spacing-xxs-alt: 9px;
  --spacing-xxs: 10px;
  --spacing-xxs-l: 12px;
  --spacing-xxs-l-alt: 14px;
  --spacing-xs: 16px;
  --spacing-xs-alt: 17px;
  --spacing-xs-l: 18px;
  --spacing-xs-m-alt: 19px;
  --spacing-xs-l-alt: 20px;
  --spacing-xs-lg: 22px;
  --spacing-s: 24px;
  --spacing-s-m: 26px;
  --spacing-s-alt: 28px;
  --spacing-m-s: 30px;
  --spacing-m: 32px;
  --spacing-m-l-alt: 38px;
  --spacing-m-l: 35px;
  --spacing-l: 40px;
  --spacing-l-alt: 48px;
  --spacing-l-m: 45px;
  --spacing-l-l: 56px;
  --spacing-l-l-alt: 60px;
  --spacing-xl: 64px;
  --spacing-xl-alt: 72px;
  --spacing-xl-l: 80px;
  --spacing-xl-l-alt: 87.3px;
  --spacing-xxl: 96px;
  --spacing-xxl-l-l: 120px;
  --spacing-xxl-l-alt: 122px;
  --spacing-xxxl-alt: 135px;
  --spacing-xxxxl: 145px;
  --spacing-textarea: 128px;
  --spacing-xxl-negative: -96px;
  --spacing-xxxl: 104px;
  --spacing-negative-xxxs-l: -4px;
  --spacing-negative-xxxs: -8px;
  --spacing-negative-xxs: -10px;
  --spacing-negative-xxs-l: -12px;
  --spacing-negative-xs: -16px;
  --spacing-negative-s: -24px;
  --spacing-negative-m-l: -35px;

  /* Layout */
  --max-width-button: 192px;
  --max-height-small: 280px;
  --max-height-medium: 400px;
  --max-width-small: 375px;
  --max-width-medium: 768px;
  --max-width-medium-alt: 816px;
  --max-width-large: 1024px;
  --max-width-xlarge: 1440px;
  --max-width-container: 1232px;
  --max-width-container-small: 400px;
  --max-width-container-medium: 816px;

  /* Z-index */
  --z-index: 99;
  --z-index-sticky: 98;

  /* Nav */
  --nav-height: 111px;
  --nav-mobile-height: 82px;

  /* Box-shadow */
  --box-shadow: 0 2px 4px 0px #0000001a;
  --box-shadow-car-card: 0px 4px 4px 0px #00000040;
}