:root {
  /* PRIMARY PALETTE */
  --color-primary: #435f42;
  --color-primary-light: #5b8df7;
  --color-primary-dark: #002f72;

  /* SECONDARY PALETTE */
  --color-secondary: #ff9800;
  --color-secondary-light: #ffc947;
  --color-secondary-dark: #c66900;

  /* NEUTRALS */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #e0e0e0;
  --color-gray-500: #9e9e9e;
  --color-gray-700: #616161;
  --color-gray-900: #212121;

  /* TEXT COLORS */
  --text-color: var(--color-gray-900);
  --text-light: var(--color-gray-500);

  /* BACKGROUND COLORS */
  --bg-color: var(--color-white);
  --bg-alt: var(--color-gray-100);

  /* FEEDBACK COLORS */
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-info: #2196f3;
}

/* EXAMPLE USAGE */
.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.text-primary {
  color: var(--color-primary);
}
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}