:root {
  --border: 1px solid #ddd;
  --color-primary: #232f3f;
  --color-secondary: #f39f39;
  --color-tertiary: #3a4757;
  --font-color: #666666;
  --font-size-largest: 1.2rem;
  --font-size-large: 1rem;
  --font-size: 0.8rem;
  --font-size-small: 0.7rem;
  --font-size-smallest: 0.6rem;
  --font-weight-bold: 700;
  --gray-dark: #c7cace;
  --gray: #ddd;
  --gray-light: #e6e6e6;
  --line-height: 1.55;
  --spacing-half: 0.7rem;
  --spacing-quarter: 0.35rem;
  --spacing: 1.4rem;
}

.color-primary {
  background-color: var(--color-primary);
}
.color-secondary {
  background-color: var(--color-secondary);
}
.color-tertiary {
  background-color: var(--color-tertiary);
}

.color-white {
  color: white;
}

.color-black {
  color: black;
}

.font-size-largest {
  font-size: var(--font-size-largest);
}
.font-size-large {
  font-size: var(--font-size-large);
}
.font-size {
  font-size: var(--font-size);
}
.font-size-small {
  font-size: var(--font-size-small);
}
.font-size-smallest {
  font-size: var(--font-size-smallest);
}

.gray-dark {
  background-color: var(--gray-dark);
}
.gray {
  background-color: var(--gray);
}
.gray-light {
  background-color: var(--gray-light);
}

.spacing-none {
  margin: 0;
  padding: 0;
}

.margin-none {
  margin: 0;
}
.margin {
  margin: var(--spacing);
}
.margin-top {
  margin-top: var(--spacing);
}
.margin-right {
  margin-right: var(--spacing);
}
.margin-bottom {
  margin-bottom: var(--spacing);
}
.margin-left {
  margin-left: var(--spacing);
}

.padding-none {
  padding: none;
}
.padding {
  padding: var(--spacing);
}
.padding-top {
  padding-top: var(--spacing);
}
.padding-right {
  padding-right: var(--spacing);
}
.padding-bottom {
  padding-bottom: var(--spacing);
}
.padding-left {
  padding-left: var(--spacing);
}