:root {
  /* Colors */
  --primary-color: #337ab7;
  --on-primary-color: #FFFFFF;

  --link-color: #337ab7;

  --error-color: #f8d7da;
  --error-border-color: #f5c6cb;
  --on-error-color: #721c24;

  --success-color: #d4edda;
  --success-border-color: #6c9d77;
  --on-success-color: #155724;

  --warning-color: #fff3cd;
  --warning-border-color: #ffeeba;
  --on-warning-color: #856404;

  --background-color: #F2F2F2;
  --background-border-color: #D9D9D9;
  --on-background-primary-color: #0D0D0D;
  --on-background-secondary-color: #737373;

  --surface-color: #FFFFFF;
  --surface-border-color: #D9D9D9;
  --on-surface-primary-color: #0D0D0D;
  --on-surface-secondary-color: #737373;

  --opacity-disabled: .38;


  /* Font Size */
  --font-size-mini: 0.75rem; /* 12px */
  --line-height-mini: 1rem;

  --font-size-tiny: 0.875rem; /* 14px */
  --line-height-tiny: 1.125rem;

  --font-size-small: 1rem; /* 16px */
  --line-height-small: 1.25rem;

  --font-size-medium: 1.125rem; /* 18px */
  --line-height-medium: 1.375rem;

  --font-size-large: 1.25rem; /* 20px */
  --line-height-large: 1.5rem;

  --font-size-x-large: 1.5rem; /* 24px */
  --line-height-x-large: 1.75rem;

  --font-size-big: 2rem; /* 32px */
  --line-height-big: 2.25rem;

  --font-size-huge: 2.5rem; /* 40px */
  --line-height-huge: 2.75rem;

  --font-size-massive: 3rem; /* 48px */
  --line-height-massive: 3.25rem;

  --font-size-x-massive: 3.5rem; /* 56px */
  --line-height-x-massive: 3.75rem;

  --font-weight-normal: normal;
  --font-weight-bold: bold;

  /* Spacing */
  --spacing-mini: 0.25rem; /* 4px */
  --spacing-tiny: 0.5rem; /* 8px */
  --spacing-small: 0.75rem; /* 12px */
  --spacing-medium: 1rem; /* 16px */
  --spacing-large: 1.5rem; /* 24px */
  --spacing-big: 2rem; /* 32px */

  /* Border Radius */
  --border-radius-small: 0.25rem; /* 4px */
  --border-radius-medium: 0.5rem; /* 8px */
  --border-radius-large: 1rem; /* 16px */

  /* Box Shadow */
  --box-shadow-small:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0,0,0,.12);
  --box-shadow-medium:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0,0,0,.12);
  --box-shadow-large:
    0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14),
    0px 9px 46px 8px rgba(0,0,0,.12);

  /* Media query */
  --mobile-breakpoint-up: 540px;
  --mobile-breakpoint-down: 539px;
  --tablet-breakpoint-up: 720px;
  --tablet-breakpoint-down: 719px;
  --desktop-breakpoint-up: 960px;
  --desktop-breakpoint-down: 959px;

  /* Container */
  --max-width-container: 1140px;
  --width-container: calc(100% - 3rem);
}

.field + .field {
  margin-top: var(--spacing-large);
}