:root {
  /* TODO: Tech debt, change these for Surface and onSurface palettes  */
  --color--light-grey: hsl(0, 0%, 73%);
  --color--lightest-grey: hsl(0, 0%, 90%);
  --color--white: hsl(0, 0%, 100%);

  /* Design system */

  /* For now, using --x- prefix for these "design primitive" variables */

  /* color background */
  --x-color-canvas: hsl(0, 0%, 100%);
  --x-color-canvas-subdued: hsl(0, 0%, 98%);
  --x-color-canvas-text: hsl(0, 0%, 33%);
  --x-color-canvas-text-subdued: hsl(0, 0%, 45%);
  --x-color-canvas-text-emphasized: hsl(0, 0%, 20%);
  --x-color-canvas-border: hsl(0, 0%, 85%);
  --x-color-canvas-border-emphasized: hsl(0, 0%, 58%);

  /* color surface 1 */
  --x-color-surface-primary: hsl(0, 0%, 100%);
  --x-color-surface-primary-subdued: hsl(0, 0%, 98%);
  --x-color-surface-primary-text: hsl(0, 0%, 33%);
  --x-color-surface-primary-text-subdued: hsl(0, 0%, 45%);
  --x-color-surface-primary-text-emphasized: hsl(0, 0%, 20%);
  --x-color-surface-primary-border: hsl(0, 0%, 85%);
  --x-color-surface-primary-border-emphasized: hsl(0, 0%, 58%);
  --x-color-surface-primary-disabled: hsl(0, 0%, 97.3%);
  --x-color-surface-primary-accent: hsl(204, 77%, 41%);

  /* color surface 2 */
  --x-color-surface-secondary: hsl(0, 0%, 98%);
  --x-color-surface-secondary-subdued: hsl(0, 0%, 96%);
  --x-color-surface-secondary-text: hsl(0, 0%, 33%);
  --x-color-surface-secondary-text-subdued: hsl(0, 0%, 45%);
  --x-color-surface-secondary-text-emphasized: hsl(0, 0%, 20%);
  --x-color-surface-secondary-border: hsl(0, 0%, 85%);
  --x-color-surface-secondary-border-emphasized: hsl(0, 0%, 58%);
  --x-color-surface-secondary-disabled: hsl(0, 0%, 95.3%);
  --x-color-surface-secondary-accent: hsl(204, 77%, 41%);

  /* color surface 3 */
  --x-color-surface-tertiary: hsl(0, 0%, 100%);
  --x-color-surface-tertiary-subdued: hsl(0, 0%, 98%);
  --x-color-surface-tertiary-text: hsl(0, 0%, 33%);
  --x-color-surface-tertiary-text-subdued: hsl(0, 0%, 45%);
  --x-color-surface-tertiary-text-emphasized: hsl(0, 0%, 20%);
  --x-color-surface-tertiary-border: hsl(0, 0%, 85%);
  --x-color-surface-tertiary-border-emphasized: hsl(0, 0%, 58%);
  --x-color-surface-tertiary-disabled: hsl(0, 0%, 97.3%);
  --x-color-surface-tertiary-accent: hsl(204, 77%, 41%);

  /* color primary action */
  --x-color-primary-action: hsl(204, 77%, 41%);
  --x-color-primary-action-hovered: hsl(204, 79%, 32%);
  --x-color-primary-action-text: hsl(0, 0%, 100%);
  --x-color-primary-action-text-hovered: hsl(0, 0%, 100%);
  --x-color-primary-action-border: hsl(204, 79%, 32%);
  --x-color-primary-action-disabled: hsl(204, 0%, 41%);

  /* color secondary action */
  --x-color-secondary-action: hsl(204, 77%, 41%);
  --x-color-secondary-action-hovered: hsl(204, 79%, 32%);
  --x-color-secondary-action-text: hsl(0, 0%, 100%);
  --x-color-secondary-action-text-hovered: hsl(0, 0%, 100%);
  --x-color-secondary-action-border: hsl(204, 79%, 32%);
  --x-color-secondary-action-disabled: hsl(204, 0%, 41%);

  /* color tertiary */
  --x-color-tertiary-action: hsl(0, 0%, 92%);
  --x-color-tertiary-action-text: hsl(0, 0%, 20%);
  --x-color-tertiary-action-text-subdued: hsl(0, 0%, 40%);

  /* color interactive */
  --x-color-interactive: transparent;
  --x-color-interactive-hovered: transparent;
  --x-color-interactive-text: hsl(204, 77%, 41%);
  --x-color-interactive-text-hovered: hsl(204, 76%, 50%);
  --x-color-interactive-icon: hsl(0, 0%, 100%);

  /* color info */
  --x-color-info: hsl(206, 100%, 97%);
  --x-color-info-disabled: hsl(199, 100%, 94%);
  --x-color-info-subdued: hsl(201, 100%, 95%);
  --x-color-info-text: hsl(0, 0%, 33%);
  --x-color-info-text-subdued: hsl(0, 0%, 45%);
  --x-color-info-text-emphasized: hsl(0, 0%, 20%);
  --x-color-info-border: hsl(205, 63%, 89%);
  --x-color-info-border-emphasized: hsl(192, 100%, 13%);
  --x-color-info-accent: hsl(204, 77%, 41%);

  /* color success */
  --x-color-success: hsl(132, 52%, 94%);
  --x-color-success-disabled: hsl(131, 56%, 90%);
  --x-color-success-subdued: hsl(133, 55%, 91%);
  --x-color-success-text: hsl(0, 0%, 33%);
  --x-color-success-text-subdued: hsl(0, 0%, 45%);
  --x-color-success-text-emphasized: hsl(0, 0%, 20%);
  --x-color-success-border: hsl(127, 42%, 87%);
  --x-color-success-border-emphasized: hsl(134, 27%, 15%);
  --x-color-success-accent: hsl(131, 89%, 28%);

  /* color warning */
  --x-color-warning: hsl(47, 100%, 94%);
  --x-color-warning-disabled: hsl(48, 100%, 87%);
  --x-color-warning-subdued: hsl(47, 100%, 89%);
  --x-color-warning-text: hsl(0, 0%, 33%);
  --x-color-warning-text-subdued: hsl(0, 0%, 45%);
  --x-color-warning-text-emphasized: hsl(0, 0%, 20%);
  --x-color-warning-border: hsl(46, 63%, 84%);
  --x-color-warning-border-emphasized: hsl(53, 100%, 11%);
  --x-color-warning-accent: hsl(44, 100%, 29%);

  /* color critical */
  --x-color-critical: hsl(0, 100%, 96%);
  --x-color-critical-disabled: hsl(0, 100%, 94%);
  --x-color-critical-subdued: hsl(0, 100%, 95%);
  --x-color-critical-text: hsl(0, 0%, 33%);
  --x-color-critical-text-subdued: hsl(0, 0%, 45%);
  --x-color-critical-text-emphasized: hsl(0, 0%, 20%);
  --x-color-critical-border: hsl(0, 82%, 89%);
  --x-color-critical-border-emphasized: hsl(0, 100%, 18%);
  --x-color-critical-accent: hsl(0, 77%, 51%);

  /* typography - font stacks */
  --x-typography-primary-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;
  --x-typography-secondary-fonts: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;

  /* typography - font weights */
  --x-typography-primary-weight-base: 400;
  --x-typography-primary-weight-bold: 500;
  --x-typography-secondary-weight-base: 400;
  --x-typography-secondary-weight-bold: 500;

  /* typography - ratio of 1:1.285 */
  --x-typography-size-extra-small: rem(9px);
  --x-typography-size-small: rem(12px);
  --x-typography-size-default: rem(14px);
  --x-typography-size-medium: rem(16px);
  --x-typography-size-large: rem(18px);
  --x-typography-size-extra-large: rem(24px);
  --x-typography-size-extra-extra-large: rem(28px);

  /* spacing - ratio of 1:1.225 */
  --x-spacing-ratio: 1.225;
  --x-spacing-tight4x: rem(5px);
  --x-spacing-tight3x: rem(6px);
  --x-spacing-tight2x: rem(7px);
  --x-spacing-tight1x: rem(9px);
  --x-spacing-tight: rem(11px);
  --x-spacing-base: rem(14px);
  --x-spacing-loose: rem(17px);
  --x-spacing-loose1x: rem(21px);
  --x-spacing-loose2x: rem(26px);
  --x-spacing-loose3x: rem(32px);
  --x-spacing-loose4x: rem(38px);

  /* motion - duration ratio of 1:1.5 */
  --x-duration-none: 0;
  --x-duration-fast: 133.333ms;
  --x-duration-base: 200ms;
  --x-duration-slow: 300ms;
  --x-duration-slower: 450ms;
  --x-duration-slowest: 675ms;

  @media screen and (prefers-reduced-motion: reduce) {
    --x-duration-fast: 0.001ms;
    --x-duration-base: 0.001ms;
    --x-duration-slow: 0.001ms;
    --x-duration-slower: 0.001ms;
    --x-duration-slowest: 0.001ms;
  }

  --x-timing-base: ease-in-out;
  --x-timing-ease-out: cubic-bezier(0.3, 0.5, 0.5, 1);
  --x-timing-linear: linear;
  --x-timing-spring: cubic-bezier(0.3, 0, 0, 1);

  /* border */
  --x-border-full: 1px;
  --x-border-block-end: 0 0 1px;
  --x-border-none: 0;

  /* border radii */
  --x-border-radius-none: 0;
  --x-border-radius-tight: em(2px);
  --x-border-radius-base: em(5px);
  --x-border-radius-loose: em(8px);
  --x-border-radius-fully-rounded: em(23px);

  /* border width */
  --x-border-width-base: rem(1px);
  --x-border-width-medium: rem(2px);
  --x-border-width-thick: rem(5px);
  --x-border-width-extra-thick: rem(10px);

  /* defaults */
  --x-default-color-accent: hsl(204, 77%, 41%);
  --x-default-color-border: hsl(0, 0%, 85%);
  --x-default-color-border-emphasized: hsl(0, 0%, 58%);

  /* global */
  --x-global-typography-letter-case: none;
  --x-global-typography-line-size-default: 1.5;
  --x-global-typography-line-size-small: 1.3;
  --x-global-typography-kerning: normal;
  --x-global-border-radius: var(--x-border-radius-base);

  /* option lists */
  --x-option-list-block-spacing: 0;
  --x-option-list-block-padding: var(--x-spacing-loose);
  --x-option-list-inline-padding: var(--x-spacing-loose);

  /* review blocks */
  --x-review-block-block-padding: var(--x-spacing-tight);
  --x-review-block-inline-padding: var(--x-spacing-loose);

  /* money lines */
  --x-money-lines-block-spacing: var(--x-spacing-tight);
  --x-money-lines-divider-block-spacing: var(--x-spacing-loose1x);
  --x-money-lines-block-padding: 0;
  --x-money-lines-inline-padding: 0;
  --x-money-summary-block-padding: 0;
  --x-money-summary-inline-padding: 0;

  /* buyer journey */
  --x-buyer-journey-inline-spacing: var(--x-spacing-tight1x);

  /* buttons */
  --x-button-large-multiplier: calc(
    var(--x-spacing-ratio) * var(--x-spacing-ratio)
  );
  --x-button-extra-large-multiplier: calc(
    var(--x-spacing-ratio) * var(--x-spacing-ratio) * var(--x-spacing-ratio)
  );

  /* button primary */
  --x-primary-button-block-padding: var(--x-spacing-base);
  --x-primary-button-inline-padding: var(--x-spacing-loose);
  --x-primary-button-border-width: var(--x-border-width-base);

  /* button secondary */
  --x-secondary-button-block-padding: var(--x-spacing-base);
  --x-secondary-button-inline-padding: var(--x-spacing-loose);
  --x-secondary-button-border-width: var(--x-border-width-base);

  /* button tertiary */
  --x-tertiary-button-block-padding: var(--x-spacing-tight4x);
  --x-tertiary-button-inline-padding: var(--x-spacing-tight3x);

  /* radio */
  --x-radio-size-base: em(18px);
  --x-radio-size-large: em(22px);

  /* checkbox */
  --x-checkbox-size: em(18px);

  /* datepicker */
  --x-datepicker-min-column-size: rem(44px);
  --x-datepicker-min-row-size: rem(44px);

  /* icons */
  --x-icon-size-small: em(10px);
  --x-icon-size-default: em(14px);
  --x-icon-size-large: em(18px);

  /* thumbnail */
  --x-thumbnail-aspect-ratio: 1;

  /* opacity */
  --x-opacity-disabled: 0.5;
  --x-opacity-readonly: 0.7;

  /* link */
  --x-link-transition-duration: var(--x-duration-base);

  /* modal */
  --x-modal-max-width: rem(840px);
  --x-modal-iframe-default-height: rem(400px);
}

/* Global
   ----------------------------------------------------------------------------- */

*,
*::after,
*::before {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%; /* calc(10 / 16 * 100%); 16px being the default browser size */
  text-size-adjust: 100%;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

em,
i {
  font-style: inherit;
}

b,
strong {
  font-weight: inherit;
}

small {
  font-size: var(--x-typography-size-small);
}

address {
  font-style: normal;
}

/* Tables
   ----------------------------------------------------------------------------- */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
  font-weight: 400;
}

/* Media
   ----------------------------------------------------------------------------- */

img {
  border-style: none;
}

figure {
  margin: 0;
}

/* Forms
   ----------------------------------------------------------------------------- */

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
optgroup,
select,
textarea {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  appearance: button;
  cursor: pointer;

  &::-moz-focus-inner {
    border: none;
    padding: 0;
  }
}

[type='checkbox'],
[type='radio'] {
  padding: 0;
}

/* Misc
   ----------------------------------------------------------------------------- */

[hidden],
template {
  display: none;
}

iframe {
  margin: 0;
  padding: 0;
  border: 0;
}