:root {
  --primary-400: #1664ad;
  --primary-500: #1a5c8e;
  --primary-600: #0f3e5c;

  --secondary-400: rgb(45, 143, 146);
  --secondary-500: rgb(17, 84, 87);
  --secondary-600: rgb(8, 63, 65);

  --background: #fff;
  --surface: #fff;

  --error-400: #972222;
  --error-500: #811a1a;
  --error-600: #641111;

  --success-400: #00b959;
  --success-500: #037d3e;
  --success-600: #005328;

  --warning-400: #d8942d;
  --warning-500: #b8822c;
  --warning-600: #8c5e1e;

  --subtle-400: #f5f5f5;
  --subtle-500: #e2e2e2;
  --subtle-600: #d5d5d5;

  --on-primary-400: #fff;
  --on-primary-500: #fff;
  --on-primary-600: #fff;

  --on-secondary-400: #fff;
  --on-secondary-500: #fff;
  --on-secondary-600: #fff;

  --on-background: #333;
  --on-surface: #333;
  --on-subtle: #333;
  --on-surface-light: #666;
  --on-surface-lighter: #999;
  --on-surface-border: #ccc;
  /* Text the user typed or picked, inside a form field. Sits between the field
     label (--on-surface) and its caption (--on-surface-light) so a form reads
     label first, value second. */
  --on-field: #555;

  --on-error-400: #fff;
  --on-error-500: #fff;
  --on-error-600: #fff;

  --on-warning-400: #fff;
  --on-warning-500: #fff;
  --on-warning-600: #fff;

  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;

  --font-family: Roboto, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --control-height: 32px;
  --control-height-s: 26px;
  --radius: 4px;

  --shadow-short-1: 2px 2px 4px rgb(0 0 0 / 25%);
  --shadow-short-2: 2px 2px 4px rgb(0 0 0 / 50%);

  font-weight: 300;
  font-family: Roboto, sans-serif;
}
html,
body,
#application {
  width: 100%;
  height: 100%;
  margin: 0;
}

* {
  font-family: var(--font-family);
}

html {
  color: var(--on-surface);
  background: #333;
}

::placeholder {
  color: var(--on-surface-border);
  font-family: var(--font-family);
  font-weight: 300;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}