:root {
  // Blues
  --tf-blue: #009;
  --tf-blue-light: #eff3fd;
  --tf-blue-light-medium: #a3a5f9;
  --tf-blue-medium: #7a7ff5;
  --tf-blue-dark: #006;
  // Greens
  --tf-green: #00b980;
  --tf-green-light: #e3f8f2;
  --tf-green-light-medium: #85daba;
  --tf-green-medium: #53b684;
  --tf-green-dark: #1a7847;
  // Red
  --tf-red: #f92f37;
  --tf-red-light: #ffece9;
  --tf-red-dark: #a2060b;
  // Orange
  --tf-orange: #f7912a;
  --tf-orange-light: #fffde1;
  --tf-orange-dark: #9b4e00;
  // Yellow
  --tf-yellow: #ffea00;
  --tf-yellow-light: #fffde1;
  --tf-yellow-dark: #cdbf1d;
  // Gray
  --tf-gray: #999;
  --tf-gray-light: #fafafa;
  --tf-gray-light-medium: #efefef;
  --tf-gray-medium: #c1c1c1;
  --tf-gray-dark: #42474c;
  // base
  --tf-black: #000;
  --tf-white: #fff;
  // theme
  --tf-primary: var(--tf-blue);
  // info
  --tf-info: var(--tf-blue);
  --tf-info-light: var(--tf-blue-light);
  --tf-info-border-color: var(--tf-blue);
  --tf-info-font-color: var(--tf-blue);
  // success
  --tf-success: var(--tf-green);
  --tf-success-light: var(--tf-green-light);
  --tf-success-border-color: var(--tf-green);
  --tf-success-font-color: var(--tf-green);
  // --tf-success-font-color: var(--tf-green-dark); revisiting with UX
  // warning
  --tf-warning: var(--tf-orange);
  --tf-warning-light: var(--tf-orange-light);
  --tf-warning-border-color: var(--tf-orange);
  --tf-warning-font-color: var(--tf-orange);
  // --tf-warning-font-color: var(--tf-orange-dark); revisiting with UX
  // danger
  --tf-danger: var(--tf-red);
  --tf-danger-light: var(--tf-red-light);
  --tf-danger-border-color: var(--tf-red);
  --tf-danger-font-color: var(--tf-red);
  // --tf-danger-font-color: var(--tf-red-dark); revisiting with UX
  // disabled
  --tf-disabled: var(--tf-gray-medium);
  --tf-disabled-light: var(--tf-gray-light-medium);
  --tf-disabled-font-color: var(--tf-gray-medium);
  // border
  --tf-border: 1px solid var(--tf-gray-medium);
  --tf-border-radius: 2px;
  // forms
  --tf-input-height: 30px;
  // dimensions
  --tf-form-gutter: 24px;
  --tf-form-half-gutter: 12px;
  // sibling buttons margins
  --tf-btn-margin-large: 20px; // large button
  --tf-btn-margin-medium: 15px; // medium button, text, text-icon
  --tf-btn-margin-small: 4px; // icon
  // font sizes/weights
  --tf-small-font-size: 12px;
  --tf-body-font-color: var(--tf-gray-dark);
  --tf-body-font-size: 14px;
  --tf-body-font-weight: regular;
  --tf-body-large-font-size: 18px;
  --tf-h4-font-size: 14px;
  --tf-h4-font-weight: 800;
  --tf-h3-font-size: 16px;
  --tf-h3-font-weight: 800;
  --tf-h2-font-size: 20px;
  --tf-h2-font-weight: 800;
  --tf-h1-font-size: 30px;
  --tf-h1-font-weight: 700;
}