:root {
  --primary-400: #2861a3;
  --primary-500: #1f4f86;
  --primary-600: #194372;

  --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;

  --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-border: #ccc;

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

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

  --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;
}

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;
}